使用XMLHttpRequest对象 2.6 如何发送简单请求


现在已经准备开始使用XMLHttpRequest对象了。我们刚刚讨论了如何创建这个对象,下面来看如何向服务器发送请求,以及如何处理服务器的响应。

  最简单的请求是,不以查询参数或提交表单数据的形式向服务器发送任何信息。在实际中,往往都希望向服务器发送一些信息。

  使用XMLHttpRequest对象发送请求的基本步骤如下:

  1. 为得到XMLHttpRequest对象实例的一个引用,可以创建一个新的实例,也可以访问包含有XMLHttpRequest实例的一个变量。

  2. 告诉XMLHttpRequest对象,哪个函数会处理XMLHttpRequest对象状态的改变,为此要把对象的onreadystatechange属性设置为指向JavaScript函数的指针。

  3. 指定请求的属性。XMLHttpRequest对象的open()方法会指定将发出的请求。open()方法取3个参数:一个是指示所用方法(通常是GET或POST)的串;一个是表示目标资源URL的串;一个是Boolean值,指示请求是否是异步的。

  4. 将请求发送给服务器。XMLHttpRequest对象的send()方法把请求发送到指定的目标资源。send()方法接受一个参数,通常是一个串或一个DOM对象。这个参数作为请求体的一部分发送到目标URL。当向send()方法提供参数时,要确保open()中指定的方法是POST。如果没有数据作为请求体的一部分被发送,则使用null。

  这些步骤很直观:你需要XMLHttpRequest对象的一个实例,要告诉它如果状态有变化该怎么做,还要告诉它向哪里发送请求以及如何发送请求,最后还需要指导XMLHttpRequest发送请求。不过,除非你对C或C++很了解,否则可能不明白函数指针(function pointer)是什么意思。

函数指针与任何其他变量类似,只不过它指向的不是像串、数字、甚至对象实例之类的数据,而是指向一个函数。在JavaScript中,所有函数在内存中都编有地址,可以使用函数名引用。这就提供了很大的灵活性,可以把函数指针作为参数传递给其他函数,或者在一个对象的属性中存储函数指针。

  对于XMLHttpRequest对象,onreadystatechange属性存储了回调函数的指针。当XMLHttpRequest对象的内部状态发生变化时,就会调用这个回调函数。当进行了异步调用,请求就会发出,脚本立即继续处理(在脚本继续工作之前,不必等待请求结束)。一旦发出了请求,对象的readyState属性会经过几个变化。尽管针对任何状态都可以做一些处理,不过你最感兴趣的状态可能是服务器响应结束时的状态。通过设置回调函数,就可以有效地告诉XMLHttpRequest对象:“只要响应到来,就调用这个函数来处理响应。”

  2.6.1 简单请求的示例

  第一个示例很简单。这是一个很小的HTML页面,只有一个按钮。点击这个按钮会初始化一个发至服务器的异步请求。服务器将发回一个简单的静态文本文件作为响应。在处理这个响应时,会在一个警告窗口中显示该静态文本文件的内容。代码清单2-4显示了这个HTML页面和相关的JavaScript。

  代码清单2-4 simpleRequest.html页面

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>Simple XMLHttpRequest</title>
  <script type="text/javascript">
  var xmlHttp;
  function createXMLHttpRequest() {
  if (window.ActiveXObject) {
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else if (window.XMLHttpRequest) {
  xmlHttp = new XMLHttpRequest();
  }
  }
  function startRequest() {
  createXMLHttpRequest();
  xmlHttp.onreadystatechange = handleStateChange;
  xmlHttp.open("GET", "simpleResponse.xml", true);
  xmlHttp.send(null);
  }
  function handleStateChange() {
  if(xmlHttp.readyState == 4) {
  if(xmlHttp.status == 200) {
  alert("The server replied with: " + xmlHttp.responseText);
  }
  }
  }
  </script>
  </head>
  <body>
  <form action="#">
  <input type="button" value="Start Basic Asynchronous Request"
  onclick="startRequest();"/>
  </form>
  </body>
  </html>

 

本文作者:



相关阅读:
使用sp_xml_preparedocument处理XML文档的方法
CSS基础语法:群组化选择符
巧用CSS改变鼠标的样式
Windows+IIS+TOMCAT配置方法
JSP动态输出Excel及中文乱码的解决
支持IE,Firefox的javascript 日历控件
提升PHP速度全攻略
ASP.NET页面间的传值的几种方法
Windows Server 2008安装问题的解决
css滤镜效果(二)
Windows任务栏音量图标消失不见
把无限级分类生成数组
PHP新手上路(十一) 数据库链接
HTML 向 XHTML1.0 兼容性指导
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4