XMLHttpRequest对象如何铸就AJAX辉煌-haibinzhang-ChinaUnix博客

我的青春和梦想haibin.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

haibinzhang

博客访问： 278825
博文数量： 64
博客积分： 3099
博客等级：中校
技术积分： 615
用户组：普通用户
注册时间： 2007-07-29 19:38

文章分类

全部博文（64）

computer（1）
ios（1）
android（3）
Lua（0）
flex actionscrip（13）
个人随笔（2）
Linux系统（11）
网页设计（10）
PHP学习（16）
电子商务（2）
未分配的博文（5）

文章存档

2015年（1）

2014年（7）

2013年（6）

2012年（3）

2010年（11）

2009年（3）

2008年（19）

2007年（14）

我的朋友

最近访客

推荐博文

XMLHttpRequest对象如何铸就AJAX辉煌

分类：

2008-06-24 23:02:17

　是什么铸就了Ajax的辉煌，是它别裁心意的名字吗，还是它独具匠心的开发理念吗，答案是否定的，Ajax的成功与XMLHttpRequest对象是息息相关的，那么XMLHttpRequest的神来之笔是如何打开用户体验应用大门的。

    Web开发人员对基于浏览器的应用常见的一个抱怨是它具有无状态的特点。也就是说，一旦数据被请求并从服务器上发出，这个连接就丢失了；任何以后的数据请求必需建立新的连接。尽管现在有很多方法可以在客户端缓存数据，例如通过Cookie或ASP.NET之类的专有技术。XMLHttpRequest对象提供了一个标准方法来减少响应时间。

    浏览器中的XML

    XMLHttpRequest对象是AJAX（异步Javascrīpt+XML）开发范例的关键所在，但是它并非一项新功能。微软最初是在Windows的IE5中将XMLHttpRequest对象应用为ActiveX对象。

    Mozilla项目组也在它的Mozilla 1.0(与Netscape 7)中应用了它的一个兼容版本的支持。而苹果公司则在其浏览器Safari 1.2中也加入了对它的支持。加入W3C DOM规格更使其成为了Web开发的标准。

    XMLHttpRequest对象允许Javascrīpt不需重新装载页面即可发送HTTP请求。事实上，HTTP请求是通过后台收到的响应来发送的，不过由于没有可见的中断产生，用户看不到后台的处理过程，而会继续工作。对开发人员来说，这绝对是上帝的礼物，通过这个对象能够实现实时向服务器发送数据的用户接口。

    方法

    XMLHttpRequest对象包含一小部分的方法，如下所示：
    abort()：终止当前请求。
    getAllResponseHeaders()：返回一个包含完整头标签与值的字符串。
    getResponseHeader("name")：返回特定头标签的字符串值。
    open("method", "url", asyncflag, "username","password")：对即将到来的请求执行安装功能，并允许你指定URL、方法（通常获得或提交）、异步标志的可选参数、用户名和密码。
    sent(content)：发送（由open方法建立）的请求。可选内容参数可能包含字符串或DOM格式数据。
    setRequestHeader("label", "value")：允许你指定标签/值对来被请求发送（通过发送方法）。

    open方法的第三个可选参数是一个布尔值，用于控制你是否异步处理即将发生的交易；这也是AJAX的缩写的首字母-异步部分进入图片的地方。默认行为（真）是异步处理，这意味着，在调用send()方法后，不用
等待响应就立即执行脚本处理。如果将此值设为假，此脚本等待发出请求，且服务器做出反映后再执行。

　　网络或服务器问题有可能导致脚本无法执行的故障，因此在继续处理之前等待响应并非总是好的办法。更为安全的做法是，在请求对象的onreadystatechange事件发生时，异步发送并设计代码。如下面的XMLHttpRequest对象属性表所示：

    onreadystatechange：每个状态发生改变所引发的事件的事件处理器。
    readyState：对象的状态（0=未初始化，1=正在装载，2=装载完毕，3=交互，4=完成）。
    responseText：服务器返回数据的字符串表示。
    responseXML：服务器返回数据的DOM表示。
    status：服务器请求HTTP状态代码的数字代码。
    statusText：伴随数字状态代码的字符串信息。
    你可以在用户继续使用应用软件的同时，利用XMLHttpRequest对象的方法与属性，在后台发送请求。

    通过应用来了解对象

    有两种方法在你的Javascrīpt代码中应用XMLHttpRequest对象。以下是IE方法：

    varreq = new ActiveXObject("Microsoft.XMLHTTP");

    以下为非IE方法：

    varreq = new XMLHttpRequest();

    由于这个原因，你可能想根据你所使用的浏览器不同来包括建立对象实例的代码，如下面的代码所示：

if (window.XMLHttpRequest) ...{

req = new XMLHttpRequest();

} else if (window.ActiveXObject) ...{

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

}

    这样就建立了一个基于浏览器的XMLHttpRequest类。使对象工作的代码与示例对象相同。

   看一下以下代码A。

　　{$PageTitle=代码A 的实现}

    代码A

<html><head>
<title>TechRepublic.com Exampletitle>
<scrīpt type="text/javascrīpt" language="Javascrīpt">
function getTelephone(cName) ...{document.body.style.cursor='wait';varobj = null;
if (window.XMLHttpRequest) ...{obj = new XMLHttpRequest();
} else if (window.ActiveXObject) ...{obj = new ActiveXObject("Microsoft.XMLHTTP");
}vargoUrl = "" + cNameobj.open("POST",goUrl, false );obj.send();
if ((obj.responseText == "Error") || (obj.responseText == ""))
alert("The company name is invalid.");
elsethis.document.forms[0].telephone.value = obj.responseText;document.body.style.cursor='auto';
}
scrīpt>head><body>
<form id="frmText">
<input type="text" name="telephone" /><br />
<input type="text" name="cname" onblur="getTelephone(this.value);" />
form>
body>html>

    在上面的代码中，网页应用ASP.NET来对输入到文本框中的公司名执行电话号码查询（我使用的是标准的SQL Server Northwind数据库）。文本域的Javascrīpt onblur事件触发查询。

    对HTML页面的几点提示：

    getTelephone Javascrīpt方法与XMLHttpRequest对象共同工作。它建立对象（根据浏览器），并将提交到它的值（从文本域）贴粘到ASP.NET页面。
    XMLHttpRequest对象的返回值（responseText属性）用于决定是返回数据，或是返回错误。
    文本域的onblur事件与Javascrīpt函数联系在一起，当用户在域外点击时，即被调用。
    在列表B中，XMLHttpRequest对象调用ASP.NET代码。ASP.NET页面很简单。它应用通过QueryString变量提交到页面的值来定位SQL服务器数据库中匹配的数据，并返回匹配数据，如果发生异常，则返回错误。

　　

列表B的实现

<%@ Page Language="C#" ContentType="text/plain" Debug="true" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<%@ Import Namespace="System.Data" %>
<scrīpt language="C#" runat="server">
private SqlConnection conn = null;
private SqlCommand cmd = null;
private String connString;
private String strSQL;
private void Page_Load(object sender, System.EventArgs e) ...{
if (!IsPostBack) ...{
connString = "data source=SALESLAPTOP;uid=test;pwd=test;initial catalog=Northwind";
strSQL = "SELECT Phone FROM dbo.Customers WHERE CompanyName LIKE '%" + Request.QueryString["cname"] + "%'";
try ...{
conn = new SqlConnection(connString);
cmd = new SqlCommand(strSQL, conn);
conn.Open();
Response.Write(cmd.ExecuteScalar().ToString());
conn.Close();
}catch (Exception ex) ...{Response.Write("Error");
} finally ...{
if (conn.State == ConnectionState.Open) ...{
conn.Close();
}conn.Dispose();
} } }
scrīpt>

    本例应用一个终端ASP.NET页面，但它可以使用任何开发语言。另外，由于终端页面只是简单地应用返回值，终端页面不必与调用它的页面使用同样的开发语言或平台。终端页面也可能是一个网络服务。

    保持连接

    该例说明了应用XMLHttpRequest%

阅读(1061) | 评论(0) | 转发(0) |

上一篇：php学习笔记：mysql多表查询

下一篇：关于SQL查询语句

给主人留下些什么吧！~~

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6