AJAX解惑篇

Start AJAX
最近开始研究AJAX[Asynchronous JavaScript and XML]，很幸运google到了这篇发表在Devmo上的AJAX: Getting Started。现把这篇简洁易懂的文章翻译如下，与大家共享，希望能对大家有所帮助！

这篇文章会使你对AJAX有一个基本了解，并给出两个容易上手的例子。

目录

什么是AJAX？
第一步：如何发出一个HTTP请求
第二步：处理服务器的响应
第三步：一个简单的例子
第四步：与XML响应协同工作

什么是AJAX
AJAX是一个新的合成术语，隐含了两个已经存在多年的JavaScript特性，但是直到最近，随着一些诸如Gmail、Google Suggest以及Google Maps的轰动，才被许多网络开发者所注意到。

我们所讨论的两个JavaScript的特性是你能够：

向服务器发出请求而不需重新加载任何页面
解析XML文档并且与之协同工作

AJAX是一个缩写，A是指"asynchronous"（异步的），它表示你可以在向服务器发出一个HTTP请求后，边做其他的事情，边等待服务器的响应。JA表示"JavaScript"，X表示"XML"（可扩展标记语言）。

第一步：如何发出一个HTTP请求
为了用JavaScript向服务器发出一个HTTP请求，你需要一个类的实例来提供给你这种功能。这个类原本在IE里被作为一个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实例的简单版本，实际使用时的例子请参见本文的第三步）

如果服务器端的响应中没有包含XML的mime-type报头（header），有些版本的Mozilla浏览器可能不会处理。所以，为了安全起见，你可以用一个特殊的方法来给服务器端发出的响应强加上这个报头，以防其不是text/xml类型。

http_request = new XMLHttpRequest();http_request.overrideMimeType('text/xml');
下一步就是你来决定在服务器对你的请求作出响应后，你准备做什么。这一阶段，你只需要告诉HTTP请求对象（HTTP request object）用哪一个JavaScript函数来处理这一响应。这一步用设置该对象onreadystatechange属性为相应的JavaScript函数名来实现：

http_request.onreadystatechange = nameOfTheFunction;
注意，在函数名后面没有括号。另外如下定义处理响应的函数：

http_request.onreadystatechange = function(){ // 处理响应};
接下来，既然你已经声明了在接到响应后干什么，你就需要去发出请求。你需要调用HTTP请求类的open()和send()方法：

http_request.open('GET', 'http://www.example.org/some.file', true);http_request.send(null);open()方法的第一个参数是HTTP请求的方式——GET、POST、HEAD或者任何其它你想使用的，你的服务器支持的方式。方式的名称要大写，否则有些浏览器（如Firefox）可能就不会处理请求。可以去 W3C specs获取更多的你可以使用的HTTP请求方式的信息。
第二个参数是你所请求页面的URL。
第三个参数是用来设置请求是否为异步的。如果是TRUE，则在服务器尚未返回响应的时候，JavaScript的函数会继续执行。这也就是AJAX中的A的含义。

send()方法的参数可以使任何你希望传递给服务器的数据，数据应该为如下格式的查询串：

name=value&anothername=othervalue&so=on
第二步：处理服务器响应
记住，当你向服务器发出了一个请求，你也就发出了一个被设计用来处理响应的JavaScript函数的名字。

http_request.onreadystatechange = nameOfTheFunction;

asp.net中文俱乐部-.net开发者世界

AJAX解惑篇

TAG

Tags

精华推荐

精品下载

asp.net中文俱乐部