IE和Mozilla中的Ajax技术开发总结(一)

        前段时间在公司做RSS新闻订阅，由于引入了XML所以就尝试着用Ajax技术来做新闻发布和管理，关于Ajax技术原理网络上有很多介绍的文章，本文主要讲述本人在IE和Mozilla浏览器下构建Ajax应用的一些开发心得。

为什么要用Ajax——我的理解

        一、对Ajax稍有一些了解的人都知道，Ajax并不是一种什么新技术，而只是一种JavaScript和XML技术相结合的Web应用，核心部分就是利用JavaScript脚本创建的XMLHTTP对象提交表单数据，那么为什么要用这种方式提交呢？这就说到关键点了，通常我们在利用常规的方法提交网页表单时，提交后页面就必须要从服务器重新下载数据，再把从服务器获取的整张网页数据显示到客户浏览器上，这样就会产生一个不好的现象：客户端会产生一个等待时间（视网络状况而定），用户必然要坐在电脑屏幕前对着一张空白的网页干等着数据下载，显然这对用户而言很不友好；而采用XMLHTTP方式提交正是可以解决这个问题，XMLHTTP对象由脚本创建，通过异步方式静默提交，用户不必等待数据下载完也可以进行一些其他的操作。
        二、通常的提交结果是：无论你这次提交的目的是什么，要得到提交结果就必须要从服务器重新下载，包括所有的图片、动画、背景、文字以及所有的web控件......即使有很多内容你是不需要更新的；而采用XMLHTTP方式提交则不然，你可以根据需要设定返回结果，再用脚本函数回调结果，然后再更新你想要更新的内容，这无疑在速度上要远远超过前者。

创建Ajax应用

        创建Ajax应用毫无疑问首先要创建XMLHttpRequest对象，这将根据不同的浏览器有不同的创建方法，以下通过IE和Mozilla为例来说明如何利用JavaScript来创建一个XMLHttpRequest对象（注意以后的示例都以这两个浏览器为例）。

IE：
----------------------------------------------------------------------------------------------------------------
           //在IE中，一般的写法是：var objXMLHttp = new ActiveXObject(Microsoft.XMLHTTP); 但这并不是所有IE版本中都适用的写法，所以为了兼容所有的IE浏览器，通常这样写：
           var MSXML = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
           for(var n = 0; n < MSXML.length; n ++)
           {
               try
               {
                   var objXMLHttp = new ActiveXObject(MSXML[n]);
                   break;
               }
               catch(e){}
           }
----------------------------------------------------------------------------------------------------------------

Mozilla：
----------------------------------------------------------------------------------------------------------------
        var objXMLHttp = new XMLHttpRequest();
----------------------------------------------------------------------------------------------------------------

XMLHttpRequest对象的方法：

方法

描述

abort()

停止当前请求

getAllResponseHeaders()

作为字符串返回完整的headers

getResponseHeader("headerLabel")

作为字符串返回单个的header标签

open("method","URL"[,asyncFlag[,"userName"[, "password"]]])

设置未决的请求的目标 URL，方法，和其他参数

send(content)

发送请求

setRequestHeader("label", "value")

设置header并和请求一起发送

XMLHttpRequest对象的属性：

属性

描述

onreadystatechange

状态改变的事件触发器

readyState

对象状态(integer):

0 = 未初始化

1 = 读取中

2 = 已读取

3 = 交互中

4 = 完成

responseText

服务器进程返回数据的文本版本

responseXML

服务器进程返回数据的兼容DOM的XML文档对象

status

服务器返回的状态码, 如：404 = "文件未找到" 、200 ="成功"

statusText

服务器返回的状态文本信息

好了，现在我们已经对XMLHttpRequest对象有了一个初步的了解，并且已经成功的创建了一个XMLHttpRequest对象的实例，下面我们开始利用它来提交表单数据：
IE：
----------------------------------------------------------------------------------------------------------------
objXMLHttp.onreadystatechange = function ()  //当XMLHttpRequest对象的状态发生改变时，会触发这个事件
{
  if (objXMLHttp.readyState == 4 && (objXMLHttp.status == 200 || objXMLHttp.status == 304))  //判断数据处理是否成功完成
  {
    var doc = new ActiveXObject('Microsoft.XMLDOM'); //创建Dom对象
    doc.async = true; //true:异步传输; false:同步传输 
    doc.onreadystatechange = function () { //监控Dom对象的状态
      if (doc.readyState == 4) 
        callback(doc); //回调函数，处理返回的Dom对象
    }
    doc.loadXML(objXMLHttp.responseText);  //利用Dom对象的loadXML方法装载XMLHttpRequest对象返回的数据
  }
}
objXMLHttp.open("get", "a.asp", true); //设置发送方法、目的页面和传输模式等

/* 下面需要根据提交方式来设定Header内容，因为浏览器总是会把刚访问过的页面缓存起来，这样即使提交也得不到最新的数据，我们希望浏览器不要缓存XMLHttpRequest方式提交的网页，可以按如下方式进行设定；
此外如果是采用"post"方式提交数据的话，则必须要加上对Content-Type项的声明。*/ 
if (method.toLowerCase() == "get")
  setRequestHeader("If-Modified-Since","0");
else{ 
  objXMLHttp.setRequestHeader("Expires", "Mon, 1 Aug 2005 12:00:00 GMT"); 
  objXMLHttp.setRequestHeader("Last-Modified", new Date().toGMTString().replace(/UTC/,"GMT")); 
  objXMLHttp.setRequestHeader("Cache-Control", "no-cache, must-revalidate"); 
  objXMLHttp.setRequestHeader("Pragma", "no-cache"); 
  objXMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}

objXMLHttp.send(null);  //提交请求
----------------------------------------------------------------------------------------------------------------

Mozilla：
----------------------------------------------------------------------------------------------------------------
//Mozilla浏览器中对XMLHttpRequest对象的操作与IE基本是相同的，只是在利用callback()函数回调结果时稍有区别，下面的代码展示Mozilla中响应onreadystatechange事件的实现方法：
objXMLHttp.onreadystatechange = function ()  //当XMLHttpRequest对象的状态发生改变时，会触发这个事件
{
  if (objXMLHttp.readyState == 4 && (objXMLHttp.status == 200 || objXMLHttp.status == 304))  //判断数据处理是否成功完成
  {
    //这里要注意了，Mozilla浏览器创建的Dom对象并没有loadXML方法，所以这里我们要用程序给它增加一个loadXML方法
    Document.prototype.loadXML = function(strXML,callback) {  //add the loadXML() method to the Document class 
      var objDOMParser = new DOMParser(); //create a DOMParser
      var objDoc = objDOMParser.parseFromString(strXML, "text/xml"); //create new document from string 
      while (this.hasChildNodes()) //make sure to remove all nodes from the document 
        this.removeChild(this.lastChild); 
      for (var i=0; i < objDoc.childNodes.length; i++) { //add the nodes from the new document
        var objImportedNode = this.importNode(objDoc.childNodes[i], true); //import the node
        this.appendChild(objImportedNode); //append the child to the current document
      }
      callback(this);  //回调函数，处理返回的Dom对象
    }
    var doc = document.implementation.createDocument('', '', null); //创建Dom对象
    doc.async = true; //true:异步传输; false:同步传输 
    doc.loadXML(objXMLHttp.responseText,callback); //现在这里就可以像IE中的一样，利用loadXML方法获取XMLHttpRequest对象返回的数据了，先假设callback是一个用来处理返回结果的外部函数
  }
}
----------------------------------------------------------------------------------------------------------------

    到这一步我们已经完成了数据的提交过程，下一步就是开始写callback()函数了，以对提交的结果进行处理；不过在写callback()函数前，我还是有必要对XMLHttpRequest对象的open()方法和send()方法作一下说明。

open()方法：
    open()方法一般只需要3个参数method,url和asyncFlag，method表示提交的方法，可以是"get"或"post"；url就是提交到的页面地址了；asyncFlag是一个布尔型变量，表示传输模式，可以是同步模式，也可以是异步模式，在Ajax应用中一般都要设置为异步模式，这样页面才可以在等待提交结果的同时进行一些其他的下载行为。

send()方法： 
        send()方法只有一个参数content，就是数据内容，如果是采用"get"方式提交，则该参数可以省略，因为"get"方式提交的数据是直接带在url地址后面的所以不需要再在这里设置任何数据内容，但如果是采用"post"方式提交的话，就一定要带参数了，格式为"参数1=值1&参数2=值2&参数3=值3..."，例如send("id=1&type=5&q=abc")，这里本人写了一个能根据页面内容自动生成该参数的函数：

function getAllValue(){
  var elems = document.form1.elements;
  var str = '';
  for(var i=0;i{
    var elem = elems[i];
    if(elem.name!=''){
      if((elem.type.toLowerCase()!='checkbox')&&(elem.type.toLowerCase()!='radio'))
        str+=elem.name+'='+encodeURIComponent(elem.value)+'&';
      else if(elem.checked)
        str+=elem.name+'='+elem.value+'&'; 
    }
  } 
  return str;
}

这样在用"post"方式提交数据时，可以这样写：objXMLHttp.send(getAllValue());

关于callback()函数：
    callback()函数是用来回调提交结果的，当数据提交到某个页面后，返回的结果将以XML格式存储在Dom对象中（当然前提条件是数据接收页面的输出格式为XML），并把该Dom对象作为参数传递给callback()函数，简单的说：callback()函数就是负责解析Dom，提取需要的数据并更新到原页面。关于JavaScript如何操控Dom对象我将在《IE和Mozilla中的Ajax技术开发总结(三)》中作详细描述，这里我先给出一个简单示例：

function callback(Dom){
  var err = Dom.getElementsByTagName("error")[0].firstChild.nodeValue; //获取文档中第一个error节点的内容
  alert(err);
}

下面我将用一个简单的例子来说明应该如何取得提交后的结果，首先假设当前页test.htm有一个请求要发送到a.asp，a.asp页的代码如下：
a.asp:
---------------------------------------------------------
<?xml version="1.0" encoding="gb2312"?>
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<% Response.ContentType = "text/xml; charset=gb2312" %>
<content>
<id>The Id is:<%= Request.form("id") %></id>
<name>The Name is:<%= Request.form("name") %></name>
</content>
---------------------------------------------------------
显然a.asp输出的将是一个XML格式文档，假设test.htm页中的发送请求片段是这样写的：
......
objXMLHttp.open("post", "a.asp", true);
objXMLHttp.send("id=1&name=Janylee");
...
现在我们希望能得到提交结果，那么test.htm页中的callback()函数可以这样写：

function callback(Dom){
  var _id = Dom.getElementsByTagName("id")[0].firstChild.nodeValue; //获取文档中id节点的内容
  var _name = Dom.getElementsByTagName("name")[0].firstChild.nodeValue; //获取文档中name节点的内容
  alert( _id + "/n" + _name );
}

这样，当test.htm发出请求后，就会弹出如下内容(IE)：


OK!从现在开始，你也可以开始创建属于自己的Ajax应用程序了，是不是比较酷呢？下一章《IE和Mozilla中的Ajax技术开发总结(二)》将进一步介绍如何在IE和Mozilla中方便的构建Ajax应用。