首页导航栏 - 网络工程 | 网站建设 | 设计在线 | 精彩图片 | 职业前线 | 创业之路 | 启步工具 | 教程资讯 | 休闲娱乐
启步网 > 网站建设 > 网站编程
AJAX 上手篇
作者: 不详 阅读: 来源:互连网 时间:2007-1-3 17:42:52
字体
  本文来源:ajaxw3c.com 。简介:ajax联盟-web 2.0,Ajax技术资源中心,WEB标准教程及推广,网站重构,Javascript,CSS,XML,XHTML+CSS,CSS布局,DIV+CSS
 
这篇文章说明 AJAX 相关技术的基础,并提供实例供您上手。

第一步 – 说声「请」 (又称为「怎么发出 XMLHttpRequest」)

为了用 JavaScript 对服务器发送 HTTP 要求,你必须先以相关的类别(class)制出实体(instance)。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");
}

(由于这段程序仅供说明,所以是采最简方式写出。本文第三步中有另一种我们比较常用的写法。)

有些版本的 Mozilla 浏览器在服务器送回的数据未含 XML mime-type 文件头(header)时会出错。为了避免这个问题,你可以用下列方法覆写服务器传回的档头,以免传回的不是 text/xml。

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

接下来是要决定服务器传回资料后的处理方式,此时你只要以 onreadystatechange 这个属性指明要处理传回值的 JavaScript 函式名称即可,例如:

http_request.onreadystatechange = nameOfTheFunction;

注意,指定的函式名称后不加括号也没有参数。除了指定函式名称外,你也能用 Javascript 实时定义函式的方法来定一个新的处理函式,如下:

http_request.onreadystatechange = function(){
// 做些事
};

决定处理方式之后你得确实发出 request,此时需叫用 HTTP request 类别的 open() 及 send() 方法,如下:

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

* open() 的第一个参数是 HTTP request 的方法,也就是从 GET、POST、HEAD 中择一使用,亦可用你主机上支持的方式。为遵循 HTTP 标准,请记得这些方法都是大写,不然有的浏览器(如 Firefox)或许不会理你。其它 HTTP request 可以支持的方法列表请参考 W3C 规格书 (http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html)。
* 第二个参数是目标 URL。基于安全考虑,你不能叫用同网域以外的网页。如果网域不同,则叫用 open() 时会出现「权限不足,拒绝存取」那类的错误。通常大伙会犯的错误多为在 domain.tld 网的网站下呼叫 www.domain.tld 中的网页,仅是一点点差别都不行。
* 第三个参数决定此 request 是否不同步进行,如果设定为 TRUE 则即使服务器尚未传回数据也会继续执行其余的程序,这也就是 AJAX 中第一个 A 代表的意义。

send() 的参数在以 POST 发出 request 时可以是任何想传给服务器的东西,而数据则以查询字符串的方式列出,例如:

name=value&anothername=othervalue&so=on

不过如果你想要以 POST 方式传送数据,则必须先将 MIME 型态改好,如下:

http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

否则服务器就不会理你传过来的数据了。

第二步 – 「就上咩!」(又称为「处理服务器传回的数据」)

传出 request 时必须提供处理传回值的函式名称。

http_request.onreadystatechange = nameOfTheFunction;

那么来看看这个函式该做些什么。首先,它必须检查 request 目前的状态:如果状态值为 4 代表服务器已经传回所有信息了,便可以开始解析所得信息。

if (http_request.readyState == 4) {
// 一切 ok, 继续解析
} else {
// 还没完成
}

readyState 所有可能的值如下:

* 0 (还没开始)
* 1 (读取中)
* 2 (已读取)
* 3 (信息交换中)
* 4 (一切完成)

接下来要检查服务器传回的 HTTP 状态码。所有状态码列表可于 W3C 网站 上查到,但我们要管的是 200 OK 这种状态。

if (http_request.status == 200) {
// 万事具备
} else {
// 似乎有点问题,或许服务器传回了 404 (查无此页) 或者 500 (内部错误) 什么的
}

检查传回的 HTTP 状态码后,要怎么处理传回的数据就由你决定了。有两种存取数据的方式:

* http_request.responseText – 这样会把传回值当字符串用
* http_request.responseXML – 这样会把传回值视为 XMLDocument 对象,而后可用 JavaScript DOM 相关函式处理

[1] [2] 下一页

责任编辑:一路狂奔
帐号:
密码:

Google
Google提供的相关资源
参与评论(条评论)
请遵守国家法律
笔名:
邮箱:
( 以上评论仅代表网友个人意见,不代表本站观点 )
相关资源
  • Web页面托拽 JavaScript Drag Demo 实例 [2007-1-28]
  • JavaScript Google IG Drag Demo [2007-1-28]
  • 怎么用javascript进行拖拽 [2007-1-28]
  • GOOGLE个性主页-页面元素拖拽实例系列(二) [2007-1-28]
  • Web页面元素拖拽实例系列—专题篇 [2007-1-28]
  • GOOGLE个性主页-页面元素拖拽实例系列(一) [2007-1-28]
  • 类似Google个性化主页,实现Web桌面托拽的实例 [2007-1-28]
  • 千万数量级分页存储过程实例 [2007-1-28]
  • 自己开发的自定义分页控件 [2007-1-28]
  • JS+ASP打造无刷新新闻列表 [2007-1-26]
  •