1)asynchronous javascript and xml(异步的javascript和xml)
为了解决传统的web应用当中“等待-响应-等待”的弊端而创建的一种技术,其实质可以理解为:使用浏览器内置的一个对象(XmlHttpRequest)向服务器发送请求,服务器返回xml数据或者是文本数据给浏览器,然后再浏览器端,使用这些数据更新部分页面看,整个过程,页面无任何的刷新。
2)“等待-响应-等待”:
指的是,在传统的web应用当中,比如注册,用户填写完整个人注册信息,然后提交,此时,浏览器会将整个注册页面抛弃,等待服务器返回一个新的完整的页面。在等待过程当中,用户不能够做其它操作。服务器生成新的页面发送给浏览器,浏览器需要重新解析这个页面生成相应的界面。
解决“等待-响应-等待”问题
1)Ajax引擎(即XmlHttpRequest对象),首先为该对象注册一个监听器(该监听器是一个时间处理函数,对状态改变事件(readyStatechange)进行监听)
2)当用户对GUI做了某种操作(将产生对应的事件,如焦点失去事件等)
3)一旦产生对应的事件,将触发事件处理代码
4)在执行事件处理代码时,会调用Ajax引擎(XmlHttpRequest对象)
5)发送请求:Ajax引擎被调用后,将独自向服务器发送请求(独立于浏览器之外)
继续其他操作:在Ajax引擎发送请求的同时,用户在浏览器还可以对GUI继续其他操作
该请求是异步请求(Ajax引擎发送请求时,没有打断用户的操作)
6)服务器的web组件对请求进行处理
7)服务器可能会调用到数据库或者处理业务逻辑的Java类
8)服务器将处理结果响应给(只返回部分数据,可以是xml或者文本)Ajax引擎
9)监听器通过Ajax引擎获取响应数据(xml或者文本)
10)监听器对GUI中的数据进行更新(局部更新,不是整个页面刷新)
在整个过程中大部分是通过JS实现的,相应数据可能是xml,所以Ajax可以看做是多种技术的融合。
ajax编程
step1:
获得XmlHttpRequest对象。
该对象由浏览器提供,但是该类型并没有标准化。
ie和其它浏览器不同,其它浏览器都支持该类型,而ie不支持。
function getXmlHttpRequest(){
var xhr = null;
if((typeof XMLHttpRequest)!='undefined'){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
step2:
使用XmlHttpRequest向服务器发送请求
a.发送get请求
var xhr = getXmlHttpRequest();
/**
*open(请求方式,请求地址,同步/异步)
*请求方式:get/post
*请求地址:如果是get请求,请求参数添加到地址之后。比如 check_user.do?username=zs
*同步/异步:true表示异步。
xhr.open('get','check_user.do',true);
*/
/*
*注册一个监听器(即当xhr的状态发生改变产生了readstatechange事件,该时间会由f1函数处理。)
*我们需要在f1函数里面获得服务器返回的数据,然后更新页面
*/
xhr.onreadystatechange=f1;
/*只有调用send方法之后,请求才会真正发送*/
xhr.send(null);
b.发送post请求
var xhr = getXmlHttpRequest();
xhr.open('post','check_username.do'.true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.onreadystatechange=f1;
xhr.send('username=zs');
step3:
在服务器端,处理请求。
step4:
在监听器中,处理服务器返回的响应。
xhr.onreadystatechange=f1;
function f1(){
//编写相应的处理代码
}
或者
xhr.onreadystatechange=function(){
//编写相应的处理代码
if(xhr.readyState==4){
//只有readyState等于4,xhr才完整地接收到了服务器返回的数据。
//获得文本数据
var txt =xhr.responseText;
//获得一个xml dom对象。
var xml = xhr.responseXML;
//dom操作、更新页面
}
};
案例1:第一个Ajax程序
ie显示结果:
360显示结果:
XmlHttpRequest对象的重要属性
1)onreadystatechange:注册一个监听器(也就是,绑定一个事件处理函数)。
2)readyState:返回该对象与服务器通讯的状态。
返回值是一个number类型的值,不同的值表示的含义如下:
0(未初始化)对象已建立,但是尚未初始化(尚未调用open方法)。
1(初始化)对象已建立,尚未调用send方法。
2(发送数据)send方法已调用
3(数据传送中)已接收部分数据。
4(响应结束)接收了所有的数据。
3)responseText:获得服务器返回的文本。
4)responseXML:获得服务器返回的XML dom对象。
5)status:获得状态码。
缓存问题
在使用ie浏览器时,如果使用get方式发送请求,浏览器会将数据缓存起来。这样,当再次发送请求时,如果请求地址不变,ie不会真正地向服务器发请求,而是将之前缓存的数据显示给用户。
解决方式:
方式一:使用post方式。
方式二:在请求地址后面添加一个随机数。
Ajax技术的优点
1)页面无刷新
2)不打断用户的操作,用户的体验好
3)按需获取数据,浏览器与服务器之间的数据的传输量减少
4)是一个标准技术,不需要下载任何的插件
5)可以利用客户端(浏览器的计算能力)