65.9K
CodeProject 正在变化。 阅读更多。
Home

AJAX - 构建更好的 Web 应用程序的新方法

ChiranjibC
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.85/5 (26投票s)

2006年3月24日

CPOL

6分钟阅读

viewsIcon

108589

downloadIcon

650

一篇关于 AJAX 的文章

引言

异步 JavaScript 和 XML，或其缩写 Ajax，是一种用于创建交互式 Web 应用程序的 Web 开发技术。它用于通过 JavaScript 和 XML 从客户端提交服务器请求，而无需提交整个页面。结果，整个过程交换少量数据，因此作为基于客户端-服务器的系统，速度更快且响应更及时。AJAX 的一个很好的实现可以在这里看到。如果你在文本框中输入任何字母，就会出现一个下拉菜单，它直接来自服务器，而无需提交整个页面。AJAX 的核心是 XMLHttpRequest 对象。客户端可以在后台直接检索和提交 XML 数据。要将检索到的 XML 数据转换为可呈现的 HTML 内容，需要依靠客户端文档对象模型 (DOM) 读取 XML 文档节点树并组合用户看到的 HTML 元素。AJAX 不是像 HTML、DHTML 等单一技术。它是不同技术的组合

  • XMLHttpRequest 对象用于与 Web 服务器异步交换数据。
  • XML 通常用作从服务器传回数据的格式，尽管也可以使用任何格式，例如纯文本、HTML 等。
  • 如果 XML 用作传输格式，那么 DOM 通常与客户端脚本语言（如 JavaScript）一起使用，以动态显示和交互呈现的信息。
  • XHTML（或 HTML）、CSS，用于标记和样式信息。

其他文章

有关设计原则，单击此处跳过主内容请单击此处。

XMLHttpRequest 对象的简史

微软首先在 Windows 版 Internet Explorer 5 中将 XMLHttpRequest 对象实现为 ActiveX 对象。Mozilla 项目的工程师为 Mozilla 1.0（和 Netscape 7）实现了一个兼容的本地版本。Apple 也从 Safari 1.2 开始做了同样的事情。在提议的 W3C 标准“文档对象模型 (DOM) 级别 3 加载和保存规范”中，提到了类似的功能。现在它成为一个事实上的标准，即使在 W3C 规范最终确定并开始在发布的浏览器中实现（无论何时）之后，它也可能得到支持。

创建对象

XMLHttpRequest 对象的创建因浏览器而异。对于 Safari 和 Mozilla，它的创建方式如下

var req = new XMLHttpRequest();

对于 Internet Explorer 5.0 及更高版本，将对象名称传递给 ActiveX 构造函数

var req = new ActiveXObject("Microsoft.XMLHTTP");

对象的方法控制所有操作，而其属性则包含（除其他外）从服务器返回的各种数据，例如 xmlHttpObject.responseText 包含从服务器返回的 XML 或字符串值。

方法

Windows Internet Explorer 5.0 或更高版本、Safari 1.2 和 Mozilla 中 XMLHttpRequest 对象支持的方法如下

方法 描述
abort() 中止当前请求。如果你在未处理请求的对象上调用它（readyState 为 0 或 4）——会发生奇怪的事情。
getResponseHeader("headerLabel") 返回单个标头标签的字符串值
getAllResponseHeaders() 以字符串形式返回完整的标头集（标签和值）
open("method", "URL"[, asyncFlag[, "userName"[, "password"]]]) 分配待处理请求的目标 URL、方法和其他可选属性
send(content) 传输请求，可选地带有可发布的字符串或 DOM 对象数据
setRequestHeader("label", "value") 将标签/值对分配给要随请求发送的标头

在上述方法中，open 和 send 方法最为重要。让我们从应用程序的角度讨论 open 方法。

var req;
………………………
req = new ActiveXObject("Microsoft.XMLHTTP");
……………
var url = "AjaxServer.aspx?PubID="+ID;
……………
//Open a GET request to the URL
req.open("GET", url, true); 
//Actually Sends the request with a null body.
req.send(null);
***在示例应用程序中，AjaxClient.aspx 页面是用户界面，AjaxServer.aspx 根据用户请求提供数据。需要注意的重要一点是 AjaxServer.aspx 页面不应包含任何 HTML。你可以测试如果该页面包含 HTML 会发生什么。

第一个参数“method”（参见上面 Open 函数的表格）说明操作是 GET 操作还是 Post 操作。在简单数据检索的情况下，通常使用 GET。当传出数据包大小超过 512 字节且操作包括服务器端活动（如 insert、update 等）时，使用 Post。接下来是“url”参数，这可以是完整的 url 或相对的 url。在此示例中，使用了相对 url。“asyncFlag”决定了即将到来的脚本是否会在 send 方法之后立即处理，即是否等待响应。最后两个是“username”和“password”，如果“url”有，则需要它们。下一个重要的方法是 send 方法，它实际上发送带有主体的请求。对于此特定应用程序，它发送带有 null 主体的请求。

[
//Actually Sends the request with a null body.

req.send(null);
]

属性

属性 描述
onreadystatechange 每次状态改变时触发的事件处理程序 readyState 对象状态整数
0 = 未初始化
1 = 加载中
2 = 已加载
3 = 交互中
4 = 已完成
responseText 从服务器进程返回的数据的字符串版本
responseXML 从服务器进程返回的数据的 DOM 兼容文档对象
状态 服务器返回的数字代码，例如 404 表示“未找到”或 200 表示“确定”
statusText 伴随状态码的字符串消息

在此应用程序中，onreadystatechange 用法如下

//This is the event handler mechanism; In this 
//case "RequestProcessor" is the event handler.
req.onreadystatechange = RequestProcessor;

对于此应用程序，“RequestProcessor”是客户端的事件处理程序。现在在事件处理程序（“RequestProcessor”）内部使用 readyState 属性来获取各种状态。值 4 用于指示某个处理的完成。现在在处理之前，应检查 status 或 statusText 以确定操作的成功或失败。在此应用程序中，我以以下方式完成它

function RequestProcessor()
{
//If the readyState is in the "Ready" state
    if(req.readyState == 4)
    {
        //Returned status code 200 means Everything is fine.
        if(req.status == 200)
        {
            //If responseText is not blank
            //req.responseText is actually a string written by AJAXServer.aspx by its 
            //"Response.Write("" + sbXML.ToString() + "");" method.
                        
            if(req.responseText != "")
            {
                populateList(req.responseXML);
            }
            else
            {
                clearSelect(publishedBooks);
            }
        }
    }
    return true;
}

****The object req is declared as page level variable as:
var req = new ActiveXObject("Microsoft.XMLHTTP");

一些注意事项

请求目标的 URL 必须与客户端脚本所属的域相同。原因是 XMLHttpRequest 对象采用了相同的“沙箱”。在大多数支持此功能的浏览器上，承载访问对象的脚本的页面需要通过 http 协议检索，这意味着你将无法从本地硬盘（file 协议）测试页面。

一个现实生活问题

在 AJAX 中，如果网络或远程服务器暂停会发生什么？实际上，XMLHttpRequest 对象“默认”未解决两个主要问题。它们是

  1. 处理延迟：如果网络或远程服务器需要时间，这与你的 AJAX 应用程序有何关系？
  2. 响应排序：网络（或服务器）延迟可能会随时间变化。这意味着响应可能不会按请求的顺序返回。为了处理上述两个问题，程序员需要以能够处理上述情况的方式编写代码。一个解决方案可以是这样的
function callInProgress(xmlhttp) {
    switch ( xmlhttp.readyState ) {
        case 1, 2, 3:
            return true;
        break;

        // Case 4 and 0
        default:
            return false;
        break;
    }
}

现在在调用 send() 之前，我可以先查看对象是否繁忙，例如

if ( !callInProgress(xmlhttp) ) {
      xmlhttp.send(null);
} else {
      alert("I'm busy. Wait a moment");
}

支持 Ajax 的浏览器

  • Microsoft Internet Explorer 5.0 及以上版本，以及基于它的浏览器（不支持 Mac OS 版本）
  • 基于 Gecko 的浏览器，如 Mozilla、Mozilla Firefox、SeaMonkey、Epiphany、Galeon 和 Netscape 7.1 及以上版本
  • 实现 KHTML API 3.2 及以上版本的浏览器，包括 Konqueror 3.2 及以上版本，以及 Apple Safari 1.2 及以上版本
  • Opera 8.0 及以上版本浏览器，包括 Opera Mobile Browser 8.0 及以上版本

不支持 Ajax 的浏览器

  • Opera 7 及以下版本
  • Microsoft Internet Explorer 4.0 及以下版本
  • 基于文本的浏览器，如 Lynx 和 Links
  • 为视障人士设计的浏览器（语音合成、盲文）
  • 1997 年之前制造的浏览器

示例应用程序特定要求（所需软件和设置）

所需软件是

  1. ASP.NET 2.0
  2. Microsoft-SQL Server 2000，带有 pubs 数据库所需更改的设置
  3. 更改 web.config 文件中的数据库连接字符串（“CONN_STRING”键）。
<APPSETTINGS><ADD value="data source=cal-slcu2-196;
	Database=pubs;User=sa;PWD=sa" key="CONN_STRING" /></APPSETTINGS>

致谢

感谢 www.ajaxblog.com 帮助我撰写本文以及 CodeProject 上之前的几篇 Ajax 文章，它们帮助我建立了对 AJAX 的基本理解。

© . All rights reserved.