原生Ajax

创建XMLHttpRequest对象

FireFox内核浏览器存在XMLHttpRequest对象，可以直接new，但IE内核浏览器需要通过ActiveXObject来创建，具体代码如下：

var xmlHttp;
function createXMLHttp(){
	if(window.XMLHttpRequest){								//判断浏览器window是否存在XMLHttpRequest对象
		xmlHttp = new XMLHttpRequest();						//FireFox内核浏览器
	}else {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");	//IE内核浏览器
	}
}

XMLHttpRequest对象的属性

No.	属性	描述
1	onreadystatechange	指定当readState状态改变时使用的操作，一般用于指定具体的回调函数
2	readyState	返回当前请求的状态，只读
3	responseBody	将回应信息正文以unsigned byte数组形式返回，只读
4	responseStream	以Ado Stream对象的形式返回响应信息，只读
5	responseText	接收以普通文本返回的数据，只读
6	responseXML	接收以XML文档形式返回的数据，只读
7	status	返回当前请求的http状态码，只读
8	statusText	返回当前请求的响应行状态，只读

readyState有5种取值

取值	说明
0	请求未发出，调用open()之前
1	请求已建立，未发出，调用send()之前
2	请求已发出，处理中，通常可以从响应种得到内容头部
3	请求已处理，接收中，通常响应中有部分数据可用，但服务器未完成响应
4	响应已完成

XMLHttpRequest对象的方法

No.	方法	描述
1	abort()	取得当前发出的请求
2	getAllResponseHeaders()	取得所有的HTTP头信息
3	getResponseHeader(name)	取得一个指定的HTTP头信息
4	open(method, url)	创建一个HTTP请求
5	send(data)	将创建的请求发送到服务器，并接收响应
6	setRequestHeader(name, value)	设置一个指定请求的HTTP头信息

对于setRequestHeader方法，并不是所有的Header都可以设置，有些Header是只能由User-Agent设置的，具体参考Forbidden header name和Forbidden response header name

Text返回值示例

var xmlHttp, result;
function createXMLHttp(){
	if(xmlHttp){											//已经创建过了
		return;
	}
	if(window.XMLHttpRequest){								//判断浏览器window是否存在XMLHttpRequest对象
		xmlHttp = new XMLHttpRequest();						//FireFox内核浏览器
	}else {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");	//IE内核浏览器
	}
}
function getAjax(url, callback){
	createXMLHttp();										//创建XMLHttpRequest对象
	xmlHttp.open("get", url);								//创建Http请求
	xmlHttp.onreadystatechange = function(){				//设置请求成功后的回调函数
		if(xmlHttp.readyState == 4){
			if(xmlHttp.status == 200){
				result = callback.call(result);				//调用回调函数
			}
		} 
	}
	xmlHttp.send(null);										//发送请求，get请求不传递任何参数
}
function postAjax(url, callback, data){
	createXMLHttp();										//创建XMLHttpRequest对象
	xmlHttp.open("post", url);								//创建Http请求
	xmlHttp.onreadystatechange = function(){				//设置请求成功后的回调函数
		if(xmlHttp.readyState == 4){
			if(xmlHttp.status == 200){
				result = callback.call(result);				//调用回调函数
			}
		} 
	}
	var params = null;
	if(data){												//拼接参数
		params = "";
		for(var i = 0; i < data.length; i++){
			params += data[i].name + "=" + data[i].value;
			if(i < data.length - 1){
				params += "&";
			}
		}
	}
	xmlHttp.send(params);									//发送请求
}
function callback(){
	var text = xmlHttp.responseText;
	document.getElementsByTagName("body")[0].innerHTML = text;
}

XML返回值示例

返回的XML文件——allarea.xml

<?xml version="1.0" encoding="GBK"?>
<allarea>
	<area>
		<id>1</id>
		<title>北京</title>
	</area>
	<area>
		<id>2</id>
		<title>天津</title>
	</area>
</allarea>

这里复用上一节中的方法，只需要重写callback即可，对XML的读取，可以按照文档树读取

function callback(){
	//读取XML最外层对象的所有子对象
	var allarea = xmlHttp.responseXML.getElementsByTagName("allarea")[0].childNodes;
	//循环读取城市
	for(var i = 0; i < allarea.length; i++){
		var id = allarea[i].getElementsByTagName("id")[0].firstChild.nodeValue;
		var title = allarea[i].getElementsByTagName("title ")[0].firstChild.nodeValue;
		console.info("area id = " + id + " and title = " + title);
	}
}