Ajax学习

Ajax

Ajax 是什么

Ajax 是 Asynchronous JavaScript XML 的缩写，被译为异步 JavaScript 和 XML。Ajax 本身并不是一个新技术，而是一个在 2005 年被 Jesse James Garrett 提出的新术语，用来描述一种使用现有技术集合的“新”方法。
当使用 Ajax 模型，HTML 页面能够快速地将数据逐步更新显示在用户界面上，不需要重载（刷新）整个页面。这使得 HTML 页面能成更快速地对用户的操作进行反馈。
尽管 Ajax 中的“X”代表 XML，但由于 JSON 的许多优势，目前 JSON 的使用比 XML 更加普遍。JSON 和 XML 都被用于在 Ajax 模型中封装数据。

Ajax 涉及的技术

Ajax 只是为实现异步交互的手段，不是一种技术，而是多种技术的整合。其中包括以下几种技术:

• HTML 页面
• Cascading Style Sheets ( CSS)
• JavaScript 脚本语言
• Document Object Model ( DOM)
• XML
• XMLHttpRequest 对象

上述技术中，XMlLHttpRequest 对象是实现 Ajax 异步交互的核心。

Ajax 的核心对象

实现 Ajax 异步交互的核心就是 XML .HttpRequ Jest 对象，该对象为客户端提供了在客户端和服务器之间传输数据的功能。
XML HttpRequest 对象提供了-个通过 URL 来获取数据的简单方式，并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。
XML HttpRequest 对象最初由微软设计，随后被 Mozilla、Apple 和 Google 采纳。如今，该对象已经被 W3C 组织标准化。通过该对象，可以很容易地得到一个 URL.上 的资源数据。尽管名字里有 XML,但 XML HttpRequest 对象可以得到所有类型的数据资源，并不局限于 XML 格式的数据。

实现 Ajax 的执行步骤

实现 Ajax 异步交互需要服务器端逻辑进行配合，而作为客户端的 HTML 页面需要完成以下步骤:

1. 创建 Ajax 的核心对象 XMLHttpRequest 对象
2. 通过 XMLHttpRequest 对象的 open()方法与服务器端建立连接
3. 构建请求所需的数据内容，并通过 XMLHttpRequest 对象的 send()方法发送给服务器端
4. 通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端的通信状态
5. 接收并处理服务器端向客户端响应的数据结果
6. .将处理结果更新到 HTML 页面中

创建 Ajax 的核心对象

虽然 XMILHttpRequest 对象目前由 W3C 组织进行标准化，但在不同浏览器中，创建的方式略有不同。

function createXMLHttpRequest() {
  var httpRequest;
  if (window.XMLHttpRequest) {
    //适用于Chrome，Firefox，Safari，..
    httpRequest = new XMLHttpRequest();
  } else if (window.Activexobject) {
    //适用于IE浏览器
    try {
      httpRequest = new ActivexObject("Msxm12.XMLHTTP."); // IE 7+
    } catch (e) {
      try {
        httpRequest = new ActiveXobject("Nicrosoft.XMLHTTP"); // IE 6-
      } catch (e) {}
    }
  }
  return httpRequest;
}

通过 Ajax 异步请求数据

通过 Ajax 异步请求数据是通过 XMLHttpRequest 对象的 send()方法实现，语法结构如下

httpRequest.send(data);

data:表示请求的数据内容。

httpRequest.send(null);
httpRequest.send("name=wolongxueyuan&password=123456");

如果该请求是异步模式(默认)，该方法会立刻返回。相反，如果请求是同步模式，则直到请求的响应完全接受以后，该方法才会返回。

GET 请求方式

Ajax 异步交互中使用 GET 请求方式的话，需要注意以下几个问题:

1.将构建的请求数据添加到 open()方法中的 url 地址中，如下示例代码所示:

httpRequest.open(
  "GET",
  "http://www.wolongxueyuan.org/some.file?name=wolongxueyuan&password=123456",
  true
);

上述示例代码中，“narne=wolongxueyuan&password=123456”表示请求数据 2．将发送请求数据的 send()方法中参数设置为 null 值，如下示例代码所示:

httpRequest.send(null);

POST 请求方式

Ajax 异步交互中使用 POST 请求方式的话，需要注意以下几个问题:

1.调用 send()方法之前，需要通过 XMLHltpRequest 对象的 setRequestHleader()方法设置请求头
信息。

httpRequest.setRequestHeader(header, value);

• header:将要被赋值的请求头名称。
• value:给指定的请求头赋的值。

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

2.通过 XMLHlttpRequest 对象的 send()发送请求数据。