用户名: 密码: 验证码:           网站地图  高级搜索  RSS订阅  收藏本站
您的位置:主页 > 网络编程 > Ajax >

3.1 处理服务器响应

[ 来源:豆豆网 | 作者:不详 | 更新日期:2008-3-9 14:28:22 | 人气: | 评论 0 条 ]

  XMLHttpRequest对象提供了两个可以用来访问服务器响应的属性。第一个属性responseText将响应提供为一个串,第二个属性responseXML将响应提供为一个XML对象。一些简单的用例就很适合按简单文本来获取响应,如将响应显示在警告框中,或者响应只是指示成功还是失败的词。

hot007.com

  第2章中的例子就使用了responseText属性来访问服务器响应,并将响应显示在警告框中。 jc567.cn

  3.1.1 使用innerHTML属性创建动态内容 www.jc567.cn

  如果将服务器响应作为简单文本来访问,则灵活性欠佳。简单文本没有结构,很难用JavaScript进行逻辑性的表述,而且要想动态地生成页面内容也很困难。 复制于hot007.com

  如果结合使用HTML元素的innerHTML属性,responseText属性就会变得非常有用。innerHTML属性是一个非标准的属性,最早在IE中实现,后来也为其他许多流行的浏览器所采用。这是一个简单的串,表示一组开始标记和结束标记之间的内容。

www.hot007.com

Ajax基础教程(3)- 3.1 处理服务器响应 www.hot007.com

  通过结合使用responseText和inner-

www.jc567.cn

  HTML,服务器就能“生产”或生成HTML内容,由浏览器使用innerHTML属性来“消费”或处理。下面的例子展示了一个搜索功能,这是使用XMLHttpRequest对象、其responseText属性和HTML元素的innerHTML属性实现的。点击search(搜索)按钮将在服务器上启动“搜索”,服务器将生成一个结果表作为响应。浏览器处理响应时将div元素的innerHTML属性设置为XMLHttpRequest对象的response- www.jc567.cn

  Text属性值。图3-1显示了点击search按钮而且在窗口内容中增加了结果表之后的浏览器窗口。 hot007.com

  第2章的例子只是将服务器响应显示在警告框中,这个例子的代码与它很相似。具体步骤如下: 文章来源于www.hot007.com

  1. 点击search按钮,调用startRequest函数,它先调用createXMLHttpRequest函数来初始化XMLHttpRequest对象的一个新实例;

hot007.com

  2. startRequest函数将回调函数设置为handleStateChange函数; 007网络教程网

  3. startRequest函数使用open()方法来设置请求方法(GET)及请求目标,并且设置为异步地完成请求;

文章来源于www.hot007.com

  4. 使用XMLHttpRequest对象的send()方法发送请求;

007网络教程网

  5. XMLHttpRequest对象的内部状态每次有变化时,都会调用handleStateChange函数。一旦接收到响应(如果readyState属性的值为4),div元素的innerHTML属性就将使用XMLHttpRequest对象的responseText属性设置。

复制于hot007.com

  代码清单3-1显示了innerHTML.html。代码清单3-2显示了innerHTML.xml,表示搜索生成的内容。

复制于jc567.cn

  代码清单3-1 innerHTML.html www.jc567.cn

  <!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>Using responseText with innerHTML</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", "innerHTML.xml", true);
  xmlHttp.send(null);
  }
  function handleStateChange() {
  if(xmlHttp.readyState == 4) {
  if(xmlHttp.status == 200) { www.jc567.cn
  document.getElementById("results").innerHTML = xmlHttp.responseText;
  }
  }
  }
  </script>
  </head>
  <body>
  <form action="#">
  <input type="button" value="Search for Today's Activities"
  onclick="startRequest();"/>
  </form>
  <div id="results"></div>
  </body>
  </html>

 

www.jc567.cn

  代码清单3-2 innerHTML.xml www.hot007.com

  <table border="1">
  <tbody>
  <tr>
  <th>Activity Name</th>
  <th>Location</th>
  <th>Time</th>
  </tr>
  <tr>
  <td>Waterskiing</td>
  <td>Dock #1</td>
  <td>9:00 AM</td>
  </tr>
  <tr>
  <td>Volleyball</td>
  <td>East Court</td>
  <td>2:00 PM</td>
  </tr>
  <tr>
  <td>Hiking</td>
  <td>Trail 3</td>
  <td>3:30 PM</td>
  </tr>
  </tbody>
  </table>

 

jc567.cn

  使用responseText和innerHTML可以大大简化向页面增加动态内容的工作。遗憾的是,这种方法存在一些缺陷。前面已经提到,innerHTML属性不是HTML元素的标准属性,所以与标准兼容的浏览器不一定提供这个属性的实现。不过,当前大多数浏览器都支持innerHTML属性。可笑的是,IE是率先使用innerHTML的浏览器,但它的innerHTML实现反而最受限制。如今许多浏览器都将innerHTML属性作为所有HTML元素的读/写属性。与此不同,IE则有所限制,在表和表行之类的HTML元素上innerHTML属性仅仅是只读属性,从一定程度上讲,这就限制了它的用途。


共5页: 上一页 1 [2] [3] [4] [5] 下一页
Tags:ajax,处理服务器响应
您的评论
用户名: 新注册) 密码: 匿名评论 [所有评论]

·用户发表意见仅代表其个人意见,并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯,提倡就事论事,杜绝漫骂和人身攻击等不文明行为