AJAX开发框架

AJAX实质上也是遵循Request/Server模式，所以这个框架基本的流程是：

对象初始化

发送请求

服务器接收

服务器返回

客户端接收

修改客户端页面内容。

只不过这个过程是异步的。

 

A  初始化XMLHttpRequest对象

function   createXmlHttpRequest(){

   var xmlHttp;

   try{    //Firefox, Opera 8.0+, Safari

           xmlHttp=new XMLHttpRequest();

    }catch (e){

           try{    //Internet Explorer

                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

            }catch (e){

                  try{

                          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

                  }catch (e){} 

           }

    }

   return xmlHttp;

 }

 

B、指定响应处理函数

指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性就可以了.比如：

        XMLHttpReq.onreadystatechange = processResponse;

注意:这个函数名称不加括号，不指定参数。也可以用Javascript函数直接量方式定义响应函数。比如：

       XMLHttpReq.onreadystatechange = function() { };

// 处理返回信息的函数

function   processResponse() {

}

C、发出HTTP请求

向服务器发出HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法。

     http_request.open('GET', 'http://www.example.org/some.file', true);

     http_request.send(null)

按照顺序，open调用完毕之后要调用send方法。send的参数如果是以Post方式发出的话，可以是任何想传给服务器的内容。

注意:如果要传文件或者Post内容给服务器，必须先调用setRequestHeader方法，修改MIME类别。如下：

http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

    这时资料则以查询字符串的形式列出，作为send的参数，例如：

    name=value&anothername=othervalue&so=on

 

//发送请求

lfunction sendRequest(){

//获取文本框的值

var chatMsg=input.value;

var url="chatServlet.do?charMsg="+chatMsg;

//建立对服务器的调用

XMLHttpReq.open("POST",url,true);

//设置MiME类别,如果用 POST 请求向服务器发送数据，

//需要将"Content-type"的首部设置为 "application/x-www-form-urlencoded".

//它会告知服务器正在发送数据，并且数据已经符合URL编码了。

XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

//状态改变的事件触发器,客户端的状态改变会触发readystatechange事件,

//onreadystatechange会调用相应的事件处理函数

XMLHttpReq.onreadystatechange=processResponse;

//发送数据

XMLHttpReq.send(null);

}

 

 

D、处理服务器返回的信息

处理响应处理函数都应该做什么。

　　首先，它要检查XMLHttpRequest对象的readyState值，判断请求目前的状态。参照前文的属性表可以知道，readyState值为4的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下：

if (http_request.readyState == 4) {

    // 信息已经返回，可以开始处理

} else {

    // 信息还没有返回，等待

}

　　服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中，200代表页面正常。

if (http_request.status == 200) {

      // 页面正常，可以开始处理信息

} else {

    // 页面有问题

}

lXMLHttpRequest对成功返回的信息有两种处理方式：

lresponseText：将传回的信息当字符串使用；

lresponseXML：将传回的信息当XML文档使用，可以用DOM处理

l//处理返回信息的函数

function processResponse(){

  if(XMLHttpReq.readyState==4){ //判断对象状态 4代表完成

           if(XMLHttpReq.status==200){ //信息已经成功返回，开始处理信息

                  document.getElementById("chatArea").value=XMLHttpReq.responseText;

        }

  }

      }