Start AJAX

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;

我们来看看这个函数都应该做些什么。首先,其需要检查请求的状态,如果状态的值为4,那么就意味着全部的服务器响应都已接受完毕,你可以继续来处理了。

if (http_request.readyState == 4) { // 一切就绪,相映已接受完成} else { //尚未就绪}readyState全部值的列表如下:
0(未初始化/uninitialized)
1(正在加载/loading)
2(加载完毕/loaded)
3(交互/interactive)
4(完成/complete)
下一步是检查HTTP服务器响应的情况代码。所有可能的代码都被列在了W3C的网站上。目前,我们只对200 OK响应感兴趣。
if (http_request.status == 200) { // 棒极了!}
else { // 请求出了些问题, // 比如响应可能是404(Not Found),未找到 // 或者500,内部服务器错误}
在你检查完请求的状态和HTTP响应情况后,你就可以自己决定对服务器发送给你的数据作什么样的处理了。你有两种途径来访问这些数据:
http_request.responseText将会把服务器的响应作为一个文本串返回
http_request.responseXML将把响应作为一个XMLDocument对象返回,你可以用JavaScript的文档对象模型(DOM)的函数来处理
第三步:一个简单的例子
我现在来做一个简单的HTTP请求。我们的JavaScript脚本将会请求一个HTML文档,test.html,其包含了一段文本——“这是一个测试。”——然后我们会alert() test.html的内容。

<script type="text/javascript" language="javascript">
var http_request = false;
function makeRequest(url) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if(http_request.overrideMimeType){
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Giving up Cannot create an XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open('GET', url, true);
http_request.send(null);
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
</script>
<span style="cursor: pointer; text-decoration: underline" > 发出请求</span>在这个例子中:

用户在浏览器里点击“发出请求”(make a request);
这会调用makeRequest()函数,并且附有参数test.html,一个自阿同一目录下的HTML文档的名字。
请求被发出,然后(onreadystatechange)操作被传递给alertContents();
alertContents()检查响应是否被接收和是否状态为“OK”,然后alert() test.html文件的内容。

你可以在这里测试这个例子,并且可以在这里看见测试文件。

第四步:与XML响应协同工作
在上个例子中,在HTTP响应被接收完毕后,我们和使用了请求对象的responseText属性,其包含了test.html文件的内容。现在,让我们试试responseXML属性。

让我们现在就创建一个有效的XML文档,这个文档稍后会被我们请求。文档(test.xml)包括:
<?xml version="1.0" encoding="utf-8" ?>
<root>
这是个测试.
</root>
我们只需要在脚本中用下面的内容替换请就行:
...
>
...
然后在alertContents()里把alert(http_request.responseText);替换成如下代码段:
var xmldoc= http_request.responseXML;
var root_node = xmldoc.getElementsByTagName('root').item(0);
alert(root_node.firstChild.data);
这样,我们获取了responseXML中的XMLDocument对象,并且用DOM方法来访问了XML文档中所包含的某些内容。你可以在这里浏览到test.xml,更新后的脚本可以在这里得到。

可以去Mozilla's DOM implementation获取更多的DOM方法。

Tags: AJAX, XML, JavaScript, 翻译, 研究,

时间: 2024-10-31 08:40:38

Start AJAX的相关文章

Ajax 提交表单数据到入库的全盘操作流程

 以下是Ajax 提交表单数据到入库的全盘操作流程,希望本文对广大php开发者有所帮助,感谢阅读本文 *******php项目中当我们要对数据库进行写入操作时,有时会因为代码没有做防sql注入工作,导致各种不可预知的错误*******    1,index.htm 这是一个很简单的注册页面l 我这是以ajax形式提交数据   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt

ajax浏览器兼容的问题探讨

 ajax浏览器兼容的问题一直都是同学们多烦恼的,下面有个不错的示例大家可以参考下,希望对大家有所帮助  代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xht

ajax同步异步的简单实现

本文为大家介绍下ajax同步异步的简单实现,感兴趣的朋友可以参考下 复制代码 代码如下: $("#btn_saveFWSB").click(function(){  var obj=checkData(arr);  if(obj.flag==true){  hideAddDiv();  $.ajax({  type : "POST",  url : "/vts/doInsertFWZT.do",  async: false ,//ajax同步 

$.ajax传JSON数据到后台出现报错问题解决

 $.ajax传JSON数据到后台时总会出现一些错误,本文整理了一些注意事项,感兴趣的朋友可以参考下 代码如下: $.ajax({  url: "../Services.ashx",  type: "POST",  //data: { 'data': { 'typename': JSON.stringify(typename) }, 'operationType': '2' },  data: { 'data': typename, 'operationType':

利用PHP+JavaScript打造AJAX搜索窗

一. 引言 Web世界中一项广为使用的功能就是搜索.随着Web技术的日益发展,为了更好地满足客户的需求,常规搜索引擎开始对更多的非常规方式"敞开了大门".在这方面,Yahoo!率先提供出其Y!Q服务.这个新的服务能够使你搜索任何web页面,前提是该页面的作者必须包括在他们的web页面中.是服务技术实现了把相关的搜索结果呈现到读者眼前,从而向读者展示更多的信息而不必离开他们的当前页面. Yahoo!的Y!Q服务的确是一个伟大的想法,但是它的出现也受到了一些批评.原因何在?首先,它要求客户

使用PHP JavaScript制作AJAX搜索引擎

一. 引言 Web世界中一项广为使用的功能就是搜索.随着Web技术的日益发展,为了更好地满足客户的需求,常规搜索引擎开始对更多的非常规方式"敞开了大门".在这方面,Yahoo!率先提供出其Y!Q服务.这个新的服务能够使你搜索任何web页面,前提是该页面的作者必须包括在他们的web页面中.是服务技术实现了把相关的搜索结果呈现到读者眼前,从而向读者展示更多的信息而不必离开他们的当前页面. Yahoo!的Y!Q服务的确是一个伟大的想法,但是它的出现也受到了一些批评.原因何在?首先,它要求客户

利用PHP+&amp;#106avascript打造AJAX搜索窗

ajax 一. 引言 Web世界中一项广为使用的功能就是搜索.随着Web技术的日益发展,为了更好地满足客户的需求,常规搜索引擎开始对更多的非常规方式"敞开了大门".在这方面,Yahoo!率先提供出其Y!Q服务.这个新的服务能够使你搜索任何web页面,前提是该页面的作者必须包括在他们的web页面中.是服务技术实现了把相关的搜索结果呈现到读者眼前,从而向读者展示更多的信息而不必离开他们的当前页面. Yahoo!的Y!Q服务的确是一个伟大的想法,但是它的出现也受到了一些批评.原因何在?首先,

急!!!!ajax responseText的问题

问题描述 急!!!!ajax responseText的问题 5C 先贴代码 if(new_!=renew_){ alert(""输入的两次密码不同""); return false; }else{ var url= ""<%=basePath%>/system/password/reset1""; var pars =""oldPassword=""+encodeURICo

Ajax autocomplete 功能问题

问题描述 请问我ABC.aspx页面上,同一个页面内有2个Textbox都需要有autocomplete功能我如果这样写-两个TextBox都会绑上这个功能,但是问题来了varparam={deptName:$('#txbDep1').val()};这边我不知道如何判断,是要取哪一个TextBox上打的东西难道只能把这这堆Code在复制一份出去写成$('#txbDep2').autocomplete({......$('#txbDep1').autocomplete({...........$(

IE8 jquery ajax获取静态资源报错TypeError 拒绝访问

1,出现问题的代码: Js代码   /***      * 请求静态html 模板      * @param url      * @param $jqueryDiv : 四个主要div之一      * @param templateHandle : 自定义,用于使用Dot js模板函数      * @param callback : 用于实现模板之后,绑定事件      * @param templateData : cia的返回数据      */      ajaxHtml: fun