AJAX入门？有这一篇就够了！

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);
	}

是获取不到的，因为这个接口给出来的就是纯文本的响应数据。