Ajax应用程序可以用javascript脚本代码创建
主要步骤如下
(1) 调用XMLHttpRequest对象的open()方法，设置所有的请求方法，请求资源的URL, 并指定采用同步或异步方式发送HTTP请求。
(2) 设置XMLHttpRequest对象的onreadystatechange属性，以指定当请求状态改变时调用的时间处理程序
(3) 调用XMLHttpRequest对象的sendf方法，向服务器发送请求并接受响应。在服务器段接收请求和发送请求时可以使用各种编程语言实现： asp、jsp、php、asp.net.......
(4) 在事件处理程序中，对从服务器获取的HTTP代码块、XML数据、json数据或其他数据进行解析和处理，然后插入到HTTP文档中，以实现页面的局部更新。
如果在调用open和send方法时都没有传入任何请求参数，则这种请求也成为简单请求。简单请求通常用在自动刷新的场合，用于从服务器端获取公告性质的响应。例如股票行情等实时信息。由于发送简单请求时不需要向服务器传递请求参数，所以使用POST或GET方法都是可以的。
发送GET请求时，可将open()方法的第一个参数设置为GET，若要向服务器端发送请求参数，应在调用open方法时把名称/值附加在第2个参数（服务器资源URL）的后面。但由于URL的长度是有限的，所以不能通过GET请求来发送大量数据，如果数据量太大，数据可能被截断，将无法得到预期的处理结果，在这种情况下，可以改用POST方法发送异步请求。
同时浏览器会缓存HTTP GET请求的结果。如果要保证不缓存结果，可以在客户端或者服务器端禁止页面缓存。
~ 若要在客户端禁止页面缓存，可以在ajax请求的后台数据处理页面的URL上附加一个随机字符串。所用javascript代码如下,加之后ajax每次发出的URL都不同，因此浏览器会认为ajax每次发出的HTTP请求也是各不相同的，从而每次都会重新请求。
xhr.open("GET","test.jsp?name=span&time=" + new Date().getTime(),true);
XMLHttpRequest对象的属性和方法
1. readyState属性
返回XMLHttpRequest对象所处的状态。[nState = ]xhr.readyState;
readyState属性是一个只读属性，没有默认值。属性值可以为下列整数之一
- 0：表示未初始化状态(Uninitialized)，以创建XMLHttpRequest对象，但尚未进行初始化(即未调用open方法)
- 1：表示准备发送(Open)，已调用XMLHttpRequest对象的open()方法，发送到服务器段的请求准备就绪。
- 2：表示已发送状态(Sent)，已调用XMLHttpRequest对象的send方法，但是状态和表头仍然不可用。
- 3：表示正在接收状态(Receiving)，已收到HTTP响应标头，但尚未完全接收到响应的正文。
- 4：表示完成响应状态(Loaded)，所有数据均已收到，并且可用。
2. onreadystatechange属性
可读写属性，没有默认值，可将其设置为一个已经定义的JavaScript命名函数的的名称和匿名函数。
无论readyState值何时发生改变，XMLHttpRequest对象都会触发一个readysatechange事件。onreadystatechange属性用于设置异步请求的事件处理程序
xhr.onreadystatechange [= vCallback];
3. responseText属性
只读属性，没有默认值。只有readyState属性值为4时，才能通过该属性获取完整的响应信息
返回客户端接收到的HTTP响应的文本内容。
[sBody = ]xhr.responseText;
4. responseXML属性
只读属性，没有默认值。只有readyState属性值为4时，并且Content-Type响应标头的MIME属性为text/xml 或application/xml时，该属性才会有值，并被解析为一个XML文档。
返回服务器响应的XML文档对象
[oXMLdOCUMENT = ]xhr.responseXML;
5. status属性
只读属性，没有默认值。只有当readyState属性值为3或者4时，才能读取status属性；只有当status属性值为200时，才能访问responseText和responseXML属性。
返回请求的HTTP状态码。
[nStatus = ]xhr.status; nStatus为一个整形变量，可接受HTTP状态码，例如
~ 200：表示服务器响应正常
~ 401：表示访问被拒绝
~ 404：表示所请求的资源不存在
~ 500： 表示服务器内部错误
6. statusText属性
只读属性，没有默认值。只有当服务器响应已经完成时，才能有该状态文本信息。返回HTTP请求的状态文本
[sStatus = ]xhr.statusText;
7. open方法
用于初始化请求参数，挤兑一个挂起的请求设置请求方法、目标URL以及其他可选属性
xhr.open(sMethod, sUrl[, bAsync][, sUser][, sPassword]);
- sMethod参数： 必选项，其值是一个字符串，指定打开连接苏勇的HTTP方法，例如GET,POST或HEAD
- sUrl参数：必选项，值是一个字符串，指定请求的绝对或相对URL,该地址会被自动解析为绝对地址。当使用GET方法发送请求时，可以将请求参数附加在该参数之后，URL与参数之间用问好(?)分隔，参数名与参数值之间使用等号(=)连接，不同名称/值对之间使用符号&连接，例如test.jsp?name1=value1&name2=value2.
- bAsync参数：可选项， 值为boolean值 true或false。
~ 如果值为true，则为异步操作，调用send方法立即返回，脚本继续执行，无需等待响应；
~ 如果值为false，则在接受响应之前，脚本停止执行，并且冻结页面的功能；
~ 如果未提供该参数，则默认值为true。
- sUser：可选项，指定进行身份验证的用户名。如果该参数为空("")，或者该参数为填但站点要求进行身份验证，则显示一个登陆窗口。
- sPassword是可选项，指定进行身份验证的密码。
8. send方法
向服务器发送HTTP请求并接收响应。
xhr.send([varBody]);
参数varBody为可选项，可以是String类型值、无符号字节数组，也可以是一个XML DOM对象。指定随请求发送的消息正文。send方法没有返回值。
调用send()方法是同步还是异步，取决于open()方法时参数bAsync的值:
~ 如果采用同步方式，则次调用不会返回，直到接收到整个响应或协议堆栈超时时间到期。
~ 如果采用异步方式，则次调用立即返回。
使用GET方法向服务器发送请求时，请求参数可以附加在URL后面，但在调用send方法时，还是应该传递一个参数，此时使用null作为参数即可。如果直接使用无参数的send方法，在IE中可以正常运行，在Firefox里不能正常运行。
9. abort方法
没有返回值，取消当前HTTP请求，中止一个在进行中的操作。
xhr.abort();
通过在open方法中将true传递给bAsync参数可以创建一个异步请求。调用abort方法将重置XMLHttpRequest对象，删除其onreadystatechange时间处理程序，并将readyState属性值设置为0(未初始化)。
10. setRequestHeader方法
将自定义的HTTP标头添加到请求中
xhr.setRequestHeader(sName, sValue);
2个参数都是必选项，分别制定标头的名称和值。当readyState属性值为1时，可以调用setRequestHeader方法，该方法没有返回值。
11. getAllResponseHeaders方法
返回响应标头的完整列表。
sHeader s = xhr.getAllResponseHeaders();
该方法返回一个字符串，包含全部响应标头。每个名称/值对由回车符/换行符序列(CR/LF)分隔。
12. getResponseHeader方法
返回指定的响应标头。
p = xhr.getResponseHeader(bstrHeader);
其中bstrHeader是必选的一个字符串，用于指定响应标头的名称。返回值是一个字符串，包含响应标头的值。
下面用一个例子说明如何通过XMLHttpRequest对象实现Ajax交互。
test.html__________________
<span>你好，Ajax! </span>
ajaxDemo1.html____________
<html>
<head>
<title>Ajax应用实例</title>
<style type="text/css">
p, button, li {font-size: 12px; color:green}
span{font-size="22px; font-style:itatlic; font-weight:bold; color: red; width:145px; background-color:yellow; display:block; position:relative"}
</style>
<script type="text/javascript" src="../scripts/jquery-1.4.2.js"> </script>
<script type="text/javascript" src="../scripts/ajax.js"> </script>
<script type="text/javascript">
var xhr;
function callback() {
var states = ["正在初始化......”, "正在初始化请求......", "正在发送请求......", "正在接收数据.....", "正在解析数据......"];
$("ol").append("<li>" + states[xhr.readyState] + "</li>");
$("li:last").append("完成！");
if(xhr.readyState == 4 && xhr.status ==200) {
var sHeaders = xhr.getAllResponseHeaders();
var sResponse = xhr.responseText;
$("p:first").html("<b>响应标头：</b>" + sHeaders);
$("p:last").html("<b>服务器响应文本：</b>" + sResponse);
$("span").hide().fadeIn(2000).animate({left:"+=168"},2000).animate({top:"-=16",fontSize:"22px"},1000);
}
}
$(document).ready(function(){
$("button").click(
xhr = createXMLHttpReq();
if(xhr){
try{
xhr.open("GET", "test.html",true);
xhr.onreadystatechange = callback;
xhr.send(null);
}catch(oErr){
alert("无法连接服务器：" + oErr.toString());
}
}
);
});
</script>
</head>
<body>
<button>发送请求</button>
<ol></ol>
<p></p>
<p></p>
</body>
</html>
——————————————————————————————————
