当前位置: 首页 > 图文教程 > 网络编程 > AJAX技术 > 使用AJAX技术构建更优秀的Web应用程序

AJAX技术
自己动手封装的 ajax
Ajax 对象 包含post和get两种异步传输方式
Ajax 超时检查脚本
AJAX 简介及入门实例
ajax 开发守则 10条说明
Ajax 返回字符串的过滤实现代码
Ajax 程序开发中常见问题
AJAX 验证框架13个
ajax 入门基础之 XMLHttpRequest对象总结
基于AJAX的分页类实现代码
如何在Asp.net中使用HtmlArea编辑器
使用 jQuery 简化 Ajax 开发
ASP.NET 与 Ajax 的实现方式
AJAX技术介绍
Ajax程序设计入门
学习Ajax教程,详细了解Get与Post
关于Ajax responseText 的一点阐述
ajax中文乱码解决方法
AJAX中文问题总结
AJAX无刷新更新数据

使用AJAX技术构建更优秀的Web应用程序


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-03   浏览: 84 ::
收藏到网摘: n/a

 一、 简介

  异步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方法的第一个参数(见