ajax教程

1.同步与异步

同步：

提交请求->等待服务器处理->处理完后返回结果

处理过程中客户端不能处理其它事务

发送方发出数据后，等接收方发回响应后才能发下一个数据包

异步：

请求通过事件触发->服务器处理->处理完毕返回结果

服务器处理时，客户端可以处理其它事务

发送方发出数据后，不等接收方发回响应，接着发送下一个数据包

2.ajax

Aysnchronous JavaScript and XML异步无刷新

应用

google搜索提示

google地图

注册时用户的验证

核心

XmlHttpRequest对象

工作原理

客户端->ajax->服务器->ajax->客户端

包含的技术

javascript

xml

css

xhtml

dom

缺点

不同浏览器创建XmlHttpRequest对象方式不同

不会刷新页面，浏览器后退失效

对于流媒体没有flash,javaapplet好

手机,pda等还不能很好的支持

3.客户端与服务器端通信状态

含义 状态

1.正在初始化 0

2.正在打开与服务器端的连接open方法调用，send方法没调用 1

3.send方法调用 ，请求已经开始 2

4.处理中，服务器发送响应 3

5.响应完毕，处理完成 4

4.用户状态码

状态码 含义

404 没找到页面

403 禁止访问

500 服务器内部出错

200 一切正常

304 没有修改

5.实现注册业务中验证用户名是否被注册

准备工作

创建jsp页面

创建Servlet

1.创建XmlHttpRequest对象

创建方式很多，不同浏览器的方式不同

var xmlHttpReq;

function getXmlHttpRequest() {

if (window.ActiveXObject) {//IE浏览器创建XMLHttpRequest对象

xmlHttpReq = new ActiveXObject("MSXML2.XMLHTTP.3.0");

} else if (window.XMLHttpRequest) {

xmlHttpReq = new XMLHttpRequest();

}

}

2.打开与服务器的连接

/*

get:提交方式

${pageContext.request.contextPath }/ays.AjaxServlet:请求路径

true:表示是否是异步

时间戳：timeStamp+="+new Date().getTime():实现请求一直可用，不读缓存

*/

//xmlHttpReq.open("get","${pageContext.request.contextPath }/ays.AjaxServlet?timeStamp+="+new Date().getTime()+"&name=deng",true);

3.发送请求

xmlHttpReq.send(null);

4.处理返回结果

xmlHttpReq.onreadystatechange=executeResult;

function executeResult(){

//用户状态码

if (xmlHttpReq.status == 200 && xmlHttpReq.readyState==4) {

var text = xmlHttpReq.responseText;

var objSpan = $("usermsg");

if (text == "false") {

objSpan.innerHTML="可用！";

return true;

}else{

objSpan.innerHTML="已经被使用！";

return false;

}

}

}