Ajax和XMLHttpRequest对象
Ajax
Ajax是指异步加载页面内容的技术。
XMLHttpRequest对象
Ajax技术的核心就是XMLHttpRequest对象。这个对象充当着浏览器中的脚本（客户端）与服务器之间的中间人的角色。以往的请求都由浏览器发出，而JavaScript通过这个对象可以自己发送请求，同时也自己处理响应。
有一个问题是不同的浏览器实现XMLHttpRequest对象的方式不太一样。为了保证跨浏览器，你不得不为同样的事情写不同的代码分支。
举个栗子，把以下代码保存为html文件夹中ajax.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Ajax</title>
</head>
<body>
<div id="new"></div>
<script src="../scripts/addLoadEvent.js"></script>
<script src="../scripts/getHTTPObject.js"></script>
<script src="../scripts/getNewContent.js"></script>
</body>
</html>这个HTML文件中包含的三个JS文件位于scripts文件中。为了模拟服务器的响应，在ajax.html文件旁边创建一个example.txt文件，包含如下内容：
This was loaded asynchronnously.
这个文件将充当服务器脚本的输出。多数情况下，服务器端脚本在接到请求后，还会做出一番处理再输出结果。但这里我们只是为了演示说明，就简单一点。接下来我们来编写三个JS脚本。
addLoadEvent.js文档代码如下：
unction addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!='function'){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}接下来是getHTTPObject.js和getNewContent.js这两个脚本。
微软最早在IE5中以Active对象的形式实现了一个名叫XMLHTTP的对象。在IE中创建新的对象要使用下列代码：
var request=new ActiveXobject("Msxml2.XMLHTTP.3.0");其他浏览器则基于XMLHttpRequest来创建对象：
var request=new XMLHttpRequest();而且不同IE版本使用的XMLHTTP对象也不同，为了兼容所有浏览器，getHTTPObject.js文件中的函数要这样写：
function getHTTPObject(){
if(typeof XMLHttpRequest=="undefined")
XMLHttpRequest=function(){
try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
catch (e) {}
try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
catch (e) {}
try{return new ActiveXObject("Msxml2.XMLHTTP");}
catch (e) {}
return false;
}
return new XMLHttpRequest();
}getHTTPObject通过对象检测技术检测了XMLHttpRequest,即原生XHR对象是否存在，如果存在则返回它的新实例。如果不存在则继续检测ActiveX对象，最终返回一个新的XMLHTTP对象或false.
这样你在其他脚本中要使用XMLHttpRequest对象时，可以将这个新对象直接赋值给一个变量：
var request=getHTTPObject();XMLHttpRequest对象有很多方法。其中最有用的是open方法，它用来指定服务器上将要访问的文件，指定请求类型：GET、POST或SEND。这个方法的参数用于指定请求是否以异步方式发送和处理。
在getNewContent.js文件中添加下列代码：
function getNewContent() {
var request=getHTTPObject();
if(request){
request.open("GET","example.txt",true);
request.onreadystatechange=function(){
if(request.readyState==4){
var para=document.createElement("p");
var txt=document.createTextNode(request.responseText);
para.appendChild(txt);
document.getElementById('new').appendChild(para);
}
};
request.send(null);
}else{
alert('Sorry,your browser doesnt support XMLHttpRequest');
}
}
addLoadEvent(getNewContent);当页面加载完成后，以上代码会发起一个GET请求，请求与ajax.html文件位于同一目录的example.txt文件。
request.open("GET"，"example.txt",true);open方法的三个参数：要发送的请求的类型（“get”、”post”等）、请求的URL和表示是否异步发送请求的布尔值。
代码中的onreadystatechange是一个事件处理函数，它会在服务器给XMLHttpRequest对象送回响应的时候触发执行。
在此，我们给它指定一个处理函数：
request.onreadystatechange=function(){
//处理响应
};在指定了请求的目标，也明确了如何处理响应之后，就可以用send方法来发送请求了：
requset.send(null);服务器在向CMLHttpRequset对象发送响应时，该对象有许多属性可用，浏览器会在不同阶段更新readyState属性的值，它有5个可能的值：
- 0表示未初始化
- 1表示正在加载
- 2表示加载完毕
- 3表示正在交互
- 4表示完成
只要readyState属性的值变成了4，就可以访问服务器发送回来的数据了。
在这个例子中，onreadyStatechang事件处理函数在等到readyState值变成4之后，就会从responseText属性里取得文本数据，然后把数据放在一个段落里，再将新的段落添加到DOM里:
request.onreadystatechange=function(){
if(request.readyState==4){
var para=document.createElement(“p”);
var txt=document.createTextNode(request.responseText);
para.appendChild(txt);
document.getElementById(‘new’).appendChild(para);
}
};
此时，example.txt文件中的文本内容就会出现在id为new的div元素中。