Ajax详解
Posted Java阿吃
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax详解相关的知识,希望对你有一定的参考价值。
Asynchronous javascript and xml :异步的JS和XML
同步
--->发一个请求,就要等待服务器的响应结束。然后才能发第二个请求!中间这段时间就是一个字“卡”
--->刷新的是整个页面!!
异步
--->发一个请求后,无需等待服务器的响应,然后就可以发第二个请求!
--->可以使用JS结束服务器的响应,然后使用JS来局部来机新
百度搜索框
用户注册时(用户名是否已被注册)
优点
--->异步交互;增强了用户的体验!
--->性能:因为服务器无需再响应整个页面,只需要响应部分内容,所以服务器的压力减轻了
缺点:
Ajax不能应用在所有场景!
Ajax无端的增多了对服务器的访问次数,给服务器到来了压力!
* Ajax其实只需学习一个对象:XMLHttpRequest,如果掌握了他,就掌握了Ajax!!
* 得到XMLHttpRequest
大多数浏览器都支持:var xmlHttp=new XMLHttpRequest();
IE6.0:var xmlHttp =new ActiveXObject("Microsoft.XMLHTTP");
编写创建XMLHttpRequest对象的函数
functioncreateXMLHttpRequest(){
try{
return new XMLHttpRequest();
}catch(e){
try{
return new ActiveXObject("Msxml2.XMLHTT P");
}catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTT P");
}catch(e){
alert(哥儿们,你用的是什么浏览 器???);
throw e;
}
}
}
}
---xmlHttp.open();用来打开与服务器的连接,它需要三个参数:
》请求方式:可以是GET或POST
》请求的URL:制定服务器端资源,例如:/day1/AServlet
》请求是否为异步:如果为true表示发送异步请求,否则为同步请求!
---xmlHttp.open("GET","/day1/AServlet",true);
---xmlHttp。send(null);如果不给可能会造成部分浏览器无法发送!
》 参数:就是请求体内容!如果是GET请求,必须给出null。
---在xmlHttp对象的一个事件上注册监听器:onreadystatechange
---xmlHttp对象一共有5个状态:
》0状态:刚创建,还没有调用open方法;
》1状态:请求开始:调用了open方法,但还没有调用send()方法
》2状态:调用玩了send()方法;
》3状态:服务器已经开始响应,但不表示响应结束!
》4状态:服务器响应结束!(通常我们只关心这个状态)
---得到xmlHttp对象的状态:
》var state=xmlHttp.readState;//可能是0、1、2、3、4
---得到服务器响应的状态码
》var status=xmlHttp.status;//例如200、404、500
---得到服务器响应的内容
》var content =xmlHttp.responseText;//得到服务器的响应的文本格式的内容
》var content =xmlHttp.responseXML;//得到服务器的响应的XML响应的内容,它是Document对象了!
xmlHttp.onreadystatechange=function(){//xmlHttp的5种状态都会调用本方法
if(xmlHttp.readyState==4 && xmlHttp.status==200){//双重判断:判断是否为4状态,而且还要判断是否为200
//获取服务器的响应内容
var text =xmlHttp.responseText;
}
};
* open:xmlHttp.open("POST" ....);
* 添加一步:设置Content-Type请求头:
> xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
* send:xmlHttp.send("username=zhangSan&password=123");//发送请求时指定请求体
1编写页面:
* ajax3.jsp
> 给出注册表单页面
> 给用户名文本框添加onblur事件的监听
> 获取文本框的内容,通过ajax4步发送给服务器,得到响应结果
* 如果为1:在文本框后显示“用户名已被注册”
* 如果为0:什么都不做!
22编写Servlet
* ValidateUsernameServlet
> 获取客户端传递的用户名参数
> 判断是否为itcast
* 是:返回1
* 否:返回0
* 服务器端:
> 设置响应头:ContentType,其值为:text/xml;charset=utf-8
* 客户端:
> var doc = xmlHttp.responseXML;//得到的是Document对象!
11. 页面
<select name="province">
<option>===请选择省份===</option>
</select>
<select name="city">
<option>===请选择城市===</option>
</select>
22. ProvinceServlet
* ProvinceServlet:当页面加载完毕后马上请求这个Servlet!
> 它需要加载china.xml文件,把所有的省的名称使用字符串发送给客户端!
33. 页面的工作
* 获取这个字符串,使用逗号分隔,得到数组
* 循环遍历每个字符串(省份的名称),使用每个字符串创建一个<option>元素添加到<select name="province">这个元素中
44. CityServlet
* CityServlet:当页面选择某个省时,发送请求!
* 得到省份的名称,加载china.xml文件,查询出该省份对应的元素对象!,把这个元素转换成xml字符串,发送给客户端
55. 页面的工作
* 把<select name="city">中的所有子元素删除,但不要删除<option>===请选择城市===</option>
* 得到服务器的响应结果:doc!!!
* 获取所有的<city>子元素,循环遍历,得到<city>的内容
* 使用每个<city>的内容创建一个<option>元素,添加到<select name="city">
以上是关于Ajax详解的主要内容,如果未能解决你的问题,请参考以下文章