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;

}

}

}

本文转自 素颜猪 51CTO博客,原文链接:http://blog.51cto.com/suyanzhu/1896874

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章