解读Ajax原理、XMLHTTPRequest对象，及其Ajax使用步骤

一、Ajax

Ajax的全称是“Asynchronous JavaScript and XML”，是指一种创建交互式网页应用的网页开发技术。沟通浏览器与客户端，可以在不刷新整个浏览器的情况下与服务器进行异步通讯。

Ajax的原理

本质是通过XMLHTTPRequest对象向服务器发送异步请求后，从服务器获取到处理后的数据，再通过JavaScript来操作DOM从而更新页面。

Ajax优点：

1、页面无需刷新，用户体验非常好

2、使用异步的请求方式与服务器通信，具有更加迅速的响应能力，且不阻塞用户

3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，Ajax 的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

4、是基于标准化并被广泛支持的技术，不需要下载插件

Ajax缺点：

1、Ajax不支持浏览的back回退按钮

2、安全问题Ajax暴露了与服务器交互的细节

3、对搜索引擎的支持比较弱

4、破环了程序的异常机制，不易调试

Ajax 适用场景

1、表单驱动的交互

2、深层次的树的导航

3、快速的用户与用户间的交流响应

4、类似投票、yes/no 等无关痛痒的场景

5、对数据进行过滤和操纵相关数据的场景

6、普通的文本输入提示和自动完成的场景

Ajax 不适用场景

1、部分简单的表单

2、搜索

3、基本的导航

4、替换大量的文本

5、对呈现的操纵

Ajax 的实现流程是怎样的？

1、创建 XMLHTTPRequest 对象,也就是创建一个异步调用对象.

2、创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息.

3、设置响应 HTTP 请求状态变化的函数.

4、发送 HTTP 请求.

5、获取异步调用返回的数据.

1. 使用 JavaScript 和 DOM 实现局部刷新.

实现步骤 (只用Ajax发送请求，需要先引入jQuery库)

1、get请求

$.ajax({

type: 'get',

url: 'url路径',

data: { 字段: '值' }, //无参可省略

success: function (res) {

//res即为返回的结果

console.log(res);

}

})

2、post请求

$.ajax({

type: 'post',//可大写可小写

url: 'url路径',

data: {

字段: '值',

}, //需要传输的数据

success: function (res) {

console.log(res);//res为返回的结果

}

})

二、XMLHTTPRequest对象

Ajax的核心就是XMLHTTPRequest对象，此对象在IE5中首次引入，是一种支持异步请求的技术，可以使开发者使用JavaScript向服务器提出请求并处理响应，而不阻塞用户

此对象所具有的方法、常用详细解析、常用属性

此对象所具有的方法：

open(String method,String url,boolean asynch,String username,String password)

send(content)

setRequestHeader(String header,String value)

getAllResponseHeaders()

getResponseHeader(String header)

abort()

常用详细解析：

open()：该方法创建 HTTP 请求

第一个参数是指定提交方式(post、get)

第二个参数是指定要提交的地址是哪

第三个参数是指定是异步还是同步(true 表示异步，false 表示同步)

第四和第五参数在 HTTP 认证的时候会用到。是可选的

setRequestHeader(String header,String value)：设置消息头

（使用 post 方式才会使用 到，get 方法并不需要调用该方法）

xmlHTTP.setRequestHeader("Content-type","application/x-www-form-urlencoded"); send(content)：发送请求给服务器

如果是 get 方式，并不需要填写参数，或填写 null 如果是 post 方式，把要提交的参数写上去

常用属性：

onreadystatechange：请求状态改变的事件触发器

（readyState 变化时会调用此方法），一 般 用于指定回调函数

readyState：请求状态 readyState 一改变，回调函数被调用，它有 5 个状态

0：未初始化

1：open 方法成功调用以后

2：服务器已经应答客户端的请求

3：交互中。HTTP 头信息已经接收，响应数据尚未接收。

4：完成。数据接收完成

responseText：服务器返回的文本内容

responseXML：服务器返回的兼容 DOM 的 XML 内容

status：服务器返回的状态码

statusText：服务器返回状态码的文本信息

实现步骤 （使用XMLHTTPRequest配合Ajax时，先引入jQuery库）

1、get请求

//创建XMLHTTPRequest对象

const xhr = new XMLHttpRequest();

//创建HTTP请求

//1、不带参数的get请求

//xml.open("get","url路径");

//2、带参数的get请求

xml.open("get", "url路径?key1=value1&key2=value2");

xhr.send();

//监听事件

xhr.onreadystatechange = function () {

//判断请求状态码readyState成功为4，状态码status成功为200

if (xhr.readyState === 4 && xhr.status === 200)

//得到服务端返回的文本数据

//此处输出的是JSON字符串类型，转为普通类型，方便之后的DOM操作

console.log(JsoN.parse(xhr.responseText));

};

2、post请求

//创建XMLHTTPRequest对象

const xhr = new XMLHttpRequest();

//创建HTTP请求

xml.open("POST", "url路径");

//使用post请求方式，需要设置消息头！！！

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

xhr.send(""); //必填，需要传输的数据如xhr.send("id=1&author=小范")

//监听事件

xhr.onreadystatechange= function () {

if (xhr.readyState === 4 && xhr.status === 200)

// //得到服务端返回的文本数据

//此处输出的是JSON字符串类型，转为普通类型，方便之后进行DOM操作

console.log(JsoN.parse(xhr.responseText));

}