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

彩虹妹妹great

彩虹妹妹great

2016-01-29 11:22

使用AJAX技术构建更优秀的Web应用程序,使用AJAX技术构建更优秀的Web应用程序
 一、 简介

  异步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方法的第一个参数(见
展开更多 50%)
分享

猜你喜欢

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

电脑网络
使用AJAX技术构建更优秀的Web应用程序

如何使用Ajax技术开发Web应用程序(2)

Web开发
如何使用Ajax技术开发Web应用程序(2)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

如何使用Ajax技术开发Web应用程序(3)

Web开发
如何使用Ajax技术开发Web应用程序(3)

如何使用Ajax技术开发Web应用程序(1)

Web开发
如何使用Ajax技术开发Web应用程序(1)

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

如何使用Ajax技术开发Web应用程序(3)

Web开发
如何使用Ajax技术开发Web应用程序(3)

如何使用Ajax开发Web应用程序

Web开发
如何使用Ajax开发Web应用程序

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

基于PHP和AJAX创建RSS聚合器

基于PHP和AJAX创建RSS聚合器

PSV《生化危机 启示录2》隐形虫打法解析

PSV《生化危机 启示录2》隐形虫打法解析
下拉加载更多内容 ↓