使用ajax技术构建更优秀的web应用程序

《使用ajax技术构建更优秀的web应用程序》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、你可以在站点http://www.google.com/webhp?complete=1&hl=en处看到一种良好的AJAX实践技术展示。在此页面中，如果你把任何字母输入到文本框内，那么随后就会出现一个下拉列表框，其中的内容直接来自于服务器而不必提交整个页面。AJAX的核心是XMLHttpRequest对象。客户端能够在后台检索并直接提交XML数据。为了把检索的XML数据转换成可生成的HTML内容，需要依赖于客户端文档对象模型(DOM)读取XML文档结点树并且组成用户看得见的HTML元素。其实，AJ

2、AX并非象HTML，DHTML等一样的单一技术，它结合了不同的技术：　　·XMLHttpRequest对象被使用于与web服务器异步地交换数据。　　·XML被普遍用作把数据传输回服务器的格式（尽管任何格式都能使用，例如普通文本，HTML等）。　　·如果使用XML作为转换格式，那么DOM通常与如JavaScript这样的客户端脚本语言一起使用来动态地显示和描述交互信息。　　·XHTML(或HTML)，CSS用于标记和信息格式化。　　二、XMLHttpRequest对象　　从历史来看，是微软首先在其In

3、ternetExplorer5forWindows中以一个ActiveX对象形式实现了XMLHttpRequest对象。随后，由Mozilla工程的工程师实现了Mozilla1.0（和Netscape7）的一种兼容的本机版本；而稍后，苹果公司在其Safari1.2上也实现了相同的工作。其实，在W3C标准的文档对象模型（DOM）Level3加载与存储规范中，也提到了类似的功能。现在，它成为一种事实上的标准，并开始在以后发行的大多数浏览器中得到实现。　　(一)创建对象　　XMLHttpRequest对象

4、的创建方式因浏览器不同而有所不同。对于Safari和Mozilla来说，其创建方式如下所示：varreq=newXMLHttpRequest();　　对于InternetExplorer5.0＋（指5.0及更高版本），则要把对象名传递到ActiveX构造函数中：varreq=newActiveXObject("Microsoft.XMLHTTP");　　该对象的方法控制所有的操作，而其属性存储从服务器返回的各种数据片断，例如XMLHttpObject.responseText包含从服务器返回的xml

5、或字符串值。　　(二)方法　　在WindowsIE5.0＋、Safari1.2和Mozila中支持的XMLHttpRequest对象的方法列举如下：方法描述abort()取消当前的请求。如果你在一个不处理请求(readyState0或4)的对象上调用它，"神秘的事情"发生了。getResponseHeader("headerLabel")返回单个头标签的字符串值getAllResponseHeaders()以一个串形式返回完整的头(标签和值)集合open("method"，"URL"[，asyncF

6、lag[，"userName"[，"password"]]])指派目标URL、方法及一个悬挂请求的其它可选属性send(content)传输请求。（可选择地）其中可以加入可寄送的字符串或DOM对象数据setRequestHeader("label"，"value")把一个标签/值对指派给要发送的请求中的头部　　在上面的方法中，open和send方法是最重要的。下面，让我们首先从应用程序的观点来讨论open方法。varreq;………………………req=newActiveXObject("Microso

7、ft.XMLHTTP");……………varurl="AjaxServer.aspx?PubID="+ID;……………//打开一个到URL的GET请求req.open("GET"，url，true);//实际发送一个空请求req.send(null);　　注意　　在这个示例应用程序中，AjaxClient.aspx页面是用户接口，AjaxServer.aspx则负责提供每一个用户请求时的数据。要特别注意的是，AjaxServer.aspx页面不应该包含任何HTML。你可以测试一下如果页面包含HTML将

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