正在加载……
Ajax程序设计入门
Posted in LAMP on March 22, 2006 / 评论(0) »
一、使用Ajax的主要原因  

  1、通过适当的Ajax应用达到更好的用户体验;

  2、把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。

  二、引用

  Ajax这个概James Garrett认为:  

  Ajax是Asynchronous JavaScript and XML的缩写。

  Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用,它包括:

  ·使用XHTML和CSS标准化呈现;
  ·使用DOM实现动态显示和交互;
  ·使用XML和XSLT进行数据交换与处理;
  ·使用XMLHttpRequest进行异步数据读取;
  ·最后用JavaScript绑定和处理所有数据;

  Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

  三、概述

  虽然Garrent列出了7条Ajax的构成技术,但个人认为,所谓的Ajax其核心只有JavaScript、  XMLHTTPRequest和DOM,如果所用数据格式为XML的话,还可以再加上XML这一项(Ajax从服务器端返回的数据可以是XML格式,也可以是文本等其他格式)。

  在旧的交互方式中,由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的  HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。

  而使用Ajax后用户从感觉上几乎所有的操作都会很快响应没有页面重载(白屏)的等待。

  1、XMLHTTPRequest

  Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于  XMLHTTP组件XMLHTTPRequest对象。这样就可以向再发桌面应用程序只同服务器进行数据层面的交换,而不用每次都刷新界面也不用每次将数据处理的工作提交给服务器来做,这样即减轻了服务器的负担又加快了响应速度、缩短了用户等候时间。

  最早应用XMLHTTP的是微软,IE(IE5以上)通过允许开发人员在Web页面内部使用XMLHTTP  ActiveX组件扩展自身的功能,开发人员可以不用从当前的Web页面导航而直接传输数据到服务器上或者从服务器取数据。这个功能是很重要的,因为它帮助减少了无状态连接的痛苦,它还可以排除下载冗余HTML的需要,从而提高进程的速度。Mozilla(Mozilla1.0以上及NetScape7以上)做出的回应是创建它自己的继承XML代理类:XMLHttpRequest类。Konqueror  (和Safari v1.2,同样也是基于KHTML的浏览器)也支持XMLHttpRequest对象,而Opera也将在其v7.6x+以后的版本中支持  XMLHttpRequest对象。对于大多数情况,XMLHttpRequest对象和XMLHTTP组件很相似,方法和属性也类似,只是有一小部分属性不支持。

  XMLHttpRequest的应用:

  ·XMLHttpRequest对象在JS中的应用

var  xmlhttp = new XMLHttpRequest();

  ·微软的XMLHTTP组件在JS中的应用

var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
var  xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);
XMLHttpRequest 对象方法
/**
*  Cross-browser XMLHttpRequest instantiation.
*/

if (typeof XMLHttpRequest == ’undefined’)  {
 XMLHttpRequest = function () {
  var msxmls = [’MSXML3’, ’MSXML2’,  ’Microsoft’]
  for (var i=0; i < msxmls.length; i++) {
   try  {
    return new ActiveXObject(msxmls[i]+’.XMLHTTP’)
   } catch (e) {  }
  }
  throw new Error(\"No XML component  installed!\")
 }
}
function createXMLHttpRequest() {
 try {
  //  Attempt to create it \"the Mozilla way\"
  if (window.XMLHttpRequest)  {
   return new XMLHttpRequest();
  }
  // Guess not - now the IE  way
  if (window.ActiveXObject) {
   return new  ActiveXObject(getXMLPrefix() + \".XmlHttp\");
  }
 }
 catch (ex)  {}
 return false;
};

  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  服务器进程返回数据的兼容DOM的XML文档对象
 status  服务器返回的状态码, 如:404 = \"文件末找到\" 、200 =\"成功\"
 statusText  服务器返回的状态文本信息

    2、JavaScript

  JavaScript是一在浏览器中大量使用的编程语言,,他以前一直被贬低为一门糟糕的语言(他确实在使用上比较枯燥),以在常被用来作一些用来炫耀的小玩意和恶作剧或是单调琐碎的表单验证。但事实是,他是一门真正的编程语言,有着自已的标准并在各种浏览器中被广泛支持。

  3、DOM

  Document Object Model。

  DOM是给 HTML 和 XML 文件使用的一组 API。它提供了文件的结构表述,让你可以改变其中的內容及可见物。其本质是建立网页与 Script  或程序语言沟通的桥梁。

  所有WEB开发人员可操作及建立文件的属性、方法及事件都以对象来展现(例如,document 就代表“文件本身“这个对像,table 对象则代表  HTML 的表格对象等等)。这些对象可以由当今大多数的浏览器以 Script 来取用。

  一个用HTML或XHTML构建的网页也可以看作是一组结构化的数据,这些数据被封在DOM(Document Object  Model)中,DOM提供了网页中各个对象的读写的支持。

  4、XML

  可扩展的标记语言(Extensible Markup  Language)具有一种开放的、可扩展的、可自描述的语言结构,它已经成为网上数据和文档传输的标准。它是用来描述数据结构的一种语言,就正如他的名字一样。他使对某些结构化数据的定义更加容易,并且可以通过他和其他应用程序交换数据。

 

  5、综合

  Jesse James  Garrett提到的Ajax引擎,实际上是一个比较复杂的JavaScript应用程序,用来处理用户请求,读写服务器和更改DOM内容。

  JavaScript的Ajax引擎读取信息,并且互动地重写DOM,这使网页能无缝化重构,也就是在页面已经下载完毕后改变页面内容,这是我们一直在通过JavaScript和DOM在广泛使用的方法,但要使网页真正动态起来,不仅要内部的互动,还需要从外部获取数据,在以前,我们是让用户来输入数据并通过DOM来改变网页内容的,但现在,XMLHTTPRequest,可以让我们在不重载页面的情况下读写服务器上的数据,使用户的输入达到最少。

  基于XML的网络通讯也并不是新事物,实际上FLASH和JAVA Applet都有不错的表现

分页: 1/1 第一页 1 最后页 [ 显示模式: 摘要 | 列表 ]