Ajax=异步的JavaScript和XML
属性
原文链接：https://www.f2er.com/ajax/165443.html
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
一、AJAX - 创建 XMLHttpRequest 对象
1.什么是XMLHttpRequest对象
2.如何创建XMLHttpRequest对象
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：
3.1.3 使用POST请求：
一个简单的POST请求：
xmlhttp.open("POST",true);
xmlhttp.send();
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监控函数：
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 属性：
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" |
当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+,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
>
<divid="myDiv">
<
h2
>
Let AJAX change this text
</
h2
>
</
div
>
<buttontype="button"onclick="myFunction()">通过 AJAX 改变内容</button>
</
body
>
</
html
>
