为何XMLHttpRequest对象是AJAX的核心

转载 2006年06月11日 18:02:00

网络开发人员总是抱怨基于浏览器的应用软件的无状态性。就是说,一旦向服务器发出数据请求,且数据发送完毕后,所产生的连接即会断开。随后的数据请求又要建立新的连接。虽然可以应用许多方法,如cookie或ASP.NET之类的专利技术,将数据保存在客户端;但XMLHttpRequest对象提供一种减少响应时间的标准方法。

浏览器中的XML

XMLHttpRequest对象是AJAX(异步JavaScript+XML)开发范例的焦点所在,但它并非最近才出现。微软最先在Windows IE5中将XMLHttpRequest对象应用为ActiveX对象。Mozilla也在它的Mozilla 1.0(与Netscape 7)中应用了它的一个本地兼容版本。苹果也在它的Safari 1.2 中应用此对象。加入W3C DOM规格更使其成为网络开发的标准。

XMLHttpRequest对象允许JavaScript不需重新装载页面即可发送HTTP请求。实质上,HTTP请求是通过后台收到的响应来发送的,但是,由于没有可见的中断产生,用户完全意识不到后台的处理过程,而会继续工作。对开发人员来说,这真是意外的收获,导致了能够实时向服务器发送数据的响应用户界面。

方法

XMLHttpRequest对象包含少量的方法,如下所示:

  • abort():终止当前请求。
  • getAllResponseHeaders():返回一个包含整套头标签与值的字符串。
  • getResponseHeader(“名称”):返回特定头标签的字符串值。
  • open(“方法”,“url”,“异步标志”,“用户名”,“密码”):替即将发生的请求执行安装功能,并允许你指定URL、方法(通常获得或提交)以及异步标志的可选参数,用户名与密码。
  • sent(内容):发送(由open方法建立)的请求。可选内容参数可能包含字符串或DOM格式数据。
  • setRequestHeader(“标签”,“值”):允许你指定与请求(由send方法建立)一同发送的标签/值对。

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

网络或服务器可能会引起问题,使脚本无法执行,因此在继续处理之前等待响应并非总是明智之举。更稳妥的做法是:在请求对象的onreadystatechange事件发生时,异步发送并设计代码,如下面的XMLHttpRequest对象属性表所示:

  • onreadystatechange:每个状态发生改变所引发的事件的事件处理器。
  • readyState:对象的状态(0=未初始化,1=正在装载,2=装载完毕,3=交互,4=完成)。
  • responseText:服务器返回数据的字符串表示。
  • responseXML:服务器返回数据的DOM表示。
  • status:服务器请求HTTP状态代码的数字代码。
  • statusText:伴随数字状态代码的字符串信息。

你可以在用户继续使用应用软件的同时,利用XMLHttpRequest对象的方法与属性,在后台发送请求。

了解应用中的对象

有两种在JavaScript代码中应用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中,网页应用ASP.NET,对输入到文本框中的公司名执行电话号码查询(我使用的是标准的SQL Server Northwind数据库)。文本域的JavaScript onblur事件触发查询。

列表A<html><head>
<title>TechRepublic.com Example</title>
<script type="text/javascript" language="JavaScript">
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 = "http://localhost/test3.aspx?cname=" + cName
obj.open("POST",goUrl, false );
obj.send();
if ((obj.responseText == "Error") || (obj.responseText == ""))
alert("The company name is invalid.");
else
this.document.forms[0].telephone.value = obj.responseText;
document.body.style.cursor='auto';
}
</script></head><body>
<form id="frmText">
<input type="text" name="telephone" /><br />
<input type="text" name="cname" onblur="getTelephone(this.value);" />
</form>
</body></html>

对HTML页面的几点提示:

  • getTelephone JavaScript方法与XMLHttpRequest对象共同工作。它(根据浏览器)建立对象,并将(从文本域)提交到它的值贴粘到ASP.NET页面。
  • XMLHttpRequest对象的返回值(responseText属性)用于决定不返回数据,或是返回错误。
  • 文本域的onblur事件与JavaScript函数联系在一起,当用户在域外点击时,即被调用。

列表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" %>
<script 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();
} } }
</script>

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

保持连接

该例说明了应用XMLHttpRequest对象的精确性与简化性,这也为许多改善用户体验的其它应用打开大门。下面是许多其它应用中的几个:

  • 不必点击按钮即可保存数据
  • 即刻的购物车管理允许添加、删除或编辑项目。
  • 将服务器端的数据确定送交给浏览器。
  • 输入时即可翻译单词。

相关文章推荐

Ajax核心对象XMLHTTPRequest

  • 2013-05-20 11:35
  • 10KB
  • 下载

AJAX——核心XMLHttpRequest对象

AJAX大家已经都知道了,是为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,HTML,Jquery,Css……)重新融合的一个新的知识框架。而,XMLHttpR...

AJAX——核心XMLHttpRequest对象

AJAX大家已经都知道了,是为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,HTML,jQuery,Css……)重新融合的一个新的知识框架。而,XMLHttpR...

Ajax核心对象——快速上手XmlHttpRequest

之前曾经接触过Ajax,仅仅知道Ajax实现了什么。 同步交互与异步交互的区别。 现在,整理一下Ajax的了解。看一下Ajax是如何实现异步交互的。

XMLHttpRequest对象是AJAX的核心

网络开发人员总是抱怨基于浏览器的应用软件的无状态性。就是说,一旦向服务器发出数据请求,且数据发送完毕后,所产生的连接即会断开。随后的数据请求又要建立新的连接。虽然可以应用许多方法,如cookie或AS...

解析ajax核心XMLHTTPRequest对象的创建与浏览器的兼容问题

XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始。 了解XMLHttpRequest 对象就先从创建XMLHttpReq...

Ajax核心对象 XMLHTTPRequest

首先还是先了解Ajax AJAX = Asynchronous JavaScript andXML(异步的 javascript 和 XML)。通过在后台与服务器进行少量数据交换,AJAX 可以使网...

AJAX核心XMLHTTPRequest对象

老早就写好了总结,今天整理发表一下。    XMLHttpRequest对象是AJAX的核心技术,XMLHttpRequest 是XMLHTTP 组件的对象,通过这个对象,AJAX可以像桌面应用程序一...

AJAX——核心XMLHttpRequest对象

AJAX大家已经都知道了,是为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,HTML,jQuery,Css……)重新融合的一个新的知识框架。而,XMLHttpR...

AJAX----核心XMLHttpRequest对象介绍

在上篇文章中,我们都知道了AJAX是实现异步通信的,在不刷新界面的情况下,更新数据。XMLHttpRequest是AJAX的基础,又重点学习了一下。当然还是按照经典的5步来学习! 首先再次了解XML...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)