Ajax

Posted on | In | Visitors:

Ajax 的主要优势就是对页面的请求以异步的方式发送到服务器。而服务器不会用整个页面来响应请求，它会在后台处理请求，与此同时用户还能继续浏览页面并与页面交互。
你的脚本则可以按需加载和创建页面，而不会打断用户的浏览体验。

XMLHttpRequest 对象

Ajax 技术的核心就是 XMLHttpRequest 对象，其充当着浏览器中的脚本（客户端）与服务器之间的中间人的角色。以往的请求都由浏览器发出，而 Javascript 通过这个对象可以自己发送请求，自己处理响应。

eg：ajax.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
  <title>Ajax</title>
<head>
<body>
  <div id="new"></div>
  <script src="scripts/addLoadEvent.js"></script>
  <script src="scripts/getHTTPObject.js"></script>
  <script src="scripts/getNewContent.js></script>
</body>
</html>

为了模拟服务器的响应，在 ajax.html 文件的旁边创建一个 example.txt 文件如下，这个文件将充当服务器端脚本的输出：

1
This was loaded asynchronously!

getHTTPObject.js：

1
2
3
4
5
6
7
8
9
10
11
function getHTTPObject() {
  if (typeof XMLHttpRequest == "undefined")
    XMLHttpRequest = function() {
      try { return new ActiveObject("Msxml2.XMLHTTP.6.0");}
        catch (e) {}
      try { return new ActiveObject("Msxml2.XMLHTTP.3.0");}
        catch (e) {}
      return false;
	}
	return new XMLHttpRequest();
}

getNewContent.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# -*- coding: utf-8 -*-
function getNewContent() {
  var request = getHTTPObject();
  if (request) {
    request.open( "GET", "example.txt", true);  
    // onreadystatechange 是一个事件处理函数，会在服务器给XMLHttpRequest 对象送回响应的时候被触发执行。
    request.onreadystatechange = function() {
      // 处理响应
      if (request.readyState == 4) {
      // 当 readyState 属性的值变成了4，就可以访问服务器发送回来的数据了
      var para = document.craeteElement("p");
      var txt = document.createTextNode(request.responseText);
      para.appendChild(txt);
      document.getElementById('new').appendChild(para);
      }
    };
    // 用 send 方法来发送请求
    request.send(null);
  } 
  else {
    alert('Sorry, your browser dosen\'t support XMLHttpRequest');
  }
}
addLoadEvent(getNewContent);

打开 ajax.html，页面加载完成后，以上代码会发起一个GET 请求，请求与 ajax.html 文件位于同一目录的 example.txt 文件。

注意：

  • 使用 Ajax 时，要注意同源策略。使用 XMLHttpRequest 对象发送的请求只能访问与其所在的 HTML 处于同一个域中的数据，不能向其他域发送请求。