Ajax
一，Ajax概述
2005年，Adaptive Path公司发明了Ajax这个词，用于概括异步加载页面内容的技术。使用Ajax可以做到只更新需要部分页面，其他的大部分内容就无需重新加载，这样就避免了更新小部分内容而加载整个页面的问题。
二，XMLHttpRequest对象
XMLHttpRequest对象是Ajax的核心，该对象充当着浏览器中的脚本（客户端）与服务器之间的中介人的角色，JavaScript通过该对象可以自己发送请求，同时也可以自己处理相应，替代了由浏览器发出请求的过程。
三，引用《JavaScript DOM编程艺术》的案例
案例简述：
该案例包含四个文件，一个ajax.html文件，其中包含三个JS脚本文件，一个example.txt文件。通过JavaScript编写的ajax函数，实现ajax.html的请求响应来把example.txt的内容输出到ajax文档中。
ajax.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax案例</title>
</head>
<body>
<!--承载内容的空DIV-->
<div id="new"></div>
<!--共享onload事件，用于运行多个页面加载函数，该函数本例不编写，详细见第4篇笔记-->
<script src="js/addLoadEvent.js"></script>
<script src="js/getHTTPObject.js"></script>
<script src="js/getNewContent"></script>
</body>
</html>
example.txt
This was loaded asynchronously!
getHTTPObject.js
该函数用于针对不同浏览器创建XMLHttpRequest对象时产生的差异性，进行协调兼容的作用，并返回XMLHttpRequest对象。
function getHTTPObject (){
if(typeof XMLHttpRequest == "undefined"){
// 对IE浏览器的兼容，IE使用ActiveXObject()来创建类似于XMLHttpRequest的对象
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;
}
//非IE浏览器的兼容，创建XMLHttpRequest对象
return new XMLHttpRequest();
}
}
getNewContent.js
该函数对JavaScript的请求进行响应的作用，约定：由于XMLHttpRequest名字太长，就简述为 XHR，望周知。
function getNewContent (){
//将创建的XMLHttpRequest对象存入request变量
var request = getHTTPObject();
if(request){
/*XHR的open方法三个参数：
* 1,请求类型：GET、POST、SEND
* 2,目标文件
* 3,是否使用异步处理方式
*/
request.open("GET","example.txt",true);
//代码中的onreadystatechange是一个事件处理函数，它在服务器给XHR对象送回响应时触发
request.onreadystatechange = function() {
/*浏览器在不同阶段返回更新readyState属性值，在 属性值为4时就可以访问服务器发送来的数据
* 0 表示未初始化
* 1 表示正在加载
* 2 表示加载完毕
* 3 表示正在交互
* 4 表示处理完毕
*/
if(request.readyState == 4) {
var para = document.createElement("p");
/*访问服务器发送回来的数据需要通过两个属性完成
* 1，responseText属性，用于保存文本字符串形式的数据
* 2，responseXML属性，用于保存Content-Type头部中指定为"test/xml"数据
*/
var txt document.createTextNode(request.responseText);
para.appendChild(txt);
document.getElementById('new').appendChild(para);
}
};
//在指定了请求目标，明确了处理响应，可以使用send方法来发送请求
request.send(null);
}else{
alert('Sorry,your browser doesn't support XMLHttpRequest');
}
}
// 页面加载时运行函数
addLoadEvent(getNewContent);