XMLHttpRequest 对象

转载 2012年03月28日 16:43:58

XMLHttpRequest 对象

XMLHttpRequest 对象用于在后台与服务器交换数据。

什么是 XMLHttpRequest 对象?

XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 对象是开发者的梦想,因为您能够:

  • 在不重新加载页面的情况下更新网页
  • 在页面已加载后从服务器请求数据
  • 在页面已加载后从服务器接收数据
  • 在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象。

如需学习更多有关 XMLHttpRequest 对象的知识,请学习我们的 XML DOM 教程

实例:当键入文本时与服务器进行 XML HTTP 通信

创建 XMLHttpRequest 对象

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

通过一行简单的 JavaScript 代码,我们就可以创建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法:

xmlhttp=new XMLHttpRequest();

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

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

提示:在下一章,我们将使用 XMLHttpRequest 对象从服务器取回 XML 信息。

实例 1

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for all new browsers
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = OK
    // ...our code here...
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}
</script>

亲自试一试

注释:onreadystatechange 是一个事件句柄。它的值 (state_Change) 是一个函数的名称,当 XMLHttpRequest 对象的状态发生改变时,会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时,我们才执行代码。

为什么使用 Async=true ?

我们的实例在 open() 的第三个参数中使用了 "true"。

该参数规定请求是否异步处理。

True 表示脚本会在 send() 方法之后继续执行,而不等待来自服务器的响应。

onreadystatechange 事件使代码复杂化了。但是这是在没有得到服务器响应的情况下,防止代码停止的最安全的方法。

通过把该参数设置为 "false",可以省去额外的 onreadystatechange 代码。如果在请求失败时是否执行其余的代码无关紧要,那么可以使用这个参数。

亲自试一试

更多实例

通过 XML HTTP 把一个 textfile 载入一个 div 元素中

通过 XML HTTP 进行 HEAD 请求

通过 XML HTTP 进行指定的 HEAD 请求

通过 XML HTTP 列出 XML 文件中的数据

XML / ASP

您也可以把 XML 文档打开并发送到服务器上的 ASP 页面,分析此请求,然后传回结果。

<html>
<body>
<script type="text/javascript">
xmlHttp=null;
if (window.XMLHttpRequest)
  {// code for IE7, Firefox, Opera, etc.
  xmlHttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE6, IE5
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlHttp!=null)
  {
  xmlHttp.open("GET", "note.xml", false);
  xmlHttp.send(null);
  xmlDoc=xmlHttp.responseText;

  xmlHttp.open("POST", "demo_dom_http.asp", false);
  xmlHttp.send(xmlDoc);
  document.write(xmlHttp.responseText);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
</script>
</body>
</html>

ASP 页面,由 VBScript 编写:

<%
set xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async=false
xmldoc.load(request)

for each x in xmldoc.documentElement.childNodes
   if x.NodeName = "to" then name=x.text
next
response.write(name)
%>

通过使用 response.write 属性把结果传回客户端。

亲自试一试

XMLHttpRequest 对象是 W3C 的标准吗?

任何 W3C 推荐标准均未规定 XMLHttpRequest 对象。

不过,W3C DOM Level 3 的 "Load and Save" 规范包含了一些相似的功能性,但是还没有任何浏览器实现它们。

参阅

XML DOM 参考手册: XMLHttpRequest 对象

Ajax核心对象XMLHTTPRequest

  • 2013年05月20日 11:35
  • 10KB
  • 下载

AJAX技术使用XMLHttpRequest对象传递参数的中文乱码问题

在浏览器端使用XMLHttpRequest对象向服务器端传送中文参数,如果不在浏览器端和服务器端进行处理时,会出现中文乱码问题.针对这种问题,有很多的解决办法,但往往都是在IE下可以正常显示中文,在其...

创建XMLHttpRequest对象

  • 2014年09月26日 12:31
  • 446B
  • 下载

XMLHttpRequest对象

  • 2014年05月26日 09:40
  • 60KB
  • 下载

XMLHttpRequest对象详解和事例

XMLHttpRequest对象详解 1、概述 2、XMLHttpRequest 的方法和属性 XMLHttpRequest包含了基本的属性和方法,正是通过这些方法和属性实现了对服务...

全面剖析XMLHttpRequest对象

  • 2008年06月17日 12:10
  • 179KB
  • 下载

使用javascript原生XMLHttpRequest对象进行ajax交互

AJAX(Asynchronous Javascript And XML):异步javascript和xml,是一种创建交互式网页应用的网页开发技术。 AJAX通过在后台与服务器进行数据交换,从而使网...
  • navioo
  • navioo
  • 2016年07月04日 10:19
  • 471

XMLHttpRequest对象详解

  • 2010年09月15日 18:19
  • 626KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:XMLHttpRequest 对象
举报原因:
原因补充:

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