1.Ajax是什么?
是一种用来改善用户体验的技术,其本质是利用浏览器提供的一特殊的对象(XMLHttpRequest,也可称之为ajax对象)向服务器发送异步请求。服务器返回部分数据(通常不需要返回完整页面),浏览器利用这些数据对当前页面做部分更新。整个过程,页面无刷新,不打断用户的操作。
注:
异步请求:发送请求的同时,浏览器不会销毁当前页面,用户仍然可以对当前页面做其他操作。
2.怎样获得ajax对象?
要区分浏览器:
function getXhr(){ //不需要背,可以用jQuery实现
var xhr = null;
if(window.XMLHttpRequest){
//非IE浏览器
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp");
return xhr;
}
这里我在html文件中测试了一下这个函数返回的值,在body中定义一个超链接,点击以后显示一个弹出窗:
3.ajax对象的几个重要的属性
- onreadystatechange:用来绑定一个事件处理函数,处理readystatechange事件。当ajax对象的readystate属性值发生了任何改变(比如从0变成了1),就会产生readystatechange事件。
- readyState:有五个值(0,1,2,3,4),表示ajax对象与服务器通信的状态。其中,当值为4时,表示ajax对象已经获得了服务器返回的所有数据。
- responseText:获得服务器返回的文本数据。
- resoinseXML:获得服务器返回的xml数据。
- status:获得状态码。
4.编程步骤
(1)获得ajax对象。
比如:var xhr = getXhr();
(2)发送请求。
发送GET请求:
- a.xhr.open('get','check_uname.do?uname=tom',true);
- b. xhr.onreadystatechange=f1;
- c.xhr.send(null);
注: true表示异步,false表示同步(发送请求时,浏览器会锁定当前页面,用户不能够对当前页面做其他操作)
发送POST请求:
- xhr.open('post','check_uname.do',true);
- xhr.setRequestHeader('content-type',
- 'application/x-www-form-urlencoded');
- xhr.onreadystatechange=f1;
- xhr.send('uname=' + $F('username'));
注:
按照http协议要求,发送post请求时,必须提供"content-type"消息头。而ajax对象默认情况下生成的请求数据包里面,没有提供该消息头,需要调用setRequestHeader方法来添加。
(3)编写服务器端的程序。
注:通常不需要返回完整的页面,只需要返回部分数据(文本)
(4)编写事件处理函数。
function f1()
{
//先获得服务器返回的数据
if (xhr.readyState == 4 && xhr.status == 200) {
var txt = xhr.responseText;
//利用这些数据更新页面
//...
}
}
5.缓存问题
(1)什么是缓存问题
ie浏览器提供的ajax对象在发送get请求时,会查看请求地址是否访问过,如果访问过,则不再发送新的请求,而是显示之前的结果。
(2)如何解决
在请求地址后面添加上随机数。比如: getNumber.do?Math.random();
6.发送同步请求
(1)什么是同步请求?
当ajax对象向服务器发送请求时,浏览器不会销毁当前页面,浏览器会锁定当前页面,用户对当前页面不能做其它操作。
(2)如何发送同步请求
open(请求方式,请求地址,false);