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

原创 2006年02月08日 17:50:00

        前段时间在公司做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

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

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应用。

相关文章推荐

Ajax: IE and Mozilla Errors you need to know about

If you are logging clientside errors, your may see two errors show up with Ajax applications. The fi...

Chrome插件技术开发总结

这也是一个总结贴,关于最近一个月来利用空余时间写的Chrome插件的方方面面。 12月初第一个周六上午在浏览豆瓣时心血来潮想写Chrome插件,在初略的读了下Chrome插件的开发文档的gettin...

最新的移动技术开发五大要点总结

1. 双手指滑动事件: // 双手指滑动事件 XML/HTML code ? 1 2 3 4 5 6 7 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:IE和Mozilla中的Ajax技术开发总结(一)
举报原因:
原因补充:

(最多只允许输入30个字)