ajax封装

1. 一、什么是Ajax

（Asynchronous JavaScript And XML）是2005年新出现的技术，它的出现是为了解决这样一个场景：整个页面中，只有一小部分的数据需要进行更新，按照传统的前后端交互，我们需要向服务器请求该网页的所有数据，然后再在客户端重新渲染，这无疑是非常低效的操作。因此，Ajax就可以做到只向服务器请求我们想要的那一小部分数据，而不用请求全部数据，进而在刷新整个页面的前提下更新那部分的数据。

举个例子，我们去饭店吃饭，然后点了一桌子菜，后来发现其中有一道菜太咸了，因此我们只需要让服务员端回去给厨师重新做这一道菜再拿回来就行了。

在这个例子中的人、物对比Ajax的关系如下表：

吃饭事件	数据更新
我们	客户端
菜品	页面所有的数据
服务员	ajax对象
厨师	服务器

二、Ajax的优缺点

（1）优点
浏览器默认支持（一般浏览器都是支持JavaScript的）
提高用户体验（不需要刷新整个页面，而只需要局部刷新）
提高页面的性能（只需要请求部分数据，所以数据量就明显下降了）
（2）缺点
破坏了浏览器的前进和后退功能（Ajax不会改变网页URL，因此不会在浏览器记录前后页面）
对搜索引擎的支持较弱（搜索引擎无法监测到JS引起的数据变化）

三、Ajax的使用

Ajax的基本流程：创建XHR对象 => 发送数据 => 接收数据

（1）状态码

既然Ajax涉及到前后端的数据交互，那么我们就先来简单的看一下几种类型的状态码，如下表：

状态码	含义
100 ~ 199	连接继续
200 ~ 299	各种成功的请求
300 ~ 399	重定向
400 ~ 499	客户端错误
500 ~ 599	服务端错误

（2）xhr的基本使用

在使用xhr之前，我们要创建一个xhr的实例对象

let xhr = new XMLHttpRequest()

然后再调用xhr对象上的 open() 方法，表示创建一个请求。

open() 方法接收三个参数：

• 第一个参数： 请求的类型（例如get 、post）
• 第二个参数： 请求的URL
• 第三个参数： 是否异步发送请求（默认为true）

1. // 创建了一个Ajax请求

2. xhr.open('get', 'example.php', 'true')

光调用了 open() 方法还不够，它只是创建了一个请求，但还没有发送请求，因此我们还要调用xhr对象上的另一个方法，即 send() 方法，表示将请求发送给目标URL

send() 方法接收一个参数：

• 第一个参数： 作为请求主体发送的数据（例如post请求携带的数据）

1. 我们上面创建的是get请求，因此send()方法无需传参

2. xhr.send()

3. 属性名	含义
   responseText	服务端返回的文本信息
   responseXML	服务端返回的XML DOM文档
   status	HTTP状态码
   statusText	HTTP状态码说明
   readyState	xhr对象的请求响应阶段

既然我们要获取服务端返回的数据，我们就要知道服务端是何时返回数据的，这就可以通过上面表格中的 readyState 属性来判断了

readyState 属性一共有5个值，分别表示不同的请求响应阶段：

0： 还未创建请求，即未调用 open() 方法
1： 已调用 open() 方法，但未发送 send() 方法
2： 已调用 send() 方法，但未接收到响应
3： 已接收到部分响应
4： 已接收到全部的响应
同时，xhr对象可以绑定一个 readystatechange 事件，每当 readyState 属性发生改变，都会触发该事件，因此，该事件在一次请求中会被多次触发
 

xhr.onreadystatechange = function() {
	console.log('readyState属性发生改变了')
}

所以，我们可以在 readystatechange 事件中判断一下 readyState 属性是否为 4，即是否已经接收所有的响应，然后还可以再继续判断一下 status 属性，看看状态码是否为 200，当上述都成立了，我们再去 responseText 属性 或 responseXML 属性中获取响应数据

xhr.onreadystatechange = function() {
	// 判断是否已接收所有响应
	if(xhr.readyState === 4) {
		// 判断状态码是否为200
		if(xhr.status === 200) {
			console.log(xhr.responseText)
		}
	}
}

（3）发送get请求
上面也讲解了Ajax请求的简单应用，同时也是拿 get 请求来举得例子，因此这里我就不多做说明，唯一要讲的就是，get请求所携带的数据是明文的，大小只有4k左右，而且它是写在URL的 ? 后面的，例如这样 example.php?query=4&em=0，所以若是我们要在发送get请求时携带数据，只需要在调用 open() 方法时，将数据写在第二个参数的URL的 ? 后面即可

直接来写一次完整的 get 请求，代码如下：
 

let xhr = new XMLHttpRequest()
xhr.open('get', 'example.php?query=4&em=0')
xhr.send()
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4) {
        if(xhr.status === 200){
            console.log(xhr.responseText);
        }
    }

}

4）发送post请求

发送post请求的过程几乎和get请求一样，唯一不一样的是数据的传递。大家都知道post请求的数据是放在请求体中的，因此我们需要调用xhr对象上的 setRequestHeader() 方法来模仿表单提交时的内容类型

该方法传入的参数比较固定，代码如下

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

然后我们上面也说过，send() 方法接收的一个参数是请求主体发送的数据，所以我们的post请求要发送的数据就要作为该方法的参数，代码如下：

xhr.send('query=4&em=0')

那我们来看一次完整的post请求是怎么样的吧，代码如下：

let xhr = new XMLHttpRequest()
xhr.open('post', 'example.php')
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('query=4&em=0')
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4) {
        if(xhr.status === 200){
            console.log(xhr.responseText);
        }
    }
}

在封装ajax的时候会使用到参数传递，因此必须写个方法作为对象属性转换为ajax请求数据的方法

        下面是ajax封装，并举例：

function ajax(options){
    var xhr = null;
    var params = formsParams(options.data);
    //创建对象
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest()
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 连接
    if(options.type == "GET"){
        xhr.open(options.type,options.url + "?"+ params,options.async);
        xhr.send(null)
    } else if(options.type == "POST"){
        xhr.open(options.type,options.url,options.async);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(params);
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            options.success(xhr.responseText);
        }
    }
    function formsParams(data){
        var arr = [];
        for(var prop in data){
            arr.push(prop + "=" + data[prop]);
        }
        return arr.join("&");
    }
 
}
 
ajax({
    url : "a.php",  // url---->地址
    type : "POST",   // type ---> 请求方式
    async : true,   // async----> 同步：false，异步：true 
    data : {        //传入信息
        name : "张三",
        age : 18
    },
    success : function(data){   //返回接受信息
        console.log(data);
    }
})

五、Ajax的约束

默认情况下，Ajax一般只能向同源的域发送请求，这是受到了浏览器的同源策略的限制，关于同源策略，你们可以去看一下我以前写过的一篇博客，里面写了同源策略的定义以及解决方案——前端人员都懂的浏览器的同源策略，以及如何进行不同源间的相互访问

了解过同源策略以后，我们来看看如何让Ajax不受同源策略的限制而成功发送请求。CORS（跨域资源共享）要求我们在发送请求时自定义一个HTTP头部与服务器进行沟通，我们只需要设置一个名为 Origin 的头部，值为当前页面的源信息（协议、域名、端口），例如 Origin : http://example.com ；然后服务器需要设置一个名为 Access-Control-Allow-Origin 的响应头部，其值为允许跨域访问的源信息，若服务器设置的 Access-Control-Allow-Origin 与我们设置的 Origin 相同，则表示服务器允许我们跨域请求其资源，或者服务器可以将 Access-Control-Allow-Origin 值设为 *，此时表示允许任何域向其发送请求并且不受同源策略的限制。

现在的大部分浏览器几乎都支持了在发送Ajax请求后，自动向请求头部添加当前的源信息