zoukankan      html  css  js  c++  java
  • 使用AJAX技术构建更优秀的Web应用程序

    使用AJAX技术构建更优秀的Web应用程序
    2006-08-18 13:18作者:朱先忠编译出处:天极开发责任编辑:方舟
      一、 简介

      异步JavaScript+XML(即Ajax),是一种创建交互式web应用程序的Web开发技术。这种程序使用JavaScript和XML从客户端提交服务器请求,且整个过程中仅需要交换少量的数据而不必提交整个web页面。因此,这样的程序将更快和更具响应性,并将成为新一代客户机-服务器系统的重要基础技术之一。你可以在站点http://www.google.com/webhp?complete=1&hl=en处看到一种良好的AJAX实践技术展示。在此页面中,如果你把任何字母输入到文本框内,那么随后就会出现一个下拉列表框,其中的内容直接来自于服务器而不必提交整个页面。AJAX的核心是XMLHttpRequest对象。客户端能够在后台检索并直接提交XML数据。为了把检索的XML数据转换成可生成的HTML内容,需要依赖于客户端文档对象模型(DOM)读取XML文档结点树并且组成用户看得见的HTML元素。其实,AJAX并非象HTML,DHTML等一样的单一技术,它结合了不同的技术:

      ·XMLHttpRequest对象被使用于与web服务器异步地交换数据。

      ·XML被普遍用作把数据传输回服务器的格式(尽管任何格式都能使用,例如普通文本,HTML等)。

      ·如果使用XML作为转换格式,那么DOM通常与如JavaScript这样的客户端脚本语言一起使用来动态地显示和描述交互信息。

      ·XHTML(或HTML),CSS用于标记和信息格式化。

      二、 XMLHttpRequest对象

      从历史来看,是微软首先在其Internet Explorer 5 for Windows中以一个ActiveX对象形式实现了XMLHttpRequest对象。随后,由Mozilla工程的工程师实现了Mozilla 1.0(和Netscape 7)的一种兼容的本机版本;而稍后,苹果公司在其Safari 1.2上也实现了相同的工作。其实,在W3C标准的文档对象模型(DOM)Level 3加载与存储规范中,也提到了类似的功能。现在,它成为一种事实上的标准,并开始在以后发行的大多数浏览器中得到实现。

      (一) 创建对象

      XMLHttpRequest对象的创建方式因浏览器不同而有所不同。对于Safari和Mozilla来说,其创建方式如下所示:

    var req = new XMLHttpRequest();

      对于Internet Explorer 5.0+(指5.0及更高版本),则要把对象名传递到ActiveX构造函数中:

    var req = new ActiveXObject("Microsoft.XMLHTTP");

      该对象的方法控制所有的操作,而其属性存储从服务器返回的各种数据片断,例如XMLHttpObject.responseText包含从服务器返回的xml或字符串值。

      (二) 方法

      在Windows IE 5.0+、Safari 1.2和Mozila中支持的XMLHttpRequest对象的方法列举如下:

    方法 描述
    abort()  取消当前的请求。如果你在一个不处理请求(readyState 0或4)的对象上调用它,"神秘的事情"发生了。
    getResponseHeader("headerLabel")  返回单个头标签的字符串值
    getAllResponseHeaders() 以一个串形式返回完整的头(标签和值)集合
    open("method","URL"[,asyncFlag[, "userName"[,"password"]]])  指派目标URL、方法及一个悬挂请求的其它可选属性
    send(content) 传输请求。(可选择地)其中可以加入可寄送的字符串或DOM对象数据
    setRequestHeader("label","value")  把一个标签/值对指派给要发送的请求中的头部

      在上面的方法中,open和send方法是最重要的。下面,让我们首先从应用程序的观点来讨论open方法。

    var req;
    ………………………
    req = new ActiveXObject("Microsoft.XMLHTTP");
    ……………
    var url="AjaxServer.aspx?PubID="+ID;
    ……………
    //打开一个到URL的GET请求
    req.open("GET",url,true);
    //实际发送一个空请求
    req.send(null);

      注意

      在这个示例应用程序中,AjaxClient.aspx页面是用户接口,AjaxServer.aspx则负责提供每一个用户请求时的数据。要特别注意的是,AjaxServer.aspx页面不应该包含任何HTML。你可以测试一下如果页面包含HTML将会发生什么。

      open方法的第一个参数(见上面表格中的Open函数)指示当前操作为一个GET操作或是POST操作。在进行简单的数据检索时,一般使用GET。当向外传输的数据包大于512字节且操作包括服务器端活动(如插入,更新等)时,一般使用Post。接下来,我们看一下"url"参数。这个参数可以是一个完整的url也可以是一个相对url。在上面例子中,使用的是相对的url。"asyncFlag"参数指示在执行send方法后是否立即处理到来的脚本(这意味着不必等待是否有响应)。最后两个参数分别是"username"和"password",如果"url"中提供这些数据的话。

      另一个重要的方法是send方法,它实际上使用一个消息体发送请求。对于本例而言,它只是发送一个空请求。

    [
    //实际发送一个空请求
    req.send(null);
    ]

      (三) 属性

    属性 描述
    onreadystatechange 每当状态改变时激发的事件的事件处理器。其中,readyState对象状态整数含义如下:0=uninitialized1=loading2=loaded3=interactive4=complete
    responseText 经服务器处理后返回的数据的字符串版本
    responseXML 经服务器处理后返回的DOM兼容的数据文档对象
    status 由服务器返回的数字代码,例如404代表"Not Found",200代表"OK"
    statusText 伴随着状态代码的字符串信息

      在此,应用程序中使用了onreadystatechange:

    //这是事件处理器机制;在本例中,"RequestProcessor"即是事件处理器。
    req.onreadystatechange=RequestProcessor;

      对于这个应用程序来说,"RequestProcessor"是客户端的事件处理器。现在,在事件处理器内,使用readyState属性来获得各种状态。值4显示已经完成某种处理。现在,在处理结果前,你应该检查状态或statusText以决定操作成功与否。在这个应用程序中,我是以下面方式实现的:

    function RequestProcessor()
    {
     //如果readyState处理"Ready"状态
     if(req.readyState == 4)
     {
      //返回的状态代码200意味着一切顺利
      if(req.status == 200)
      {
       //如果responseText不空
       //req.responseText实际上是一个由AJAXServer.aspx的"Response.Write("" + sbXML.ToString() + "");"方法编写的字符串
       if(req.responseText != "")
       {
        populateList(req.responseXML);
       }
       else
       {
        clearSelect(publishedBooks);
       }
      }
     }
     return true;
    }

      注意 对象req被声明为一个页面级的变量:

    var req = new ActiveXObject("Microsoft.XMLHTTP");

      警告

      请求目的的url必须与客户端脚本处于同一个域中。原因是,XMLHttpRequest对象采用与客户端脚本一致的封装技术。在大多数支持这种功能的浏览器上,拥有存取XMLHttpRequest对象的脚本的页面都需要使用http:协议检索。这意味着,你无法在一个本地硬盘上(file:协议)进行页面测试。

  • 相关阅读:
    C#字符串(截取)
    字符串的截取(从指定位置)
    UVALive 7146 Defeat the Enemy(贪心+STL)(2014 Asia Shanghai Regional Contest)
    UVALive 7148 LRIP(树的分治+STL)(2014 Asia Shanghai Regional Contest)
    Google Code Jam Round 1A 2015 解题报告
    编程之美2015资格赛 解题报告
    ZOJ 3781 Paint the Grid Reloaded(BFS)
    【转】赞一下huicpc035
    【转】lonekight@xmu·ACM/ICPC 回忆录
    【转】[退役]纪念我的ACM——headacher@XDU
  • 原文地址:https://www.cnblogs.com/yellowapplemylove/p/2021595.html
Copyright © 2011-2022 走看看