ajax

1. 知识点

（1）XMLHttpRequest

Ajax 技术核心是 XMLHttpRequest 对象(简称 XHR)。

创建XMLHttpRequest 对象：var xhr = new XMLHttpRequest();

（2） open()

在使用 XHR 对象时，先必须调用 open()方法，它接受三个参数：要发送的
请求类型(get、post)、请求的 URL 和表示是否异步。open()方法并不会真正
发送请求，而只是启动一个请求以备发送。

（3）send()

通过 send()方法进行发送请求，send()方法接受一个参数，作为请求主体
发送的数据。如果不需要必须填 null。执行 send()方法之后，请求就会发
送到服务器上。

（4）响应

当请求发送到服务器端，收到响应后，响应的数据会自动填充 XHR 对象的属
性。那么一共有四个属性：

属性名 说明
responseText 作为响应主体被返回的文本
responseXML 如果响应主体内容类型是"text/xml"或"application/xml"，
​ 则返回包含响应数据的 XML DOM 文档
status 响应的 HTTP 状态
statusText HTTP 状态的说明

（5）status

接受响应之后，第一步检查 status 属性，以确定响应已经成功返回。一般
情况 HTTP 状态代码为 200 作为成功的标志。

（6）readyState

使用异步调用的时候，检测 readyState 属性,每当 readyState 属性改变时，触发
readystatechange 事件。这个属性有五个值：

值 状态 说明
0 未初始化 尚未调用 open()方法
1 启动 已经调用 open()方法，但尚未调用 send()方法
2 发送 已经调用 send()方法，但尚未接受响应
3 接受 已经接受到部分响应数据
4 完成 已经接受到全部响应数据，而且可以使用

（7）GET

GET 请求是最常见的请求类型，最常用于向服务器查询某些信息。

（8）POST

POST 请求可以包含非常多的数据，我们在使用表单提交的时候，很多就是
使用的 POST 传输方式。

（9）同步

提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事。

一心一意,当前只能做一件事，其他事情必须等当前的事情完成，才能继续后面的事情。

（10）异步

请求通过事件触发->服务器处理（这时浏览器仍然可以做其他事情）->处理完毕 。

三心二意：同时可以做多件事情。

2.Ajax的实现

1、创建XMLHttpRequest核心对象

var xhr = new XMLHttpRequest();

2、准备请求/打开请求
​ xhr.open(); open有参数参数:
​ （1）请求类型 （GET/POST）
​ （2）请求的路径 （请求的地址；如果是GET请求后面通过"?"拼接参数）
​ （3）是否异步 （true或false；默认是异步true）
3、发送请求
​ xhr.send(); send有一个参数：
​ 要传递给后台的数据
​ 如果是GET请求，设置为null（GET请求参数在请求地址后面）
​ 如果是POST请求，无参数时设置为null；有参数时设置参数

​ 例如uname=zhangsan&upwd=123

（post的情况）：模拟表单提交

POST请求和Web表单提交是不同的，需要使用XHR来模仿表单提交。

xhr.setRequestHeader(‘Content-Type’,‘application/x-www-form-urle
ncoded’)

​
4、判断响应结果，解析响应数据
​ （1）如果是同步请求
​ xhr.status 响应状态
​ xhr.responseText 响应结果

HTTP 状态码 状态字符串 说明

200 OK 服务器成功返回了页面

400 Bad Request 语法错误导致服务器不识别

401 Unauthorized 请求需要用户认证

404 Not found 指定的 URL 在服务器上找不到

500 Internal Server Error 服务器遇到意外错误，无法完成请求

503 ServiceUnavailable 服务器过载或维护导致无法完成请求

​ （2）如果是异步请求，需要知道请求是否处理完毕，处理完毕后再解析数据

​ 监听处理请求的状态码readyState

​ 需要绑定监听事件 onreadystatechange
​ 判断响应状态码为4时，表示数据已经完全响应
​ xhr.status 响应状态
​ xhr.responseText 响应结果

3. 封装 Ajax

function ajax(obj){
		//1.创建XMLHttpRequest核心对象
		var xhr=new XMLHttpRequest();
		var param=obj.data;
		//将json对象格式的参数转换为指定格式的字符串
		var paramArray=[];
		//遍历参数对象
		for(var key in param){
			//拼接参数名和参数值
			var pa=key+"="+param[key];
			//将数据追加到数组中
			parayArray.push(pa);
		}
		//将数组通过指定符号转换成字符串
		var p=paramArray.join("&");
		//得到用户请求类型
		var method=obj.method;
		//判断请求类型，如果是GET请求，在请求地址后面拼接请求参数
		if(method.toUpperCase()=="GET"){
			//判断地址中是否包含“？”
			//如果有，则拼接时使用“&”；如果没有，则使用“？”
			obj.url+=(obj.url).indexOf("?")>-1 ? "&"+p : "?"+p;
		}
		//打开请求
		xhr.open(method,obj.url,obj.async);
		//如果是POST请求，需要模拟表单提交
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		//POST发送请求
		xhr.send(p);
		}else{
			//GET发送请求
			xhr.send(null);
		}
		//判断是否是异步请求
		if(obj.async){
			//监听readySate的值，判断响应是否成功
			xhr.onreadystatechange=function(){
				if(xhr.readyState==4){
					//回调
					callback();
				}
			}
		}else{//同步请求
			callback();
		}
		//回调函数
		function callback(){
			//判断响应是否成功
			if(xhr.status==200){
				//得到响应数据，并回调数据给调用者
				var result=xhr.responseText;
				obj.success(result);
			}
		}
}
ajax({
		method:"POST",
		url:"js/data.json",
		astnc:false,
		data:{
			uname:"zhangsan",
			upwd:"123456"
		},
		success:function(){
			//解析结果
			alert(result);
		}
	});

4.Jquery 的 的 Ajax

1.$.ajax()

jquery 调用 ajax 方法
参数： type：请求方式 GET/POST
​ url：请求地址 url
​ async：是否异步，默认是 true 表示异步
​ data：发送到服务器的数据
​ dataType：预期服务器返回的数据类型
​ success：请求成功时调用此函数

$.ajax({
	type:"get",
	url:"js/data.json",
	data:{		
	},
	dataType:"json",
	success:function(result){
		console.log(result);
	}
});

2.$.get()

请求 json 文件,传递参数,拿到返回值

$.get("js/data.json",{},function(data){

	console.log(data);

});

3.$.post()

请求 json 文件,传递参数,拿到返回值

$.post("js/data.json",{},function(data){
	console.log(data);
});

4.$.getJSON

表示请求返回的数据类型是 JSON 格式的 ajax 请求

$.getJSON("js/data.txt",{},function(data){
	console.log(data);
});