1.什么是ajax?
(asynchronous javascript and xml)
是一种用来改善用户体验的技术,其实质
是利用浏览器提供的一个特殊对象(
XMLHttpRequest)异步地向服务器发送请求,
服务器返回部分数据,浏览器利用这些数据
对当前页面做局部更新,整个过程,页面
无刷新,不打断用户的操作。
注:
异步: 当ajax对象(XMLHttpRequest)向
服务器发送请求的时候,浏览器不会销毁
当前页面,用户仍然可以对当前页面做
其它操作。
2.ajax对象
(1)如何获得该对象?
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject(
‘microsoft.XMLHttp’);
}
return xhr;
}
(2)几个重要属性
1)onreadystatechange:绑订事件处理函数,
用来处理readystatechange事件。
注:
当ajax对象的readystate属性值发生
了改变,比如从0变成了1,就会产生
该事件。
2)readyState:有五个值,分别是0,1,2
3,4,表示ajax对象通信的状态,其中,
4表示ajax对象已经获得了服务器返回的
所有的数据。
3)responseText:获得服务器返回文本数。
4)responseXML:获得服务器返回的xml文档。
5)status:获得状态码。
3.编程步骤
step1,获得ajax对象
比如:
var xhr = getXhr();
step2,发送请求
1)get请求
xhr.open(‘get’,
‘check_uname.do?username=Tom’,true);
xhr.onreadystatechange=f1;
xhr.send(null);
注
true:异步地(当ajax对象(XMLHttpRequest)向
服务器发送请求的时候,浏览器不会销毁
当前页面,用户仍然可以对当前页面做
其它操作)。
false:同步地(当ajax对象(XMLHttpRequest)向
服务器发送请求的时候,浏览器不会销毁
当前页面,浏览器会锁定当前页面,用户不
能够对当前页面做其它操作)。
2)post请求
xhr.open(‘post’,’check_uname.do’,true);
xhr.setRequestHeader(‘content-type’,
‘application/x-www-form-urlencoded’);
xhr.onreadystatechange=f1;
xhr.send(‘username=Tom’);
注:
ajax对象在发送post请求时,默认
不会添加”content-type”消息头,
所以,需要调用setRequestHeader
方法来手动添加。
step3,编写服务器端的处理程序。一般来说,
服务器端不需要返回完整的页面,只需要
返回部分的数据。
step4,事件处理函数
function f1(){
//获得服务器返回的部分数据
if(xhr.readyState == 4 &&
xhr.status == 200){
var txt = xhr.responseText;
//更新页面
…
}
}
4.缓存问题
(1)什么是缓存问题?
ie浏览器在发送get请求时,会比较请求
地址是否访问过,如果访问过,则不再发送
新的请求,而是显示之前的访问的结果。
(2)解决方式
在请求地址后面添加上一个随机数。