Ajax的用法

1 Ajax是什么

1.1 Asynchronous JavaScript and XML（异步的javascript和xml）

实质为：使用浏览器内置的一个对象（XmlHttpRequest）向服务器发送请求，服务器返回xml数据或文本数据给浏览器，然后在浏览器端，使用这些数据更新部分页面，在整个过程中，页面无任何刷新。

1.2 传统的等待—响应—等待

在传统的web应用中，比如注册，用户填写整个注册表单后提交，此时浏览器会将整个注册页面抛弃，等待服务器返回一个新的完整的页面。在等待过程中，用户不能够做其他操作。服务器生成新的页面发送给浏览器，浏览器需要重新解析这个页面生成相应的页面。

1.3 图示

① Ajax引擎（即XmlHttpRequest对象），首先为该对象注册一个监听器（该监听器是一个事件处理函数，对状态改变事件（readyStatechange）进行监听）

② 当用户对GUI做了某种操作（将产生对应的事件，如焦点失去事件等）

③ 一旦产生对应的事件，将触发事件处理代码

④ 在执行事件处理代码时，会调用Ajax引擎（XmlHttpRequest对象）

⑤ 发送请求：Ajax引擎被调用后，将独自向服务器发送请求（独立于浏览器之外）

　 继续其他操作：在Ajax引擎发送请求的同时，用户在浏览器还可以对GUI继续做其他操作，该请求是异步请求（Ajax引擎发送请求时，没有打断用户的操作）

⑥ 服务器的web组件对请求进行处理

⑦ 服务器可能会调用到数据库或者处理业务逻辑的Java类

⑧ 服务器将处理结果响应给（只返回部分数据，可以是xml或者文本）Ajax引擎

⑨ 监听器通过Ajax引擎获取响应数据（xml或者文本）

⑩ 监听器对GUI中的数据进行更新（局部更新，不是整个页面刷新）

整个过程中大部分是通过JS实现的，响应数据可能是xml，所以Ajax可以看做是多种技术的融合。

 2 Ajax编程

第一步 获得XmlHttpRequest对象

该对象由浏览器提供，但是该类型并没有标准化。

ie和其他浏览器不同，其他浏览器都支持该类型，而ie不支持。

    function getXmlHttpRequest(){
        var xhr = null;
        if((typeof XMLHttpRequest) != 'undefined'){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiceXObject(Microsoft.XMLHttp);
        }
        return xhr;
    }

 第二步 使用XmlHttpRequest向服务器发请求

a. 发送get请求

function change(v1) {
        var xhr = getXmlHttpRequest();
        /*open(请求方式，请求地址，同步/异步)
        请求方式：get/post
        请求地址：如果是get请求，请求参数添加到地址之后
        比如 get_comments.do?name=QQ
        同步/异步：true表示异步
        */
        xhr.open("get", encodeURI("get_comments.do?name=" + v1), true);
        /*注册一个监听器（即当xhr的状态发生改变产生了readystatechange事件，
        该事件会由一个函数f1来进行处理，这个函数里需要获得服务器返回的数据，
        然后更新页面）
        */
        xhr.onreadystatechange = f1;
        /*只有调用send方法之后，请求才会真正发送*/
        xhr.send(null);
    }

 

b. 发送post请求

function change2(v1){
        var xhr = getXmlHttpRequest();
        xhr.open("post","get_comments.do",true);
        //必须添加一个消息头 content-type
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.onreadystatechange = f1;
        
        xhr.send("name=" + v1);
    }

 

第三步  在服务器端处理请求

第四步 在监听器当中，处理服务器返回的响应

    xhr.onreadystatechange = f1;
    
    function f1(){
        if(xhr.readyState == 4){
            var txt = xhr.responseText;
            document.getElementById("d1").innerHTML = txt;
        }
    }

 或者

    xhr.onreadystatechange =function(){
        //编写相应的处理代码
        if(xhr.readyState == 4){
            //只有readyState等于4，xhr才完整地接收到了服务器返回的数据
            //获得文本数据
            var txt = xhr.responseText;
            //获得一个xml dom 对象
            var xml = xhr.responseXML;
            //dom操作 更新页面
            document.getElementById("d1").innerHTML = txt;
        }
    }                        

 

关于Ajax的其他应用，可以参考网盘文件。

（1）关于get请求中，ie浏览器的缓存功能，使得并非每一次触发事件都发起请求的问题的解决

（2）关于get请求和post请求中，包含中文时的编码问题解决等。