AJAX是什么
- 英文全称 Asynchronous JavaScript & XML
- 是一种web开发的技术，而不是新的编程语言
- 异步发送&请求数据
- 不需要重新刷新当前页面
- 虽然名字里有XML，但现在传送数据大多用JSON格式
AJAX工作流程
这是我在网上找到的一张图，能比较简洁明了地说明AJAX的工作流程，首先是客户端用JS调用AJAX的对应方法，然后会通过XMLHttpRequest对象进行对服务器的对接，如果与服务器对接成功，服务器会以XML或JSON的数据格式返回给AJAX对应方法，然后你的客户端就会得到HTML Response也就是俗称的返回数据，这个返回数据会加载到你的DOM里，具体可能表现在浏览器上某个元素值的改变。
XMLHttpRequest对象
XMLHttpRequest 是 AJAX 的基础。
这是什么？
- 是对象类型的API
- 在浏览器环境下使用
- 用于客户端和服务端数据的传递和接收
- 用于请求XML、JSON、纯文本等类型的数据
实例化XMLHttpRequest对象
XmlHttpRequest对象必须先进行实例化才能开始使用
举个栗子：
var xmr = new XMLHttpRequest();
创建并发送AJAX请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法。
举个栗子：
这里我用wamp环境搭建一个简单的接口，然后对这个接口发送AJAX请求。
注意：你的html页面必须放入服务器的www目录下，如果不在同一个域名下发送请求，将会产生跨域问题，导致AJAX请求无法发送。
var xhr = new XMLHttpRequest();
xhr.open("get","http://localhost/tp5yes/public/index.php/api/banner/1",true);
xhr.send();
xhr.onload = function(){
console.log(this.responseText);
}
运行结果：
成功得到了服务器的返回结果。
接下来对上面代码片用到的XMLHttpRequest方法进行逐一讲解。
open()方法
发送AJAX请求的第一步就是使用open方法来设置请求的各种参数。
open() 方法共有三个要传入的参数：请求类型（GET或POST）、请求地址、是否异步。
其中第三个参数如果为true就是异步，false就是同步，如果用同步的请求方式，浏览器必须等到请求得到响应才会执行下一步的操作，这个参数可以不传值，默认参数为true。
send()方法
规定了请求的参数之后要用 send() 方法发送这个请求。
当请求方法是POST的时候，send()方法可以传一个字符串类型的参数用于传输数据。
对返回数据的处理：onload和onreadystatechange
在执行了open和send之后，你的AJAX请求就已经发送成功了，但是我们不仅需要发送请求，还需要获得请求的响应以及对返回的数据进行处理，onload和onreadystatechange就是两种处理方法。
onload
当发出请求并得到了响应的时候，就会触发XMLHttpRequest的onload事件，onload定义的处理方法就会被执行
举个栗子：
xhr.onload = function(){
console.log(this.responseText);
}
当收到了响应时，就会执行onload定义的方法体，在控制台打印出字符串形式的响应数据。
用这种方式处理相应数据的好处就是简单易用，但如果需要对响应数据进行更复杂的操作时，就要用onreadystatechange事件处理数据了。
onreadystatechange
这种方式可以在发送AJAX请求到获得完整的响应中的各个阶段进行不同的操作。
这里要讲讲XMLHttpRequest的readyState属性和status属性。
- readystatus：AJAX请求的当前状态，具体含义如上图所示。
- status：HTTP状态码，不止上图举例的200和404
当readyState属性发生变化，就会触发onreadystatechange事件，我们可以定义该事件所执行的函数，以对返回的数据进行一些较为复杂的处理。
举个栗子：
xhr.onreadystatechange = function(){
DOSOMETHING……
｝
值得一提的是，当readyState的值为4时，就会触发上文提到的 onload事件。
获取不同形式的响应数据：responseText和responseXML
可以获取 纯文本 的形式或是 XML形式 的响应数据。
举个栗子：
xhr.onload = function(){
console.log(this.responseText);
}
这里用的还是上文的接口，响应的数据是纯文本形式的，因此能正常获取到数据。如果我们对试图获取XML形式的响应数据呢？
xhr.onload = function(){
console.log(this.responseXML);
}
是获取不到的，因为这个接口给出来的就是纯文本的响应数据。
