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;

}

}

}

相关文章

JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表单提交的返回...
AJAX 每日更新前端基础,如果觉得不错,点个star吧 😃 https://github.com/WindrunnerMax/E...
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSe...
很早就听闻ajax的名声,但是却一直不知道怎么用,今天自己捣鼓了一下,竟然会用了,哈哈哈哈。 为了防止...
需要在服务器上进行哈 jquery的ajax方法: // jquery请求 $.ajax({ url: "./server/slider.js...
Ajax函数封装ajax.js // Get / Post // 参数 get post // 是否异步 // 如何处理响应数据 // URL // var...