11、Ajax

JAXA

• 相关概念
• 源生JS实现AJAX
• jQuery实现AJAX

---

一、相关概念

1.1、什么是JAXA？

​ AJAX（ASynchronous JavaScript And XML）：异步的JavaScript和XML。
​ AJAX是一种局部更新网页中内容的技术，在传统的页面中（不适用AJAX）如果需要更新内容，必须重新加载整个页面，而AJAX正是为此而诞生的。

1.2、同步和异步

1. 同步：客户端向服务器发送请求以后，客户端会处于一个等待状态（不能做任何操作），在服务器响应请求以后客户端才会恢复正常操作状态。【类似于公交车到站停车，在乘客上下车之前公交车是不能动的】
2. 异步：客户端向服务器发送请求以后，客户端仍然可以进行正常操作。【可以理解为到站的公交车不停车，你要下车就跳车，不会影响公交车的行驶】

二、源生JS实现AJAX

2.1、使用步骤

1. 创建异步交互对象：var xmlhttp = new XMLHttpRequest();

   var xmlhttp;
   if (window.XMLHttpRequest) {
   	xmlhttp = new XMLHttpRequest();
   }else{
   	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");// code for IE6, IE5
   }
   

2. 定义请求数据：xmlhttp.method(method，url，async);

   • method：请求方式（GET或者POST）
   • url：请求资源路径
   • async：true（同步请求）、false（异步请求）

   xmlhttp.open("GET","/studyJq2/ajaxServlet?userName=张三",true);
   

3. 发送请求：xmlhttp.send(String);

   • string：如果是GET请求，参数都跟在url后面，那么这里可以不填或者填null，如果是POST请求，则将 请求参数拼接成一个字符串丢进去。

   xhttp.send();
   

4. 接收响应参数：var responseText = xhttp.responseText;

   xhttp.onreadystatechange = function() {//当readyState属性发生变化时被调用的函数
   	if (this.readyState == 4 && this.status == 200) {//响应成功并接收到响应参数
   		var responseText = xhttp.responseText;//获取响应字符串
   	}
   };
   

2.2、XMLHttpRequest 对象方法

1. 创建新的 XMLHttpRequest 对象

   var xmlhttp = new XMLHttpRequest();
   

2. 取消当前请求

   xmlhttp.abort();
   

3. 返回头部信息

   xmlhttp.getAllResponseHeaders();
   

4. 返回特定的头部信息

   xmlhttp.getResponseHeader();
   

5. 规定请求

   • method：请求方式（GET或者POST）
   • url：请求资源路径
   • async：true（同步请求）、false（异步请求）

   xmlhttp.open(method, url, async);
   

6. 将请求发送到服务器，用于 GET 请求

   xmlhttp.send();
   

7. 将请求发送到服务器，用于 POST 请求

   xmlhttp.send(string);
   

8. 向要发送的报头添加标签/值对

   xmlhttp.setRequestHeader();
   

2.3、XMLHttpRequest 对象属性

1. onreadystatechange：定义当 readyState 属性发生变化时被调用的函数
2. readyState：保存 XMLHttpRequest 的状态。
   • 0：请求未初始化
   • 1：服务器连接已建立
   • 2：请求已收到
   • 3：正在处理请求
   • 4：请求已完成且响应已就绪
3. responseText：以字符串返回响应数据
4. responseXML：以 XML 数据返回响应数据
5. status：返回请求的状态码（这里仅仅列举了部分响应码）
   • 200: “OK”
   • 403: “Forbidden”
   • 404: “Not Found”
6. statusText：返回状态文本（比如 “OK” 或 “Not Found”）

三、jQuery实现AJAX

3.1、使用步骤

• 语法：$.ajax()

  $.ajax({
  	url:"/studyJq3/ajaxServlet",//请求资源路径
  	type:"POST",//请求方式（默认GET）
  	data:{"userName":"张三","age":24},//请求参数
  	//date:"userName=张三&age=24",
  	success:function (data) {//回掉函数
  		alert(data);
  	},
  	dataType:"text"//设置响应数据的格式
  })
  

• 语法：$.get(url，[data]，[callback]，[type])

• url：请求路径

• data：请求参数

• callback：回掉函数

• type：响应数据的类型

  $.get(
  	"/studyJq3/ajaxServlet",//请求资源路径
  	{userName:"张三",age:24},//请求参数
  	function(data) {//回掉函数
  		alert(data);
  	},
  	"text"//设置响应数据的格式
  );
  

• 语法：`$.post(url，[data]，[callback]，[type])

  $.post(
  	"/studyJq3/ajaxServlet",//请求资源路径
  	{userName:"张三",age:24},//请求参数
  	function(data) {//回掉函数
  		alert(data);
  	},
  	"text"//设置响应数据的格式
  );