RioTian

前言 - AJAX 简介

AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

在 2005 年,Google 通过其 Google Suggest 使 AJAX 变得流行起来。

学习 AJAX 前需要先了解:HTML/XHTML,CSS,JavaScript/DOM;

部分参考资料:Click Here

什么是 AJAX?

AJAX = Asynchronous JavaScript and XML.

有句话被叫做AJAX 是开发者的梦想

AJAX 作为一种用于创建快速动态网页的技术。

AJAX 通过在后台与服务器进行少量数据交换,使网页实现异步更新。这意味着可以在不重载整个页面的情况下,对网页的某些部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个页面。

有很多使用 AJAX 的应用程序案例:Google Maps、Gmail、Youtube 和 Facebook。


这里提及几个常见的使用 AJAX 的场景:

  1. 观看视频时刷新评论并不影响视频的正常播放
  2. 登录账号,不影响当前显示内容
  3. ...

引用一下菜鸟教程上的工作示意图

AJAX 工作方式

关于 jQuery 与 AJAX

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

如果没有 jQuery,AJAX 编程还是有些难度的。

编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过,jQuery 团队为我们解决了这个难题,我们只需要一行简单的代码,就可以实现 AJAX 功能。

AJAX的Internet标准

AJAX是基于现有的Internet标准,并且联合使用它们:

  • XMLHttpRequest 对象 (异步的与服务器交换数据)
  • JavaScript/DOM (信息显示/交互)
  • CSS (给数据定义样式)
  • XML (作为转换数据的格式)

AJAX应用程序与浏览器和平台无关的!


AJAX - XMLHttpRequest 对象

Ajax 的核心是 XMLHttpRequest 对象。

XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分,而不需要重新加载整个页面。

创建 XMLHttpRequest 对象

所有现代浏览器(Chrome、IE7+、Firefox、Safari 以及 Opera)都有内建的 XMLHttpRequest 对象。

创建 XMLHttpRequest 的语法是:

var http_request = new XMLHttpRequest();

老版本的 Internet Explorer(IE5 和 IE6)使用 ActiveX 对象:

var http_request = new ActiveXObject("Msxm12.XMLHTTP");
或者
var http_request = new ActiveXObject("Microsoft.XMLHTTP");

为了提高程序的兼容性,可以创建一个跨浏览器的 XMLHttpRequest 对象。创建一个跨浏览器的 XMLHttpRequest 对象其实很简单,只需要判断不同浏览器的实现方式,如果浏览器提供了XMLHttpRequest 类,则直接创建一个实例,否则实例化一个 ActiveX 对象。具体代码如下

var http_request;
if (window.XMLHttpRequest){
    // 用于现代浏览器的代码
    http_request = new XMLHttpRequest();
} else if(window.ActiveXObject){ // 应对老版本 IE 浏览器的代码
    try{
        http_request = new ActiveXObject("Msxm12.XMLHTTP");
    } catch(e){
        try{
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e) {}
    }
}

上面的代码中,调用 window.ActiveXObject 将返回一个对象,或是一个 null,在 if 语句中即使返回对象也是当作 True 来看待;

由于 JavaScript 具有动态类型的特点,而且 XMLHttpRequest 对象在不同浏览器上的实例是兼容的,所以可以用同样的方法访问 XMLHttpRequest 实例的属性和方法,不需要考虑创建该实例的方法是什么。

XMLHttpRequest 对象方法

\[\begin{array}{|l|l|} \hline \text { 方法 } & \text { 描述 } \\ \hline \text { new XMLHttpRequest() } & \text { 创建新的 XMLHttpRequest 对象 } \\ \hline \text { abort() } & \text { 取消当前请求 } \\ \hline \text { getAllResponseHeaders() } & \text { 返回头部信息 } \\ \hline \text { getResponseHeader() } & \text { 返回特定的头部信息 } \\ \hline \text { open(method, url, async, user, psw) } & \text { 规定请求 } \\ \hline & \begin{array}{l} \text { - method: 请求类型 GET 或 POST } \\ \text { - url: 文件位置 } \\ \text { - async: true (异步) 或 false (同步) } \\ \text { - user:可选的用户名称 } \\ \text { - psw: 可选的密码 } \end{array} \\ \hline \text { send() } & \text { 将请求发送到服务器,用于 GET 请求 } \\ \hline \text { send(string) } & \text { 将请求发送到服务器,用于 POST 请求 } \\ \hline \text { setRequestHeader() } & \text { 向要发送的报头添加标签/值对 } \\ \hline \end{array} \]

XMLHttpRequest 对象属性

\[\begin{array}{|l|l|} \hline \text { 属性 } & \text { 描述 } \\ \hline \text { onreadystatechange } & \text { 定义当 readyState 属性发生变化时被调用的函数 } \\ \hline \text { readyState } & \text { 保存 XMLHttpRequest 的状态。 } \\ \hline & \begin{array}{l} \text { - } 0 \text { : 请求末初始化 } \\ \text { - } 1: \text { 服务器连接已建立 } \\ \text { - } 2: \text { 请求已收到 } \\ \text { - } 3: \text { 正在处理请求 } \\ \text { - } 4: \text { 请求已完成且响应已就绪 } \end{array} \\ \hline \text { responseText } & \text { 以字符串返回响应数据 } \\ \hline \text { responseXML } & \text { 以 XML 数据返回响应数据 } \\ \hline \text { status } & \text {返回请求的状态号 } \\ \hline & \begin{array}{l} \text { - } 200 \text { : "OK" } \\ \text { - } 202 \text { : "表示请求被接受,但尚未成功" } \\ \text { - } 400: \text { "错误的请求" } \\ \text { - } 403: \text { "Forbidden" } \\ \text { - } 404: \text { "Not Found" } \\ \text { - } 500: \text { "Not Found" } \\ \text { - } more \\ \end{array} \\ \hline \text { statusText } & \text { 返回状态文本(比如 "OK" 或 "Not Found") } \\ \hline \end{array} \]

分类:

技术点:

相关文章: