一、 引言
异步JavaScript与XML(AJAX)是一个专用术语，用于实现在客户端脚本与 服务器之间的数据交互过程。这一技术的优点在于，它向开发者提供了一种从Web服务器检索数据而不必把用户当前正在观察的页面回馈给服务器。与现代浏览器的通过存取浏览器DOM结构的编程代码(JavaScript)动态地改变被 显示内容的支持相配合，AJAX让开发者在浏览器端更新被显示的HTML内容而不必刷新页面。换句话说，AJAX可以使基于浏览器的应用程序更具交互性而且更类似传统型桌面应用程序。
Google的Gmail和Outlook Express就是两个使用AJAX技术的我们所熟悉的例子。而且，AJAX可以用于任何客户端脚本语言中，这包括JavaScript，Jscript和VBScript。
AJAX利用一个构建到所有现代浏览器内部的对象-XMLHttpRequest-来实现发送和接收HTTP请求与响应信息。一个经由XMLHttpRequest对象发送的HTTP请求并不要求页面中拥有或回寄一个＜form＞元素。AJAX中的"A"代表了"异步"，这意味着XMLHttpRequest对象的send()方法可以立即返回，从而让Web页面上的其它HTML/JavaScript继续其浏览器端处理而由服务器处理HTTP请求并发送响应。尽管缺省情况下请求是异步进行的，但是，你可以选择发送同步请求，这将会暂停其它Web页面的处理，直到该页面接收到服务器的响应为止。
微软在其Internet Explorer(IE) 5中作为一个ActiveX对象形式引入了XMLHttpRequest对象。其他的认识到这一对象重要性的浏览器制造商也都纷纷在他们的浏览器内实现了XMLHttpRequest对象，但是作为一个本地JavaScript对象而不是作为一个ActiveX对象实现。而如今，在认识到实现这一类型的价值及 安全性特征之后，微软已经在其IE 7中把XMLHttpRequest实现为一个窗口对象属性。幸运的是，尽管其实现(因而也影响到调用方式)细节不同，但是，所有的浏览器实现都具有类似的功能，并且实质上是相同方法。目前，W3C组织正在努力进行XMLHttpRequest对象的标准化，并且已经发行了有关该W3C规范的一个草案。
本文将对XMLHttpRequest对象API进行详细讨论，并将解释其所有的属性和方法。
二、 XMLHttpRequest对象的属性和事件
XMLHttpRequest对象暴露各种属性、方法和事件以便于脚本处理和控制HTTP请求与响应。下面，我们将对此展开详细的讨论。
readyState属性
当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态：一直等待直到请求被处理；然后，它才接收一个响应。这样以来，脚本才正确响应各种状态-XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性，如表格1所示。
表格1.XMLHttpRequest对象的ReadyState属性值列表。
| ReadyState取值 | 描述 |
|
0
| 描述一种"未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。 |
|
1
| 描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。 |
|
2
| 描述一种"发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。 |
|
3
| 描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。 |
|
4
| 描述一种"已加载"状态；此时，响应已经被完全接收。 |
onreadystatechange事件
无论readyState值何时发生改变，XMLHttpRequest对象都会激发一个readystatechange事件。其中，onreadystatechange属性接收一个EventListener值-向该方法指示无论readyState值何时发生改变，该对象都将激活。
responseText属性
这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。
responseXML属性
此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应；此时，Content-Type头部指定MIME(媒体)类型为text/xml，application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。无论何时，只要readyState值不为4，那么该responseXML的值也为null。
其实，这个responseXML属性值是一个文档接口类型的对象，用来描述被分析的文档。如果文档不能被分析(例如，如果文档不是良构的或不支持文档相应的字符编码)，那么responseXML的值将为null。
status属性
这个status属性描述了HTTP状态代码，而且其类型为short。而且，仅当readyState值为3(正在接收中)或4(已加载)时，这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。
statusText属性
这个statusText属性描述了HTTP状态代码文本；并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。
<head>
<title>一个ajax的简单例子 thx-bj</title>
</head>
<body>
<div>
<h2>
一个ajax的简单例子 thx-bj</h2>
<br />
<br />
<input type="text" id="num1" />+<input type="text" id="num2" />
=<span id="result" style="color: #ff0000"></span>
<br />
<br />
<input type="button" value="通过ajax计算" οnclick="sendRequest()" />
<br />
<br />
<input type="button" value="通过Dom计算" οnclick="calc()" />
<br />
<br />
</div>
</body>
</html>
<script type="text/javascript">
var xmlHttpReq;
/**
* 初始化一个xmlhttp对象
*/
function InitAjax()
{
var ajax=false;
try
{
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (E)
{
ajax = false;
}
}
if (!ajax && typeof XMLHttpRequest!='undefined')
{
ajax = new XMLHttpRequest();
}
return ajax;
}
function sendRequest() //ajax
{
xmlHttpReq=InitAjax();
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var url="http://www.china-pub.com/jcydd/tanhongxing2007/calc.asp?num1="+num1+"&num2="+num2;
xmlHttpReq.open("GET",url,true);
xmlHttpReq.onreadystatechange=processRequest;
xmlHttpReq.send(null);
}
function processRequest()
{
if(xmlHttpReq.readyState==4 && xmlHttpReq.status==200)
{
var msg=xmlHttpReq.responseText;
var result = document.getElementById("result");
result.innerHTML = "Ajax:"+msg;
}
}
function calc()//dom
{
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var num3 = eval(num1) + eval(num2);
var result = document.getElementById("result");
result.innerHTML = "Dom:"+num3;
}
</script>
calc.asp
<%
num1=cdbl(request.QueryString("num1"))
num2=cdbl(request.QueryString("num2"))
response.Write num1+num2
%>
1457
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
