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 + "&timestampt=" + 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);
			}
		}
	}