XHR的用法详细解读

ajax是asynchronous javascript and XML的简写，中文翻译是异步的javascript和XML，这一技术能够向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验。虽然名字中包含XML，但ajax通信与数据格式无关。

ajax包括几个步骤：

1：创建ajax请求，
2：发出http请求
3：收到服务器传回的消息
4：更新网页数据、

概括起来，就是一句话，ajax通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后，再进行处理。

创建

ajax技术的核心是XMLHttpRequest对象(简称XHR)，这是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。XHR为向服务器发送请求和解析服务器响应提供了流畅的接口，能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据

IE5是第一款引入XHR对象的浏览器。在IE5中，XHR对象是通过MSXML库中的一个ActiveX对象实现的，而IE7+及其他标准浏览器都支持原生的XHR对象

创建一个XHR对象，也叫实例化一个XHR对象，因为XMLHTTPRequest()是一个构造函数。下面是创建XHR对象的兼容写法
　　

var xhr;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

[注意]如果要建立N个不同的请求，就要使用N个不同的XHR对象。当然可以重用已存在的XHR对象，但这会终止之前通过该对象挂起的任何请求。

发动请求

open();

在使用xrh的时候第一个调用的是open方法，如下，该方法接受3个参数，

xrh.open('GET','example.php',false);

open()方法的第一个参数用于指定发送请求的方式，这个字符串，不区分大小写，但通常使用大写字母。”GET”和”POST”是得到广泛支持的.

‘GET’用于常规请求，它适用于URL完全指定的资源。当请求对服务器没有任何副作用是可缓存的情况下，

‘POST’方法常用与HTML表单，他在请求主题中额外包含数据且这些数据常存在服务器上的数据库中。相同的URL的重复POST请求从服务器的得到的相应可能不同

除了”GET”和”POST”之外，参数还可以是”HEAD”、”OPTIONS”、”PUT”。而由于安全风险的原因，”CONNECT”、”TRACE”、”TRACK”被禁止使用.

2. open()的第二个参数是URL，该URL对于执行代码的当前页面，且只能想同一域中使用相同协议和端口的URL发送请求。

3.open()的第三个参数是表示是否异步发送请求的值，如果不填写。默认身高true,表示异步发送，

4.如果请求一个手密码保护的URL用于认证的用户和密码作为第4和第5个参数传递给open()方法。

send()

send()方法接受一个参数，即作为请求主题发送的数据。调用send()方法后，请求被分配到服务器。

如果是GET方法，send()方法无参数，或参数为null；如果是POST方法，send()方法的参数是要发送的的数据。
3.open()的第三个参数是表示是否异步发送请求的值，如果不填写。默认true,表示异步发送，

4.如果请求一个手密码保护的URL用于认证的用户和密码作为第4和第5个参数传递给open()方法。

send()

send()方法接受一个参数，即作为请求主题发送的数据。调用send()方法后，请求被分配到服务器。

如果是GET方法，send()方法无参数，或参数为null；如果是POST方法，send()方法的参数是要发送的的数据。

xhr.open(“GET”,“xxx.php”,true)
xhr.send(null);

谷歌的chrome浏览器可以查看

F12 或者Fn+F12打开控制台

点菜单的网络Network

All XHR Js CSS Img 等等，点XHR

多版本浏览器兼容需要加上

	function createXmlHttp() {
		var xmlHttp;
		try {
			xmlHttp = new XMLHttpRequest();
		} catch (e) {
			try {
				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {
				}
			}

		}
		return xmlHttp;
	}