1、什么是AJAX
AJAX=Asynchronous JavaScript and XML（异步的JavaScript和XML）。
AJAX是在不重新加载整个页面的情况下，后台与服务器交换数据并更新部分网页的技术。
通过AJAX，javascript无需等待服务器的响应，而是在等待服务器时执行其他脚本，并当响应就绪后对响应进行处理。
记住，javascript会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
2、AJAX XHR
XMLHttpRequest是AJAX的基础。
2.1、创建XMLHttpRequest对象
所有现代浏览器均支持XMLHttpRequest对象，语法为：
variable=new XMLHttpRequest();
IE5和IE6使用ActiveXObject，语法为：
variable=new ActiveXObject("Microsoft.XMLHTTP");
综上，创建XMLHttpRequest对象的完整代码为：
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
XMLHttpRequest对象用于和服务器交换数据。
2.2、向服务器发送请求
使用XMLHttpRequest对象的open()和send()方法：
xmlhttp.open("GET","test1.txt",true);
//规定请求的类型，URL以及是否异步处理请求
//请求的类型：GET or POST
//文件在服务器上的位置
//异步（true）或同步（false）
xmlhttp.send();
//将请求发送到服务器
//send(string)仅用于POST请求
大部分情况使用GET；
以下情况使用POST：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST没有数据量限制）
发送包含未知字符的用户输入时，POST比GET更稳定也更可靠。
2.2.1、GET请求
最简单的就是xmlhttp.open("GET","demo_get.asp",true);
为避免缓存，也可在url里加入唯一的id，即
xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();
另外，如果希望通过GET发送消息，要向url添加信息，即
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();
2.2.2、 POST请求
最简单的同样是xmlhttp.open("POST","demo_post.asp",true);
另外，如果需要像html表单那样post数据，要使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定希望发送的数据，即：
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
其中，setRequestHeader(header,value)方法用于向请求中添加http头，header规定头的名称，value规定头的值。
2.2.3、URL
url是服务器上文件的地址，并可以是任何类型的文件。
2.2.4、异步or同步
当Async=true(异步)时，规定在响应处于onreadystatechange事件中的就绪状态时执行的函数：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
不推荐，但对于一些小型的请求也是可以的。----当Async=false(同步)时，就不需要编写onreadystatechange函数，把函数放到send后面即可。
xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
2.3、服务器响应
responseText属性返回字符串形式的响应：
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
responseXML属性返回XML形式的响应：
xmlDoc=xmlhttp.responseXML;
2.4、onreadystatechange事件
XHR对象有三个重要的属性：
onreadystatechange 存储函数（或函数名），每当readyState属性改变时，就会调用该函数。
readyState 存有XHR的状态。从0到4变化。
0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成，且响应已就绪。
status 200：“OK”
404：未找到页面
当readyState等于4且status等于200时，表示响应已就绪。
注意：callback（回调）函数---当你的网站上存在多个AJAX任务，那么就应该为创建XMLHttpRequest对象编写一个标准的函数，并为每个AJAX任务调用该函数。
1 <script> 2 var xmlhttp; 3 function loadXMLDoc(url,cfunc) 4 { 5 if (window.XMLHttpRequest) 6 {// code for IE7+, Firefox, Chrome, Opera, Safari 7 xmlhttp=new XMLHttpRequest(); 8 } 9 else 10 {// code for IE6, IE5 11 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 12 } 13 xmlhttp.onreadystatechange=cfunc; 14 xmlhttp.open("GET",url,true); 15 xmlhttp.send(); 16 } 17 function myFunction() 18 { 19 loadXMLDoc("/ajax/test1.txt",function() 20 { 21 if (xmlhttp.readyState==4 && xmlhttp.status==200) 22 { 23 document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 24 } 25 }); 26 } 27 </script>