跟着艾文一起学前端-第21篇-JavaScript之AJAX

介绍AJAX

AJAX [ˈeɪˌdʒæks] （Asynchronous JavaScript and XML）
ajax就是浏览器提供的一套API，可以通过JavaScript调用，从而实现通过代码控制请求与相应，实现网络编程。

ajax使用的步骤

1. 创建请求代理对象：

    var xhr = new XMLHttpRequest();// 此时xhr.readyState = 0
   

2. 注明请求方式与地址，与服务器端口建立连接：

   xhr.open("请求方式","请求地址");//此时建立与服务器端口的连接，xhr.readyState = 1
   

3. 发送请求： xhr.send();

4. 获取返回结果：

xhr.onreadystatechange = function() {//该事件时xhr状态改变就会触发
	switch(this.readyState){
		case 2:
			//此时接收到了响应报文的响应头，但是没有接收到响应体
			console.log(this.getAllResponseHeaders());//返回值是整个响应头的字符串
			console.log(this.getResponseHeader("指定的头的key比如server"));//获取头文件中指定属性的值
			break;
		case 3://正在下载响应报文的响应体，此时响应体不一定被完全下载

			break;
		case 4://响应体已被完全下载
			//此时可以使用 responseText
			break;
	}
};

在该部分会有三个状态值分别对应的xhr的readyState值为 2，3，4

• 1）xhr.readyState == 2 时 - - 此时接收到响应报文的响应头，还没有接收到响应体(responseText)；
• 2）xhr.readyState == 3 - - 正在下载响应报文的响应体，此时响应体不一定被完全下载
• 3）xhr.readyState == 4 - - 响应体已被完全下载

readyState 对应的值与描述如下表所示：

值	状态描述	说明
0	UNSENT	初始化代理，即创建XMLHttpRequest实例对象
1	OPEND	xhr对象调用open()方法，建立连接
2	HEADERS_RECEIVED	调用send()方法，且已经能够获取到状态行和响应头了
3	LOADING	响应体下载中，responseText此时已经包含了部分数据，只是还没下载完
4	DONE	响应体下载完成，responseText此时包含了全部数据

其他相关信息的设置：
设置请求头：
xhr.setRequestHeader(’’,’’);

设置请求体：
xhr.send(‘key1=value1&key2=value2’);//以 urlencoded 格式设置请求体
一旦设置请求体是urlencoded格式的话，一定要设置请求头中的 Content-Type值为application/x-www-form-urlencoded：
xhr.setRequestHeader(‘Content-Type’,‘application/x-www-form-urlencoded’);
也就是说请求头的Content-Type值要根据请求体格式的变化而对应的变化。
再比如请求体发送的是json字符串数据的话，对应的Content-Type 对应的就是json

使用ajax发送GET请求并传递参数

var xhr = new XMLHttpRequest();
xhr.open("GET","mytest.php?userid=1001");
xhr.send(null);
xhr.onreadystatechange = function(){
	if(this.readyState == 4) {
		console.log(this.responseText);
		this.response; //获取到的响应体结果由this.responseType的值决定
		this.responseText ;//获取到的响应体是字符串
	}
}

使用ajax发送POST请求并传递参数

var xhr = new XMLHttpRequest();
xhr.ope("POST","login.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username=${username}&password=${password}");
xhr.onreadystatechange = function() {
	if(this.readyState == 4){
		console.log(this.reaponseText);
	}
}

设置返回数据类型

xhr.responseType = "json";//一般情况，该行可以不用写
xhr.onreadystatechange = function(){
}

jQuery中对ajax的封装

1）jQuery.ajax(); 或者是$.ajax();

1. 一个参数,以对象方式

$.ajax({
	url: "接口地址路径",
	type:"post",
	data: { key1: value1,...}，
	feforeSend: function(xhr){},//请求发送之前，及xhr在调用open方法之前
	success: function(res) {//请求成功，只有返回状态码为200 的时候才会触发
		//res就是返回的响应体内容,且返回的数据跟服务端设置的Content-Type 值有关，比如服务端设置为application/json, 此时res就是一个json对象而不是json字符串。
	}，
	error: function(xhr) {// 请求失败，状态码非200 时
		//xhr对象
	},
	complete: function(xhr){
		//请求完成，不管成功还是失败都会触发该方法
	}
});

2. 两个参数

$.ajax("url路径",{
	type: "post",// 请求方式
	data: { key1: value1,...}
	success: function(res) {
		// res 就是返回的响应体的字符串内容
	}
});

2）jQuery中更快的捷方式：$.get(); 和 $.post();

底层是$.ajax()封装的

$.get("url...",{key1:value1}, function(res){
	//res就是返回的响应体内容,且返回的数据跟服务端设置的Content-Type 值有关，比如服务端设置为application/json, 此时res就是一个json对象而不是json字符串。
});
$.post("url...",{key1:value1}, function(res){
	
});

3）$.getJSON(); 和 $.postJSON();

和上面的区别在于，不管服务端的Content-Type值，最终会将响应体内容解析为json对象，使用方式同上。

跨域

概念

同源策略是浏览器的一种安全策略，域名、协议、端口完全相同才是同源的，不同源地址间的请求就叫做跨域。
默认情况下只有同源的地址才可以相互通过ajax的方式请求。如果想要实现不同源之间可以进行相互请求，必须服务端和客户端配合才能完成。

如何实现跨域

方案：

可以通过script标签的src属性请求一个服务器端的文件，该文件返回结果是js代码，该代码可以调用当前页面定义好的js函数，从而实现将服务器返回的数据发送到了客户端。

1) JSONP （JSON with padding）

JSONP是一种借助于script标签发送跨域请求的技巧。 其原理就是上述方案，它是在客户端使用script标签请求服务器，服务器端返回一段带有函数调用的JavaScript全局函数调用的JavaScript代码，将原本需要返回给客户端的数据传递进去。也就是说客户端采用script标签发送请求，服务器一定要返回一段JavaScript代码。

实现方式：

var script = document.createElement("script");
script.src = "不同源的url";
document.body.appendChild(script);
function myFunction(data) {//该函数会被返回的JavaScript代码调用

}

服务端返回的应该是
"myFunction(json数据)"

jQuery中封装的JSONP

$.ajax({
	url: urlstr,
	dataType: "jsonp",
	success: function(res){
	},......
});

2）客户端不用改动，只需要将服务器端添加响应头，一行代码即可：

//设置允许跨域访问
header("Access-Control-Allow-Origin: *");