www.baike369.com
百科369 > Ajax教程 > XMLHttpRequest(XHR)对象使用responseXML属性创建解析树

XMLHttpRequest(XHR)对象使用responseXML属性创建解析树


XMLHttpRequest(XHR)对象使用responseXML属性创建解析树

responseXML属性的原理是,当请求加上MIME类型text/xml时,浏览器将继续进行下去并且把内容解析成XML,同时在返回标记的解析树对象中,创建Document对象。

对于大多数网络分析工具,很容易看到原始的XML文本,或者可以通过检查responseText属性来获得完整的报体(body)部分。


实例

但是,要看到解析树也并不是很容易的,所以这里提供了一个简单的例子,把responseXML解析树输出到文档中。

1. test.html文件的源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>XMLHttpRequest(XHR)对象使用responseXML属性创建解析树实例-www.baike369.com</title>
<script type="text/javascript"> 
function encodeValue(val)
{
  var encodedVal;
  if (!encodeURIComponent)
  {
    encodedVal = escape(val);
    /* fix the omissions */
    encodedVal = encodedVal.replace(/@/g, '%40');
    encodedVal = encodedVal.replace(/\//g, '%2F');
    encodedVal = encodedVal.replace(/\+/g, '%2B');
  }
  else
  {
    encodedVal = encodeURIComponent(val);
    /* fix the omissions */
    encodedVal = encodedVal.replace(/~/g, '%7E');
    encodedVal = encodedVal.replace(/!/g, '%21');
    encodedVal = encodedVal.replace(/\(/g, '%28');
    encodedVal = encodedVal.replace(/\)/g, '%29');
    encodedVal = encodedVal.replace(/'/g, '%27');
  }
  /* clean up the spaces and return */
  return encodedVal.replace(/\%20/g,'+'); 
}
function createXHR()
{
  try { return new XMLHttpRequest(); } catch(e) {}
  try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {}
  try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) {}
  try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
  try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
  return null;
}
function sendRequest()
{
  xhr = createXHR();
  if (xhr)
  {
    var url = "http://www.baike369.com/code.php";
    var payload ="responsetype=" +  encodeValue("text/xml");
    payload += "&badxml=false";
    xhr.open("GET",url + "?" + payload,true);
    xhr.onreadystatechange = function(){handleResponse();};
    xhr.send(null);
  }
}
function handleResponse()
{
  if (xhr.readyState == 4  && xhr.status == 200)
  {
    var xmlDoc = xhr.responseXML;
    var spot = document.getElementById('responseOutput');
    if (xmlDoc && xmlDoc.documentElement)
    {
      spot.innerHTML += "Document tree found in responseXML: <br /><hr />";
      var treeText = showXML(xmlDoc, "");
      var converted = treeText.replace(/<([^>]*)>/g, "&lt;$1&gt;");
      converted = converted.replace(/\n/g, "<br/>");
      spot.innerHTML += converted;
    }
  }
}
function showXML(node)
{
  var spot = document.getElementById('responseOutput');
  if (typeof XMLSerializer != "undefined")
  {
    return (new XMLSerializer()).serializeToString(node); 
  }
  else if (node.xml)
  { 
    return node.xml;
  }
  else
  {
    return printXML(node);
  }
}
function printXML(node, tree) 
{
  var tagname = node.tagName;
  var val =  node.nodeValue;
  if (tagname)
  {
    tree += "&lt;" + tagname + "&gt;";
  }
  else if (val)
  {
    tree += converted;
  }
  node = node.firstChild;
  while (node) 
  {
    tree = printXML(node, tree);
    node = node.nextSibling;
  }
  if (tagname) 
  {
    tree += "&lt;/" + tagname + "&gt;";
  }
  return tree;
}
window.onload = function () 
{
  sendRequest();
};</script> 
</head>
<body>
<br />
<div id="responseOutput">&nbsp;</div>
</body>
</html>

2. code.php文件的源代码如下:

<?php
header("Cache-Control: no-cache");
header("Pragma: no-cache");
$responseType = $_GET["responsetype"];
$badXML = $_GET["badxml"];
header("Content-Type: " . $responseType);
print "<?xml version='1.0' encoding='UTF-8'?>\n";
print "<packet>\n<headers>Some headers here</headers>\n<payload> Behold I am response payload! ";
if ($badXML == "false")print "</payload>\n";
print "</packet>\n";
?>

3. 显示的效果如下:

XMLHttpRequest(XHR)对象使用responseXML属性创建解析树实例

Copyright© 2011-2016 www.baike369.com All Rights Reserved