web前端javaScript 之 【Ajax】

Ajax是干什么的，为什么要学这个技术：

我们在上网浏览网站的时候，经常会看到下拉加载的的功能。例如百度图片、淘宝列表等等……，这种我们每次下滑，就自动加载更多的信息。这种信息不用每次刷新页面，而就会自动加载出来；那么我们前端，像这种不必刷新页面也能获取新的数据的技术，我们就需要使用ajax来实现。而ajax也是目前Web开发人员必须要掌握一种技术。简单来讲，ajax就是提交并且接收了服务器的数据，从而可以获取新的数据，来渲染页面的更新

Ajax技术核心是XMLHttpRequest对象（简称XHR），帮助记忆，可以想象是“小黄人”的拼音简称。这是由微软首先引入的一个特性，其他浏览器提供商也都是后来慢慢相同的实现这个技术。也是在2005年低，2006年初，Ajax技术才慢慢的红遍了技术圈。IE5是第一款引入的XHR对象的浏览器，目前我们只讲解适合于IE7之后的版本，之前的不做讲解。

---用法：---

一、创建一个ajax对象

首先我们需要构造出一个新的XMLHttpRequest

var xhr = new XMLHttpRequest() 

二、配置这个对象open(发送方式, 地址, 是否异步);

构造完之后，我们需要创建一个请求发送我们的数据，因为向服务器发送了请求，我们才能得到想要的数据。创建我们需要一个固定的方法open()。

open()它有三个参数，第一个是请求的方式（五种方式 ：get/post/put/delete/head），第二个是请求的地址URL,第三个是个布尔值（true/false）代表是否异步。

比如我们向一个后端接口/villin.php发一个get请求，大部分的请求都是异步加载，我们我们就可以这样写。

var xhr = new XMLHttpRequest(); xhr.open('get', './villin.php', true);

三、发送请求

这就创造出了一个简单的请求数据，那么接下来我们要把这个数据发送给数据库，方法send(null)；

var xhr = new XMLHttpRequest(); xhr.open('get', './villin.php', true); xhr.send(null)

send()方法按照中文意思理解，就是发送，它接收一个参数，作为请求主体发送的数据。如果不需要通过请求主体发送数据，就传入一个null，也可以不传，但是对于某些浏览器来说，是必须要传的，所以我们规范一点，写上null。

四、监听响应

这时，后端服务器接收到了我们发送的数据，就会返回我们想要的数据。

XHR的技术价值就是可以实时监听数据的变化，实时返回新的数据，那么怎么监听？他自身携带了一个属性，叫onreadystatechange，从字面意思理解，就是实时监听改变。所以我们监听之后要做的事件，都需要写在onreadystatechange函数当中。

onreadystatechange会监听一个叫readyState的值，这个值很重要，它会反映出当前响应过程的活动阶段，用0～4来表示：

0表示XHR刚创建出来，还没有初始化，没调用open()。
1表示已经调用open()方法，但还没有调用send()。
2表示已经调用send()方法，但还没有接收到数据。
3表示服务器已经接收到了部分响应数据。
4表示服务器已经接收到了全部响应数据，可以在客户端使用了。

所以当readyState返回4的时候，说明数据返回成功，我们就可以拿到相应的数据了。

 var xhr = new XMLHttpRequest(); xhr.open('get', './villin.php', true); xhr.onreadystatechange = function () { if (this.readyState !== 4) { return; }else{ //成功返回数据，在这里获取数据 } } xhr.send(null) // 要成功发送请求头信息，onreadystatechange一定要在open()之后，send()之前监听。 

此时说明服务器已经接收到了全部响应（但响应未必是返回成功的数据）。那么服务器会把响应数据返回给浏览器，浏览器也就返回相应的状态码status，表示数据异常或成功。常见的状态码如下：

2开头，代表响应成功，如200。
3开头，代表重定向，如302页面暂时重定向，304表示请求的资源并没有被修改，可以使用浏览器中缓存的版本。
4开头，请求有错误，如400。
5开头，服务器报错，如500。

所以我们要使用返回来的数据，先判断是否返回正常，一般是>=200并且<300。返回成功后，数据会被放置在一个叫responseText当中，我们直接打印出responseText就可以提取出内部的文本。

 var xhr = new XMLHttpRequest(); xhr.open('get', './villin.php', true); xhr.onreadystatechange = function () { if (this.readyState !== 4) { return; }else{ //成功返回数据，在这里获取数据 if(this.status >= 200 && this.status < 300) { console.log('请求成功') console.log(this.responseText) // 此刻拿到后端的数据，打印出responseText }else{ console.log('请求出错') } } } xhr.send(null) // 要成功发送请求头信息，onreadystatechange一定要在open()之后，send()之前监听。 

---超时设定：timeout---

最初，IE8为XHR提供了超时属性timeout，表示请求在等待多少毫秒之后就终止。再给timeout设置超时设定后，在规定时间没有接收到请求，那么就会触发timeout，进而调用ontimeout程序，如下：

 var xhr = new XMLHttpRequest(); xhr.open('get', './villin.php', true); xhr.onreadystatechange = function () { if (this.readyState !== 4) { return; }else{ try{ //成功返回数据，在这里获取数据 if(this.status >= 200 && this.status < 300) { console.log('请求成功') console.log(this.responseText) // 此刻拿到后端的数据，打印出responseText }else{ console.log('请求出错') } }catch(val){ // 可以写timeout处理程序 } } } xhr.timeout = 2000; // 设置超时时间为2000mm，超出会调用ontimeout事件 xhr.ontimeout = function(){ alert('请求超时2000mm') } xhr.send(null) // 要成功发送请求头信息，onreadystatechange一定要在open()之后，send()之前监听。 

️注意：如果在超时之后再访问status就会出现错误，所以我们可以将判断封装到try...catch语句，这样就可以完美的解决超时问题
️虽然timeout是由IE提供的，不过目前其他浏览器的兼容性，还需要大家去尝试。

---load事件---

Firefox在实现Ajax的简化模型时，引入了load事件。它可以代替onreadystatechange事件，响应完毕后将触发onload事件，所以我们就可以省去了检查readyState属性了，不比判断readyState是否等于4的问题了。

 var xhr = new XMLHttpRequest(); xhr.open('get', './villin.php', true); xhr.onload = function () { if(this.status >= 200 && this.status < 300) { console.log('请求成功') console.log(this.responseText) // 此刻拿到后端的数据，打印出responseText }else{ console.log('请求出错') } } xhr.send(null) 

目前Firefox、Oprea、Chrome、Safari都支持load事件。

---浏览器跨域---

通过XHR实现ajax通信的主要一个主要限制，就是来自跨域的安全策略（同源策略）。默认情况下，XHR对象只能访问与包含它的页面位于同一个域中的资源，这种安全策略是为了预防某些恶意行为。

怎么解决跨域问题，其实IE与其他浏览器还各有千秋，比如IE与其他浏览器的CORS的实现，在open()方法中传入对决URL地址，如www开头的地址，我们就可以拿到绝对地址上的信息。还有一起其他跨域技术：

JSONP

Jsonp虽然和json长得很像，不过这两个还是没什么关系的，json是以键和值的方式存在的一种格式，Jsonp是由回调函数和数据组成的一种技术。

Jsonp是通过动态<script>元素来使用的，使用的时候可以为src指定一个跨域的URL。<script>元素有能力不受限制的从其他域中加载资源，所以可以实现跨域请求。

<script src='www.avillin.com/?callback=handleaaa'></script> // URL就是此地址，后边callback返回的就是函数，名称为handleaaa <script> function handleaaa(response){ console.log(response) } </script>

扩展：目前前端使用的vue框架中，也有自己的跨域方式，可以通过proxy来实现跨域。

更多关于ajax的知识，也欢迎一起探讨。

本文作者：avillin

邮箱：avillin@163.com
v-chat:villinWechat