1、Ajax简介

1、Ajax全称为Asynchronous JavaScript and XML，即异步的 JavaScript 和 XML。
2、Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。
3、Ajax最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
4、Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

2、Ajax的特点

2.1、Ajax的优点

1、最大的优点就是页面无需刷新，在页面内与服务器通信，非常好的用户体验。
2、使用异步的方式与服务器通信，不需要中断操作。
3、可以把以前服务器负担的工作转嫁给客户端，减轻服务器和带宽，可以最大程度减少冗余请求。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

2.2、Ajax的缺点

1、AJAX干掉了Back和History功能，即对浏览器机制的破坏。 在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
2、安全问题技术同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、Sql注入攻击和基于credentials的安全漏洞等。
3、对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。
4、存在跨域问题（同源）。

3、Ajax中所包含的技术

Ajax并非是一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成：
1、使用CSS和XHTML来表示。
2、使用DOM模型来交互和动态显示。
3、使用XMLHttpRequest来和服务器进行异步通信。
4、使用javascript来绑定和调用。

4、Ajax的工作原理

Ajax的工作原理相当于在用户和服务器之间加了一个中间层(Ajax引擎)，使用户操作与服务器响应异步化。并不是所有用户请求都提交服务器。像一些数据验证和数据处理等都交给Ajax引擎自己来做，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

5、Ajax的使用

5.1、核心对象

XMLHttpRequest，Ajax的所有操作都是通过该对象进行的。

5.2、使用步骤

1、创建 XMLHttpRequest 对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

var xhr = new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject：

var xhr;
if (window.XMLHttpRequest) {
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp = new XMLHttpRequest();
} else {
    // IE6, IE5 浏览器执行代码
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2、设置请求信息

xhr.open(method, url, async);

规定请求的类型、URL 以及是否异步处理请求。

• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）

如果发送的是POST的请求，需要置请求头，如下：

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

3、发送请求

//get 请求不传 body 参数，只有 post 请求使用
xhr.send(body)	

4、接收响应

//xhr.responseXML 接收xml格式的响应数据
//xhr.responseText  接收文本格式的响应数据
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var text = xhr.responseText;
        console.log(text);
    }
}

5.3、Ajax常用方法

1、open(method, url, async);
方法说明：发送请求的页面在不刷新的情况能将参数传给一个服务器进行处理，这个方法就是将这些个参数传送过去。

2、send(body)
方法说明：这个东西就是将一些参数以键值对的方式传送给服务器, 异步的话将立即返回服务器的响应, 做到不刷新页面进行数据处理就是用来发送参数的, GET方法下可以在url的后面写上参数的值, POST方法下只能在send()方法里面写上参数的键值对。

3、setRequestHeader(name, value)
方法说明：用于为请求的Http头设置值。

4、getResponseHeader(name)
方法说明：返回设置的Http头信息。

5、abort()
方法说明：使用了这个请求之后会直接停止getResult的回调函数, 让readyState属性的返回值直接为0。

6、getAllResponseHeaders()
方法说明：以字符串的形式返回完整的响应头字符串信息。

5.4、Ajax 常用属性

1、readyState
属性说明：用于获取请求的状态（ 通过返回的代码是多少来判断当前的状态是什么情况），对应属性值如下：
0（UNSENT）：表示 XMLHttpRequest 实例已经生成，但是open()方法还没有被调用。
1（OPENED）：open() 方法已经被调用，表示send()方法还没有被调用，仍然可以使用setRequestHeader()，设定 HTTP请求的头信息。
2（HEADERS_RECEIVED）：表示 send()方法已经执行，并且头信息和状态码已经收到。
3（LOADING）：下载中，responseText 属性已经包含部分数据，表示正在接收服务器传来的 body 部分的数据。
4（DONE）：表示服务器数据已经完全接收，或者本次接收已经失败了。

2、onreadystatechange
属性说明：用于指定状态改变时所触发的事件处理器。

3、responseText
属性说明：获取服务器文本类型的响应内容，表示为字符串。

4、responseXML
属性说明：获取服务器XML类型的响应内容，表示为字符串。

5、status
属性说明：返回Http状态码，常用状态码如下：
200：表示成功；
202：表示请求被接受，但尚未成功；
400：错误的请求；
404：文件未找到；
500：内部服务器错误。

更多状态码详见如下地址：

https://www.runoob.com/http/http-status-codes.html

6、statusText
属性说明：返回Http状态码的文本信息。