首页 > 资讯 > HTML/CSS > 正文

ajax的快速入门讲解

18-06-21 来源：[db:作者]

收藏我要投稿

一、什么是ajax？

上图展示的是用户在注册过程中常见的功能。

1、请分析这个功能如何实现：

1）页面获取当前用户输入的手机号

2）将手机号发送给服务器，服务器数据库查询，返回给浏览器一个结果

3）修改部分的页面，给用户显示提示信息（注意：不是重新加载页面）

那么能做到以上两件事情的技术，就是ajax技术！！！

2、Ajax特点：

1 浏览器自动的发送请求给服务器，自动接收服务器的响应

2 依然遵守http协议

3 ajax的请求和响应，数据量特别小

4 只修改页面的部分内容

总结什么是ajax：自动发送请求，接受响应，数据量非常小，依然按照http协议做网络的传输，可以更新页面部分数据的技术，就是ajax技术。

3、如何操作ajax技术？

简单讲：使用的是Javascript代码。

二、ajax运行机制

Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

Ajax其核心只有JavaScript、XMLHTTPRequest和DOM，在旧的交互方式中,由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。而使用Ajax后用户从感觉上几乎所有的操作都会很快响应没有页面重载（白屏）的等待。

三、ajax快速入门

1、获取ajax核心对象、发送请求、接收响应

API文档：

1.1、获取XMLHttpRequest对象（ajax核心对象，ajax引擎）

XMLHttpRequest 是 AJAX 的基础（核心）。

代码演示：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

效果：

1.2、向服务器发送请求——使用open方法和send方法

方法截图：

发送请求代码测试：

  //alert(getXHR());
   function test1() {
      //获取核心对象
      var xhr = getXHR();
      //发送请求给服务器
      // method 请求方式
      // url 请求地址
      // async true 设置是否异步操作（默认使用true：异步）
      xhr.open("get", "${pageContext.request.contextPath}/ajaxusername=张三",
            true);
      xhr.send();
   }
 
   //test1();

Servlet接受请求参数代码：

publicclass AjaxServlet extends HttpServlet {
 
   publicvoid doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 
      String parameter = request.getParameter("username");
      String username = new String(parameter.getBytes("iso-8859-1"),"utf-8");
      System.out.println(username);
     
      response.setContentType("text/html;charset=utf-8");
      response.getWriter().write("测试Ajax成功！！！");
   }
 
   publicvoid doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      doGet(request, response);
   }
}

1.3、接收服务器响应

API截图：

ajax代码：

//测试获取响应数据
   function test2() {
      //获取核心对象
      var xhr = getXHR();
      //发送请求给服务器
      // method 请求方式
      // url 请求地址
      // async true 设置是否异步操作（默认使用true：异步）
      xhr.open("get", "${root}/ajaxusername=张三",
            true);
      xhr.send();
 
      //接收来自服务器的响应
      var data = xhr.responseText;
      alert(data);
      // 问题：请求和响应都已经完成了，但是，使用弹窗显示数据的时候，数据没有出现？
      // 答：在发送请求之后，没有等待网络延迟，直接获取responseText数据，当前获取不到。
 
      /*
         场景:妹子（上海）八九点钟的时候，逛淘宝（杭州）。
           
         发送请求（上海）给淘宝服务器（杭州），网络延迟（460  200  150 单位：ms）。
         获取来自淘宝服务器（杭州）的响应（上海），网络延迟。
     
       */
   }

servlet代码：

publicclass AjaxServlet extends HttpServlet {
 
   publicvoid doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 
      String parameter = request.getParameter("username");
      String username = new String(parameter.getBytes("iso-8859-1"),"utf-8");
      System.out.println(username);
     
      response.setContentType("text/html;charset=utf-8");
      response.getWriter().write("测试Ajax成功！！！");
   }
 
   publicvoid doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      doGet(request, response);
   }
}

1.4、设置onreadystatechange事件执行函数（等待服务器响应）

API截图：

ajax代码演示：

function test3() {
      //获取核心对象
      var xhr = getXHR();
      xhr.open("get", "${root}/ajaxusername=张三",
            true);
      xhr.send();
      //等待网络延迟
      xhr.onreadystatechange = function() {
         // 判断当请求完成，响应就绪，而且响应状态为200
         if (xhr.readyState == 4 && xhr.status == 200) {
            var data = xhr.responseText;
            alert(data);
         }
      }
   }
 
   test3();

ajax小结（ajax代码怎么写）：

1）、获取核心对象

2）、设置等待服务器响应

3）、发送请求

2、ajax API 详解

2.1、onreadystatechange属性

存储函数（或函数名），每当readyState 属性改变时，就会调用该函数。

执行机制图解：

2.2、open方法

是什么：规定请求的类型、URL 以及是否异步处理请求。

代码： xhr.open("get", "${root}/ajaxusername=张三",true);

使用post方式还是get方式

官方建议：

../201510/GridViewLiveTiles.html

演示发送post请求和中文请求参数:

function test4() {
      //获取核心对象
      var xhr = getXHR();
      xhr.open("post", "${root}/ajax",true);
      //设置一个消息头，模拟表单发送数据（注意:如果不设置消息头，服务器获取不到请求参数）
      xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
      //设置要发送的请求参数
      xhr.send("name=李四");
      //等待网络延迟
      xhr.onreadystatechange = function() {
         // 判断当请求完成，响应就绪，而且响应状态为200
         if (xhr.readyState == 4 && xhr.status == 200) {
            var data = xhr.responseText;
            alert(data);
         }
      }
   }

第三个参数async： True（异步）或False（同步）？

页面准备：

function test5() {
      //获取核心对象
      var xhr = getXHR();
      xhr.open("get", "${root}/ajaxusername=张三",  true);
      xhr.send();
      //等待网络延迟
      xhr.onreadystatechange = function() {
         // 判断当请求完成，响应就绪，而且响应状态为200
         if (xhr.readyState == 4 && xhr.status == 200) {
            var data = xhr.responseText;
            alert(data);
         }
      }
   }
   /**
      true :设置为异步请求，所有的请求操作是插队执行。
      false:设置为同步请求，所有的请求操作是排队执行。
  
   */
   //test5();

2.3、setRequestHeader方法

是什么：如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头

代码：

function test4() {
      //获取核心对象
      var xhr = getXHR();
      xhr.open("post", "${root}/ajax",true);
      //设置一个消息头，模拟表单发送数据（注意:如果不设置消息头，服务器获取不到请求参数）
      xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
      //设置要发送的请求参数
      xhr.send("name=李四");
      //等待网络延迟
      xhr.onreadystatechange = function() {
         // 判断当请求完成，响应就绪，而且响应状态为200
         if (xhr.readyState == 4 && xhr.status == 200) {
            var data = xhr.responseText;
            alert(data);
         }
      }
   }

注意：这个方法相当于，设置了表单的enctype属性的默认值，来模拟表单发送数据

2.4、send方法

是什么：将请求发送到服务器。

仅限post请求方式:

xhr.send(“username=张三”)；

2.5、readyState属性

是什么：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

代码截图：

ReadyState其他状态的应用（提示用户请求处理中）：

function test6() {
      //获取核心对象
      var xhr = getXHR();
      //等待网络延迟
      xhr.onreadystatechange = function() {
         if (xhr.readyState == 1) {
           
            alert("服务器连接已建立 ");
         }
         if (xhr.readyState == 2) {
           
            alert("请求已接收");
         }
         if (xhr.readyState == 3) {
           
            alert("请求处理中");
         }
         // 判断当请求完成，响应就绪，而且响应状态为200
         if (xhr.readyState == 4 && xhr.status == 200) {
            var data = xhr.responseText;
            alert(data);
         }
      }
      //发送请求
      xhr.open("get", "${root}/ajaxusername=张三",  true);
      xhr.send();
   }
   test6();

2.6、status属性

是什么：存储响应状态码

代码截图：

常用响应状态码：

200：OK

302：重定向

401：权限不足

404：找不到

405：没有这个方法（调用servlet程序的时候，发出响应，当前servlet中不存在这个方法去执行）

500：出错了

2.7、responseText属性

是什么：获取字符串形式的响应数据

代码：

var data=xhr.responseText;

3、jQuery Ajax

jQuery对Ajax的使用提供了非常好的封装，简单的很！

jQuery提供了6个编写Ajax的方法：

$.ajax(url, [settings]) 最基本的ajax编程方法，推荐使用！

load(url, [data], [callback]) 载入HTML代码并插入至DOM中，例如：$(“#mydiv”).load(“a.html”);(<%@ include%>)

$.get(url, [data], [callback], [type]) Ajax的get方式请求，一般用于获取数据

$.post(url, [data], [callback], [type]) Ajax的post方式请求，一般用于发送表单数据

$.getJSON(url, [data], [fn]) Ajax跨域获取服务器数据例子：www.taobao.com购买到www.alipay.com支付

$.getScript(url, [callback]) 载入并执行一个跨域的js文件

最基本的$.ajax() $.get() $.post()

$.ajax(url,[settings])

$(function(){
     
      $.ajax({
         //设置请求方式
         type:"get",
         //设置请求路径
         url:"${root}/ajaxusername=张三",
         //设置是否异步
         async:"true",
         success:function(data){
            //获取响应的数据
            alert(data);
         }
      }); 
   });

效果：

点击复制链接与好友分享!回本站首页