XMLHttpRequest对象

1.创建XMLHttpRequest对象

这里首先就有一个问题就是我们怎么也都绕不开的浏览器兼容性问题,即使作为Ajax中流砥柱的XMLHttpRequest对象也是一样,神奇的IE系列给我们带来了无穷的可能,虽然自IE7开始,IE浏览器也开始支持XMLHttpRequest对象,但是IE6版本以前包括IE6都不兼容XMLHttpRequest对象,而是使用独具特色的ActiveXObject来作为XMLHttpRequest的替代品来运行,而且还存在众多版本:一开始是Microsoft.XMLHTTP 之后变成Msxml2.XMLHTTP及更新版的Msxml3.XMLHTTP,纠结啊....

所以这里考虑了浏览器版本的兼容性差异,所以封装了XHR函数专门用来创建XMLHttpRequest对象

function XHR() {
		var xhr;
		try {xhr = new XMLHttpRequest();}
		catch(e) {
			var IEXHRVers =["Msxml3.XMLHTTP","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];
			for (var i=0,len=IEXHRVers.length;i< len;i++) {
				try {xhr = new ActiveXObject(IEXHRVers[i]);}
				catch(e) {continue;}
			}
		}
		return xhr;
	}

2.使用XHR对象

<span style="white-space:pre">	</span>var xhr = XHR();
	//open方法 创建一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码)
	xhr.open("get|post","uri",true|false);
	/*第一个参数是请求方式,一般用get与post方法,与form标签的method类似
	第二个参数是请求的URL
	第三个参数是请求是同步进行还是异步进行,true表示异步
	调用了open方法仅仅是传递了参数而已*/
	xhr.send();//调用了send方法后才会发出请求
	//并且get方式发送请求时send参数是null

注:post请求传递中文出现乱码,则在后台的action中request.setCharacterEncoding("与页面编码一致的编码");

3.readyState属性

readyState属性 返回当前请求的状态

0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误
4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据

4.使用按钮来触发相应的事件对象

按钮.onclick = function(){}
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4) { // 说明响应完全返回
				xhr.responseText // 能够拿到响应
			}
		};

5.对原生xhr对象方法的封装与调用

function get(uri, param, fn) {
		var xhr = new XMLHttpRequest();
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4){
				// 处理响应
				//xhr.responseText(对应json字符串)
				fn(); // 调用函数
			}
		};
		
		// 发送请求
		xhr.open("get", uri+"?"+param, true);
		xhr.send();
	}
	
	get("/ajax/checkName", "username=zhangsan", function(){});

好了,这就是大概的描述Ajax,如有不足,还希望大家多多指正!