ajax教程

前端之家收集整理的这篇文章主要介绍了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;

}

}

}

猜你在找的Ajax相关文章