【暑假学习笔记】之——Ajax概述（定义，怎样获得ajax对象，重要属性，编程步骤，缓存问题，发送同步请求）

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请求：

1. a.xhr.open('get','check_uname.do?uname=tom',true);   
2. b. xhr.onreadystatechange=f1;        
3. c.xhr.send(null);

注：  true表示异步，false表示同步（发送请求时，浏览器会锁定当前页面，用户不能够对当前页面做其他操作）

发送POST请求：

1.  xhr.open('post','check_uname.do',true);
2.  xhr.setRequestHeader('content-type',
3.  'application/x-www-form-urlencoded');
4.  xhr.onreadystatechange=f1;
5.  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);
  

---

谢谢你看到这里！写作仓促，有疏漏之处还请评论指正，共同探讨进步！

---