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请求中，包含中文时的编码问题解决等。