Go语言视频零基础入门到精通

javalearner

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

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

   
目录
   

   
什么是AJAX？
   

   
第一步：如何发出一个HTTP请求
   

   
第二步：处理服务器的响应
   

   
第三步：一个简单的例子
   

   
第四步：与XML响应协同工作
   

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

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

1、向服务器发出请求而不需重新加载任何页面
2、解析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">

1. var http_request = false;
   
2. function makeRequest(url) {
   
3.    http_request = false;
   
4.    if (window.XMLHttpRequest) { // Mozilla, Safari,...
   
5.      http_request = new XMLHttpRequest();
   
6.      if(http_request.overrideMimeType){
   
7.         http_request.overrideMimeType("text/xml");
   
8.      }
   
9.   } else if (window.ActiveXObject) { // IE
   
10.     try {
    
11.       http_request = new ActiveXObject("Msxml2.XMLHTTP");
    
12.     } catch (e) {
    
13.       try {
    
14.         http_request = new ActiveXObject("Microsoft.XMLHTTP");
    
15.       } catch (e) {}
    
16.     }
    
17.   }
    
18.   if (!http_request) {
    
19.     alert("Giving up  Cannot create an XMLHTTP instance");
    
20.     return false;
    
21.   }
    
22.   http_request.onreadystatechange = alertContents;
    
23.   http_request.open("GET", url, true);
    
24.   http_request.send(null);
    
25. }
    
26. function alertContents() {
    
27.   if (http_request.readyState == 4) {
    
28.     if (http_request.status == 200) {
    
29.        alert(http_request.responseText);
    
30.     } else {
    
31.       alert("There was a problem with the request.");
    
32.     }
    
33.   }
    
34. }
    

复制代码

</script>
<span style="cursor: pointer; text-decoration: underline" onclick="makeRequest("test.html")"> 发出请求</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>
<name>wwwww</name>
<name>3456</name>
</root>

我们只需要在脚本中用下面的内容替换请就行：
...
onclick="makeRequest("test.xml)">
...
然后在alertContents()里把alert(http_request.responseText);替换成如下代码段：
var xmldoc= http_request.responseXML;
var root_node = xmldoc.getElementsByTagName("name");
alert(root_node[0].firstChild.data);

这样，我们获取了responseXML中的XMLDocument对象，并且用DOM方法来访问了XML文档中所包含的某些内容。

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

Tags: AJAX, XML, JavaScript, 翻译, 研究,   http://forum.javaeye.com/viewtopic.php?t=15156

  
  
   
   

     
   

     
   
  
  
  

  










源码下载：http://file.javaxxz.com/2014/10/13/004949609.zip