技术新知:AJAX基础教程

ajax|基础教程

    什么是 AJAX?

  AJAX (异步 JavaScript 和 XML) 是个新产生的术语,专为描述JavaScript的两项强大性能.这两项性能在多年来一直被网络开发者所忽略,直到最近Gmail, Google suggest和google Maps的横空出世才使人们开始意识到其重要性.

  这两项被忽视的性能是:

     * 无需重新装载整个页面便能向服务器发送请求.
     * 对XML文档的解析和处理.

  步骤 1 – "请!" --- 如何发送一个HTTP请求

  为了用JavaScript向服务器发送一个HTTP请求, 需要一个具备这种功能的类实例.

  这样的类首先由Internet Explorer以ActiveX对象引入, 被称为XMLHTTP. 后来Mozilla, Safari 和其他浏览器纷纷仿效, 提供了XMLHttpRequest类,它支持微软的ActiveX对象所提供的方法和属性.

  因此, 为了创建一个跨浏览器的这样的类实例(对象), 可以应用如下代码:
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

  (上例对代码做了一定简化,这是为了解释如何创建XMLHTTP类实例. 实际的代码实例可参阅本篇步骤3.)

  如果服务器的响应没有XML mime-type header,某些Mozilla浏览器可能无法正常工作. 为了解决这个问题, 如果服务器响应的header不是text/xml,可以调用其它方法修改该header.

http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');

  接下来要决定当收到服务器的响应后,需要做什么.这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应.可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名,如下所示:

http_request.onreadystatechange = nameOfTheFunction;

  注意:在函数名后没有括号,也无需传递参数.另外还有一种方法,可以在扉页(fly)中定义函数及其对响应要采取的行为,如下所示:

http_request.onreadystatechange = function(){
    // do the thing
};

  在定义了如何处理响应后,就要发送请求了.可以调用HTTP请求类的open()和send()方法, 如下所示:

http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null);

    * open()的第一个参数是HTTP请求方式 – GET, POST, HEAD 或任何服务器所支持的您想调用的方式. 按照HTTP规范,该参数要大写;否则,某些浏览器(如Firefox)可能无法处理请求.有关HTTP请求方法的详细信息可参考http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html W3C specs

    * 第二个参数是请求页面的URL.由于自身安全特性的限制,该页面不能为第三方域名的页面.同时一定要保证在所有的页面中都使用准确的域名,否则调用open()会得到"permission denied"的错误提示.一个常见的错误是访问站点时使用domain.tld,而当请求页面时,却使用www.domain.tld.

    * 第三个参数设置请求是否为异步模式.如果是TRUE, JavaScript函数将继续执行,而不等待服务器响应.这就是"AJAX"中的"A".

  如果第一个参数是"POST",send()方法的参数可以是任何想送给服务器的数据. 这时数据要以字符串的形式送给服务器,如下所示:

name=value&anothername=othervalue&so=on

  步骤 2 – "收到!" --- 处理服务器的响应

  当发送请求时,要提供指定处理响应的JavaScript函数名.

http_request.onreadystatechange = nameOfTheFunction;

  我们来看看这个函数的功能是什么.首先函数会检查请求的状态.如果状态值是4,就意味着一个完整的服务器响应已经收到了,您将可以处理该响应.

if (http_request.readyState == 4) {
    // everything is good, the response is received
} else {
    // still not ready
}

  readyState的取值如下:

    * 0 (未初始化)
    * 1 (正在装载)
    * 2 (装载完毕)
    * 3 (交互中)
    * 4 (完成)

(Source)

  接着,函数会检查HTTP服务器响应的状态值. 完整的状态取值可参见 W3C site. 我们着重看值为200 OK的响应.

if (http_request.status == 200) {
    // perfect!
} else {
    // there was a problem with the request,
    // for example the response may be a 404 (Not Found)
    // or 500 (Internal Server Error) response codes
}

  在检查完请求的状态值和响应的HTTP状态值后, 您就可以处理从服务器得到的数据了.有两种方式可以得到这些数据:

    * http_request.responseText – 以文本字符串的方式返回服务器的响应
    * http_request.responseXML –

  以XMLDocument对象方式返回响应.处理XMLDocument对象可以用JavaScript DOM函数

[1] [2] 下一页  

时间: 2024-05-07 06:55:06

技术新知:AJAX基础教程的相关文章

Ajax基础教程(4)- 实现基本Ajax技术 4.9 小结

本章我们提供了许多例子,展示了应用Ajax技术改善用户体验的方法.在许多情况下,可以把Ajax技术应用到现有的应用中,以Ajax请求取代完全页面刷新,从而与服务器无缝地通信,并更新页面内容.用户可能不会注意到在以另外一种方式完成应用,但是过一段时间之后,他们就会认识到应用变得"更好"了.Ajax技术也可以在开始设计新Web应用时就采用.现在,Ajax工具包应该在你的开发工具箱里有一席之地了,这些工具能帮助你构建更好的Web应用,而且与胖客户应用的表现不相上下,这会让最终用户欣喜万分.

Ajax基础教程(1)-Ajax简介 1.5 相关技术

当你看到本书时,可能已经了解了在应用中实现Ajax所需的大多数技术.重申一句,我们想强调的是,Ajax是一个客户端技术,不论你现在使用何种服务器端技术,都能使用Ajax,而不管使用的是Java..NET.Ruby.PHP还是CGI.实际上,在这本书中我们并不考虑服务器端,而且假设你已经很清楚如何结合日常工作中使用的服务器端技术.在后面的几百页中,我们强调的重点是客户端技术和方法,创建丰富的基于浏览器的应用时需要用到这些技术. 尽管可以使用你喜欢的任何服务器端技术,但当使用Ajax时还是需要转变一

什么叫Ajax?(Ajax基础教程)

ajax|基础教程 由于在研究web即时通技术(TRACQ,网眼,网站商务通),所以对Ajax感兴趣起来,最近好像Ajax很火,从搜索引擎的结果可见一斑.baidu找到181,000篇相关文档,google找到了6,790,000篇.我觉得,在没有提出Ajax这个概念以前,肯定有人已经在利用这些技术做事情了,只是在最近才被炒的热闹起来.我先把网上找的资料整理在这里. 1.定义 Ajax最早是由Jesse James Garrett提出来的,原文:Ajax: A New Approach to W

Ajax与《Ajax基础教程》

ajax|基础教程 <Ajax基础教程>是国际上第一部有关Ajax的图书.其中文版也是国内首部Ajax图书,即将由人民邮电出版社推出. <Ajax基础教程>图灵程序设计丛书 (美)Ryan Asleson Nathaniel T.Schutta著金灵等译 人民邮电出版社2006年1月 定价:35元 Ajax,Ajax,Ajax!请不要弄错了,我说的不是希腊史诗中的英雄,也不是那支享誉全球的梦幻荷兰足球俱乐部,更不是加拿大的某个地名.去问问身边的技术追新族,他会一脸不屑地告诉你:连A

Ajax基础教程

ajax|基础教程 AJAX (异步 JavaScript 和 XML) 是个新产生的术语,专为描述JavaScript的两项强大性能.这两项性能在多年来一直被网络开发者所忽略,直到最近Gmail, Google suggest和google Maps的横空出世才使人们开始意识到其重要性.  这两项被忽视的性能是:  • 无需重新装载整个页面便能向服务器发送请求.  • 对XML文档的解析和处理. 步骤 1 – "请!" --- 如何发送一个HTTP请求 为了用JavaScript向服

Ajax基础教程(5)- 构建完备的Ajax开发工具箱 5.7 小结

本章我们介绍了一些工具和技术,采用这些工具和技术,会让你的开发过程更加愉快.JSDoc可以帮助建立JavaScript代码的文档,从而使其他开发人员能够更容易地理解和使用代码.如果你开始经常使用Ajax技术,肯定会编写一些你自己可重用的JavaScript库,而且会用JSDoc为代码建立文档,以便其他人更轻松地使用这些库. HTML Validator和Checky等工具可以帮助你确保所写的HTML代码是合法的HTML.不合法的HTML会导致未预见的行为,所以使用合法的HTML或XHTML能消除

Ajax基础教程(5)- 5.3 使用DOM Inspector搜索节点

3 使用DOM Inspector搜索节点 在Mozilla Suite和Firefox浏览器中打包了一个DOM Inspector工具.如果利用DOM Inspector,则可以查看Web页面的结构化表示,甚至能搜索某些特定的节点,并自动更新DOM中的节点.在Firefox中,你可以通过Tools菜单项来访问DOM Inspector.要使用DOM Inspector来检查一个Web页面,需要在文本框中输入所需的URL,并点击Inspect框:或者也可以从File→Inspect a Wind

Ajax基础教程(3)- 3.3 小结

本章介绍了XMLHttpRequest对象与服务器之间相互通信的各种方法.XMLHttpRequest对象可以使用HTTP GET或POST方法发送请求,请求数据可以作为查询串.XML或JSON数据发送.处理请求之后,服务器一般会发送简单文本.XML数据甚至JSON数据作为响应.每个格式都有自己最适用的场合. 如果不能根据请求的结果动态更新页面的内容,Ajax就没有多大的用处.当前的浏览器都把Web页面的内容提供为一个遵循W3C DOM标准的对象模型.基于这个对象模型,就可以使用JavaScri

Ajax基础教程(2)-使用XMLHttpRequest对象 2.9 小结

尽管Ajax风格的技术已经用了很多年,但直到最近XMLHttpRequest对象才得到现代浏览器的采纳,而这也为开发丰富的Web应用开启了一个新的时代.在本章中,我们讨论了Ajax核心(即XMLHttpRequest对象)的相关基础知识.我们了解了XMLHttpRequest对象的方法和属性,而且展示了使用XMLHttpRequest对象的简单示例.可以看到,这个对象相当简单,无需你考虑其中很多的复杂性.适当地使用JavaScript,再加上基本的DOM管理,Ajax可以提供高度的交互性,而这在