原生JS中的Ajax请求与jQuery中的Ajax请求

1. Ajax 请求简介

ajax（Asynchronous JavaScript and XML）：是指一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，ajax 可以使网页实现异步更新。这就意味着可以在 不重新加载整个网页的情况下，对网页的局部进行更新

2. 原生 JS 中的 Ajax 请求流程

2.1. 创建异步对象

var xhr = new XMLHttpRequest();

2.2. 调用open() 方法设置请求行

设置请求行 open，也就是设置请求方式及请求 URL

// get 请求如果有参数，就需要在 url 后面拼接参数
xhr.open('GET', "xxxxxx?username="+name);

// post 如果有参数，就在请求体中传递
xhr.open('POST', URL);
// post 方式发送数据，需要设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

2.2.1. open() 方法参数

语法：open(method, url, async)，方法有 3 个参数

• method 请求类型：对应的取值是 GET 和 POST
• url：文件在服务器上的位置即接口路径
• async：默认值 true 异步，false 为同步
  • async 为 true 时，服务器的请求是异步的，也就是脚本执行 send() 方法后不等待服务器的执行结果，继续执行脚本代码
  • async 为 false 时，服务器的请求是同步的， 也就是脚本执行 send() 方法后等待服务器的执行结果，若在等待过程中超时，则不再等待，继续执行后面的脚本代码

2.3. 调用 send() 方法发送数据

// get的参数在 url 拼接了，所以不需要在这个函数中设置
xhr.send(null);
 
// post 必须有参数
xhr.send('a=100&b=200&c=300');

• send(string)：请求发送到服务器，仅用于 POST 请求

2.4. 设置回调函数

xhr.onreadystatechange = callback；

2.5. 完整的请求案例

2.5.1. ajax-get 方式请求案例

var xhr = new XMLHttpRequest();
xhr.open("get","xxxxxx?username="+name);
xhr.send(null);

// 回调函数
xhr.onreadystatechange = function() {
	if(xhr.status == 200 && xhr.readyState == 4){ 
   	 	console.log(xhr.responseText);
    	document.querySelector(".showmsg").innerHTML = xhr.responseText;;
 	}
}

2.5.2. ajax-post 方式请求案例

var xhr = new XMLHttpRequest();
xhr.open("post","xxxxxx");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username="+name);

// 回调函数
xhr.onreadystatechange = function() {
	// 判断服务器是否响应，判断异步对象的响应状态
	if(xhr.status == 200 && xhr.readyState == 4){
 		document.querySelector(".showmsg").innerHTML = xhr.responseText;
	}
}

2.5.3. Ajax 中的 readyState 属性

• 0：未初始化，尚未调用 open() 方法
• 1：启动，已经调用 open() 方法，但尚未调用 send() 方法
• 2：发送，已经调用 send() 方法，但尚未接收到响应
• 3：接收，已经接收到部分响应数据
• 4：完成，已经接收到全部响应数据，而且已经可以在客户端使用了

2.5.4. Ajax 中的状态码 status 属性

• 200-300：表示响应成功
• 400：请求参数错误
• 401：无权限访问
• 404：访问的资源不存在

3. jQuery 中的 Ajax 请求

3.1. $.get() 请求

$.get() 是以 GET 方式实现 Ajax 请求的，在提交短数据（数据量不能太多，最大 4KB）时可用

$.get(
    url,          // 必需：将请求发送到哪里的URL链接
    data,         // 可选：连同请求发送到服务器的数据【俗称：参数】
    success(      // 可选：当请求成功时运行的函数
        response, // 包含来自请求的结果数据
        status,   // 包含请求的状态
        xhr       // 包含 XMLHttpRequest 对象
    ),
    dataType      // 可选：预计的服务器响应的数据类型
                  // 默认jQuery 将智能判断。可能的类型有："xml"、"html"、"text"、"script"、"json"和"jsonp"
)

3.1.1. 常用示例

// 1、只有路径
$.get("XXX/XXXXXX");
 
// 2、路径+参数【两个参数：姓名和年龄】
$.get("XXX/XXXXXX", {name: "John",age: "20"});
  
// 3、路径+参数+回调方法
$.get("XXX/XXXXXX", {name: "John",age: "20"},function(data){
	alert("返回的数据是："+data);
});
 
// 4、路径+参数+回调方法+返回值类型【json】
$.get("XXX/XXXXXX", {name: "John",age: "20"},function(data){
	alert("返回的数据是："+data);
},"json"));

3.2. $.post() 请求

$.post() 是以 POST 方式实现 Ajax 异步请求的

$.post(
    url,          //必需：将请求发送到哪里的URL链接
    data,         //可选：连同请求发送到服务器的数据【俗称：参数】
    success(      //可选：当请求成功时运行的函数
        response, //包含来自请求的结果数据
        status,   // 包含请求的状态
        xhr       //包含 XMLHttpRequest 对象
    ),
    dataType      //可选：预计的服务器响应的数据类型
                  //默认jQuery 将智能判断。可能的类型有："xml"、"html"、"text"、"script"、"json"和"jsonp"
)

3.2.1. 常用示例

// 1、只有路径
$.post("XXX/XXXXXX");
 
// 2、路径+参数【两个参数：姓名和年龄】
$.post("XXX/XXXXXX", {name: "John",age: "20"});
  
// 3、路径+参数+回调方法
$.post("XXX/XXXXXX", {name: "John",age: "20"},function(data){
	alert("返回的数据是："+data);
});
 
// 4、路径+参数+回调方法+返回值类型【json】
$.post("XXX/XXXXXX", {name: "John",age: "20"},function(data){
	alert("返回的数据是："+data);
},"json"));

3.3. $.ajax() 请求

$.ajax() 方法用于执行 Ajax 的请求。所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求

$.ajax({
	url : 'XXXXXX/XXXXXXXX',// 请求链接
	type:"POST",   			// 请求方式POST或GET
   	async:true, 			// 请求是否异步：默认为异步
   	data : { 				// 参数
       	id : $("#id").val(),
       	name: $("#name").val()
   	},
   	dataType : 'json', 		// 返回值的数据类型
   	success : function(map) {
      	alert("执行成功后的回调函数");
   	}
});