技术藤-Ajax入门详细教程

Ajax 的意思就是异步的 JavaScript 和 XML。简而言之，它是使用 XMLHttpRequest 对象与服务器端通信的脚本语言。它可以发送及接收各种格式的信息，包括 JSON、XML、HTML 和文本文件。

Ajax 最为吸引人的就是它的“异步”特性，这意味着 Ajax 可以无需刷新页面而与服务器端进行通信。允许你根据用户事件来更新部分页面内容。

可以考虑的两个特性：

向服务器端发送请求，而不用重新加载页面。
从服务器端接收数据并处理。

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

需要通过 XMLHttpRequest 实现使用 JavaScript 向服务器端发送一个 HTTP 请求。而 Internet Explorer（IE）中引入一个名为 XMLHTTP 的ActiveX对象实现与 XMLHttpRequest 相同的功能，Mozilla、Safari 和其他浏览器则使用 XMLHttpRequest。如果要兼容各个浏览器的话，可以这样来做：

var httpRequest;
if (window.XMLHttpRequest) {  
// Mozilla, Safari, IE7+ ...  
 httpRequest = new XMLHttpRequest();
 } else if (window.ActiveXObject) 
 {  // IE 6 and older 
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
  }

接下来，当接收到服务器端响应时，需要告诉 HTTP 请求对象使用 JavaScript 函数来处理响应。将 XMLHttpRequest 对象的 onreadystatechange 属性设置为该函数的名称，当请求的状态变化时，该函数会被调用。

httpRequest.onreadystatechange = nameOfTheFunction;

注意：该函数名没有传递参数的括号和参数，这表示只是分配了一个函数的引用，而不是真正调用该函数。当然，也可以动态定义一个匿名函数，这样可以实时地处理响应。

httpRequest.onreadystatechange = function () {  
// process the server response
};

在处理完服务器端的响应之后，我们就可以调用 XMLHttpRequest 对象的 open() 和 send() 方法向服务器端发送请求了。

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

（1）open() 方法的第一个参数：HTTP 请求方法 – GET、POST、HEAD 及任何服务器端支持的方法。根据 HTTP 标准保持大写，否则一些浏览器（例如火狐）可能无法处理请求。关于 HTTP 请求方法的更多信息，你可以查看W3C 规范

（2）open() 方法的第二个参数：请求的 URL。出于安全考虑，不能调用第三方域的页面内容。当调用 open() 方法时，一定确认使用相同域名内的页面，否则会得到“permission denied”的错误提示。常见的错误是使用 domain.tld 访问网站，却使用 www.domain.tld 来请求页面。如果真的需要发送一个请求到另一个域的话，可以查看 HTTP 访问控制

（3）open() 方法的第三个参数：可选，是否是异步请求。如果是 true（默认值），表示是异步请求。

send() 方法的参数表示当请求为 POST 时，向服务器端发送请求的数据内容。如果发送的是表单数据格式的话，服务器端可以向字符串一样地解析。

"name=value&anothername=" + encodeURIComponent(myVar) + "&so=on";

向服务器端发送的数据格式也可以是 JSON、SOAP 等格式。

注意：如果使用 POST 方式发送数据的话，在调用 send() 方法前，需要设置请求的 MIME 类型。

httpRequest.setRequestHeader(  "Content-Type",  "application/x-www-form-urlencoded");

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

当发送请求时，已经定义了一个函数来处理响应。

httpRequest.onreadystatechange = nameOfTheFunction;

这个函数可以做什么呢？首先，该函数需要检查请求的状态。如果状态值为 4 的话，这表示接收到完成的服务器端响应，可以继续处理。

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

readyState 的值列表如下：0 – 未初始化；1 – 正在加载；2 – 加载完毕；3 – 交互中；4 – 完成

接下来需要检查 HTTP 服务器端响应的状态代码，W3C 网站列出了所有的状态代码。下面的例子中，通过是否为 200 OK 的状态码来判断 Ajax 调用是否是成功的。

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

在检查了请求的状态和响应的状态码后，就可以接收服务器端发送的数据并处理。有两种选项访问这些数据：

httpRequest.responseText：将服务器端响应作为文本字符串返回
httpRequest.responseXML：将响应作为一个 XMLDocument 对象返回，该对象可以使用 JavaScript DOM 函数进行遍历。

注意，上述步骤只有异步请求（open() 方法的第三个参数设置为 true）时才是有效的。如果使用同步请求的话，是不需要指定函数的。在调用 send() 方法后就可以访问到服务器端返回的数据，因为脚本会停止并等待服务器端的响应。

第三步：一个简单的例子

下面来做一个简单的 HTTP 请求。JavaScript 将请求一个包含“I’m a test.”文本的“test.html”HTML 文档，然后使用alert() 方法打印 test.html 文件的内容。

<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">  
Make a request
</span>
<script type="text/javascript">  
(function () {    
var httpRequest;    
document.getElementById("ajaxButton").onclick = function () {     
 makeRequest("test.html");    
 };
    function makeRequest(url) {      
    if (window.XMLHttpRequest) {        
    // Mozilla, Safari, ...        
    httpRequest = new XMLHttpRequest();      
    } else if (window.ActiveXObject) {        
    // IE        
    try {          
    httpRequest = new ActiveXObject("Msxml2.XMLHTTP");        
    } catch (e) {          
    try {            
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");          
    } catch (e) {}        
    }      
    }
      if (!httpRequest) {        
      alert("Giving up :( Cannot create an XMLHTTP instance");        
      return false;      
      }      
      httpRequest.onreadystatechange = alertContents;      
      httpRequest.open("GET", url);      
      httpRequest.send();    
      }
    function alertContents() {      
    if (httpRequest.readyState === 4) {        
    if (httpRequest.status === 200) {          
    alert(httpRequest.responseText);        
    } else {          
    alert("There was a problem with the request.");        
    }      
    }    
    }  
    })();
    </script>

在这个例子中：
在浏览器中用户单击“Make a request”链接；
事件处理器调用 makeRequest() 方法，通过向该函数传递的参数，请求一个处在同一目录中的“test.html”
HTML 文件；请求后，（onreadystatechange）执行 alertContents() 方法；
alertContents() 方法用于检查如果正确地接收到响应，利用 alert() 方法打印“test.html”文件包含的内容。
注意：
如果你发送一个请求后返回的是一段 XML 代码，而不是一个静态的 XML 文件的话，在 Internet Explorer 中
必须设置一些响应头。如果没有设置响应头“Content-Type: application/xml”的话，当试图访问 XML 元素时
IE 将抛出一个 "Object Expected" 的 JavaScript 错误。
如果没有设置头“Cache-Control: no-cache”的话，浏览器将缓存响应并不会重新提交请求。可以添加像时间
戳或一个随机数的不同 GET 请求参数（参考 bypassing the cache）。
如果 httpRequest 变量是全局的，makeRequest() 方法因为冲突可能会被重写。将 httpRequest 变量定义在
一个闭包中的话，可以避免 Ajax 函数的冲突。
如果出现通信错误（如服务器端被关闭），当试图访问状态字段时在 onreadystatechange 的方法中将会抛
出一个异常。确保 if 语句声明在 try..catch 语句中。

function alertContents() {  
try {    
if (httpRequest.readyState === 4) 
{      
if (httpRequest.status === 200) {        
alert(httpRequest.responseText);      
} else {        
alert("There was a problem with the request.");      
}    
}  
} catch (e) {    
alert("Caught Exception: " + e.description); 
 }
 }

第四步：使用 XML 进行响应

在前面的例子中，当接收到响应后使用 XMLHttpRequest 对象的 responseText 属性访问“test.html”文件包含的内容。现在尝试一下 responseXML 属性。

首先，创建一个用于请求的名为“test.xml”的有效 XML 文档，代码如下：

<?xml version="1.0" ?>
<root>   
 I'm a test.
 </root>

在脚本中，只需要修改请求行：

onclick="makeRequest('test.xml')"

然后在 alertContents() 方法中，需要使用如下代码替换 alert(httpRequest.responseText); 这一行代码：

var xmldoc = httpRequest.responseXML;var root_node = xmldoc.getElementsByTagName("root").item(0);alert(root_node.firstChild.data);

这段代码需要由 responseXML 给予的 XMLDocument 对象，然后使用 DOM 方法来访问 XML 文档中的数据。

第五步：处理数据

最后，向服务器端发送一些数据并接收响应。这次 JavaScript 脚本请求一个动态页面“test.php”，该页面将根据发送的数据返回一个“computedString”-“Hello, [user data]!”，并使用 alert() 方法进行打印。

首先，向 HTML 页面中添加一个文本框，用户可以通过该文本框输入他们的名字：

<label  >Your name:  
<input type="text" id="ajaxTextbox" />
</label>
<span id="ajaxButton" style="cursor: pointer; text-decoration: underline"> 
 Make a request
 </span>

还需要添加一行事件处理器用于从文本框获取用户的数据，并将该数据随着 URL 传递给 makeRequest() 方法：

document.getElementById("ajaxButton").onclick = function () 
{  
var userName = document.getElementById("ajaxTextbox").value; 
 makeRequest("test.php", userName);
 };

修改 makeRequest() 方法用于接收用户数据并发送给服务器端。将请求方式从 GET 修改为 POST，用户数据作为参数传递给 httpRequest.send() 方法：

function makeRequest(url, userName) {
    ...
    httpRequest.onreadystatechange = alertContents;    
    httpRequest.open('POST', url);    
    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');    
    httpRequest.send('userName=' + encodeURIComponent(userName));
    }

alertContents() 方法可以向第三步一样利用 alert() 方法打印服务器端返回的数据。假设服务器端返回的是 computedString 和用户数据的话，如果用户在文本框中输入“Jane”服务器端响应的内容会像是这样：

{"userData":"Jane","computedString":"Hi, Jane!"}

在 alertContents() 方法中使用这些数据，不仅可以使用 alert() 方法打印 responseText 的内容，还可以将其解析并打印 computedString 属性内容：

function alertContents() { 
 if (httpRequest.readyState === 4) {   
  if (httpRequest.status === 200) {      
  var response = JSON.parse(httpRequest.responseText);      
  alert(response.computedString);    
  } else {      
  alert("There was a problem with the request.");    
  }  
  }
  }