Ajax=异步的JavaScript和XML
向请求添加 HTTP 头：setRequestHeader(header,value)
header: 规定头的名称
value: 规定头的值
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
一、AJAX - 创建 XMLHttpRequest 对象
1.什么是XMLHttpRequest对象
所有现代浏览器（IE7、Chrome、Firefox、Safari、Opera）均支持XMLHttpRequest对象，XMLHttpRequest对象用来在后台与服务器交换数据，实现页面局部刷新。
2.如何创建XMLHttpRequest对象
一般浏览器都支持XMLHttpRequest对象，但部分IE浏览器支持的是ActiveXObject。
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
3.XMLHttpRequest对象如何与服务器交换数据
3.1 向服务器发送请求
我们使用XMLHttpRequest的Open和Send方法：
xmlhttp.open("GET","text.txt",true);
xmlhttp.send();
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。
|
| send(string) | 将请求发送到服务器。
|
3.1.1 使用GET请求
一个简单的GET请求：
xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();
为了避免每次获得的是缓存中的内容，为了避免，可以在url中加一个唯一的时间ID：
xmlhttp.open("GET","demo_get.asp?t="+Math.random(),true);
xmlhttp.send();
通过GET向服务器发送数据Demo：
xmlhttp.open("GET","demo_get.asp?name=heaven&age=26",true);
xmlhttp.send();
3.1.3 使用POST请求：
一个简单的POST请求：
xmlhttp.open("POST","demo_get.asp",true);
xmlhttp.send();
如果像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");
向请求添加 HTTP 头：setRequestHeader(header,value)
header: 规定头的名称
value: 规定头的值
3.1.3关于异步True或False:
对于web开发来说，发送异步请求是一个巨大的进步，因为很多在服务器执行的任务都相当费时，在Ajax出现前，这可能会引起应用程序挂起或停止。
通过Ajax,JavaScript无需等待服务器响应，而是：
1.在等待服务器响应期间执行其它脚本
2.当响应就绪后对响应进行处理
当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时，处于同步状态，此时JavaScript会等到服务器就绪时才执行，无需写onreadystatechange监控函数：
xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
3.2 服务器的响应
如果要获得来自服务器的响应，使用XMLHttpRequest中的responseText或responseXML。
| responseText | 获得字符串形式的响应数据。 |
| responseXML | 获得 XML 形式的响应数据。 |
3.2.1 使用responseText
responseText 属性返回字符串形式的响应，因此您可以这样使用：
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
3.2.2 使用responseXML
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：
请求 books.xml 文件，并解析响应：
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;
3.3 Ajax 的 onreadystatechange事件
当请求发送到服务器的整个过程中，我们需要执行一些基于响应的任务，即每当readyState改变时都会触发onreadystatechange事件，readyState属性存有XMLHttpRequest的状态信息。
下面是XMLHttpRequest对象的三个重要属性：
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
| status | 200: "OK" 404: 未找到页面 |
当readyState=4且status=200时，表示响应已就绪：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
3.4 使用callback回调函数
callback函数是一种以参数的形式传递给另一个函数的函数，我们在处理Ajax任务时，一般都会写一个处理Ajax请求的
标准
函数，这个标准函数包括请求的url和发生onreadystatechange时间所执行的任务：
<
html
>
<
head
>
<
script
type
=
"text/javascript"
>
var
xmlhttp;
function
loadXMLDoc(url,cfunc)
{
if
(window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safar
i
xmlhttp=
new
XMLHttpRequest();
}
else
{
// code for IE6, IE
5
xmlhttp=
new
ActiveXObject(
"Microsoft.XMLHTTP"
);
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open(
"GET"
,url,
true
);
xmlhttp.send();
}
function
myFunction()
{
loadXMLDoc(
"/ajax/test1.txt"
,
function
()
{
if
(xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(
"myDiv"
).innerHTML=xmlhttp.responseText;
}
});
}
</
script
>
</
head
>
<
body
>
< div id= "myDiv" >
<
h2
>
Let AJAX change this text
</
h2
>
</
div
>
< button type ="button" onclick= "myFunction()"> 通过 AJAX 改变内容 </ button>
</
body
>
</
html
>
