AJAX简介与简单项目

1.AJAX简介

知识点：

a) 了解异步通信和同步通信的概念

b) 注意,如果需要提起多个请求，需要创建多个 XMLHttpRequest 对象 c) 掌握引擎的 5 种状态

d) 了解 XMLHttpRequest 对象的创建过程

e) 了解 XMLHttpRequest 对象中 open、onreadystatechange、readystate、responseText、status 属性和方法的含义

f) 使用 Ajax 技术需要清除缓存，否则容易产生莫名其妙的错误，具体有两种方法：

第 一 种 ， 采 用 URL 后 跟 上 时 间 戳 来 防 止 浏 览 器 缓 存 ， 如 ：

user_validate.jsp?userId=" + userId + "×tampt=" + new Date().getTime()

第二种，加入清除缓存代码，如：

response.setContentType("text/xml");

response.setHeader("Cache-Control", "no-store"); //HTTP1.1

response.setHeader("Pragma", "no-cache"); //HTTP1.0

response.setDateHeader("Expires", 0);

用户代码是否重复采用 Ajax 验证流程

创建 Ajax 引擎对象 XMLHttpReqest

调用 open 方法与 Ajax 引擎建立连接，并告诉 Ajax 引擎我们的请求方式为 get，请 求 url 及采用异步方式

告诉 Ajax 引擎处理完成后， 如何把结果反馈给我们， 我们通常指定一个方法句柄， 那么 Ajax 就会调用我们指定的方法，从而就可以得到 Ajax 引擎返回的数据（这种 方式一般称为回调机制）

最后调用 send 方法把我们步骤 b 和 c 设置的参数发送给 Ajax 引擎（也就是真正的交给 Ajax 引擎去处理）



AJAX引擎是内置在浏览器中的，所以使用的时候是浏览器直接和AJAX引擎打交道，引擎在和服务器打交道。

执行过程：浏览器将参数传递给AJAX引擎，AJAX引擎再将参数传递给服务器，服务器返回内容给AJAX引擎，AJAX引擎再返回给服务器

执行步骤：

1.创建AJAX核心对象XMLHttpRequest。这样做的目的是保证浏览器的兼容性

var xmlHttp;
function createXMLHttpRequest() {
//表示当前浏览器不是ie,如ns,firefox
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}

2.打开,设置参数（只是设置，set，并没有起作用）

参数：open(请求方式,url,同步还是异步);

function validate(field){
if(trim(field.value) != null){
createXMLHttpRequest();
//为了清除缓存"&time=" + new Date().getTime().,最好加上.
var url = "user_validate.jsp?userId="+trim(field.value)+"&time=" + new Date().getTime();
xmlHttp.open("GET",url,true);
//设置回调函数，接收服务器返回的信息。
xmlHttp.onreadystatechange=callback;
//将设置信息发送到AJAX引擎
xmlHttp.send(null);
}
}

3.回调函数

function callback(){
//4标识消息成功返回到AJAX引擎
if(xmlHttp.readyState == 4){
//200表示HTTP请求成功
if(xmlHttp.status == 200){
//responseText存储服务器传给引擎的值
if(xmlHttp.responseText != null){
document.getElementById("spanUserId").innerHTML="<font color='red'>" + xmlHttp.responseText + "</font>";
//	alert(xmlHttp.responseText);
}
}else{
alert("请求失败,错误码:"+xmlHttp.status);
}
}
}