AJAX学习笔记之服务器返回XML

最新推荐文章于 2024-07-21 17:13:47 发布

milk1626

最新推荐文章于 2024-07-21 17:13:47 发布

阅读量507

点赞数

分类专栏： AJAX 读书笔记文章标签：服务器 ajax xmlhttprequest function border xml

本文链接：https://blog.csdn.net/milk1626/article/details/5444779

版权

读书笔记同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

AJAX

13 篇文章 0 订阅

订阅专栏

上次介绍了AJAX在 get与post模式(客户端请求)的一些要点，这次介绍服务器返回请求(服务器返回结果)的两种方式，一种是文本形式，存储在responseText中，另一种XML格式，存储在responseXML中，各户端程序可以对前者进行字符串的处理，对后者进行DOM相关的处理。

可以从上次的例子可以留意到，上次的服务器是以文本形式返回的，故这里不多做介绍，下面围绕responseXML来说明。

9-4.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>responseXML</title>
<style>

</style>
<script language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject)
  xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
else if(window.XMLHttpRequest)
  xmlHttp = new XMLHttpRequest();
}
function getXML(addressXML){
var url = addressXML + "?timestamp=" + new Date();
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET",url);
xmlHttp.send(null);
}

function addTableRow(sName, sClass, sBirth, sConstell, sMobile){
//表格添加一行的相关操作

var oTable = document.getElementById("member");
var oTr = oTable.insertRow(oTable.rows.length);
var aText = new Array();
aText[0] = document.createTextNode(sName);
aText[1] = document.createTextNode(sClass);
aText[2] = document.createTextNode(sBirth);
aText[3] = document.createTextNode(sConstell);
aText[4] = document.createTextNode(sMobile);
for(var i=0;i<aText.length;i++){
var oTd = oTr.insertCell(i);
oTd.appendChild(aText[i]);
}
}

function DrawTable(myXML){
//用DOM方法操作XML文档
var oMembers = myXML.getElementsByTagName("member");
var oMember = "", sName = "", sClass = "", sBirth = "", sConstell = "", sMobile = "";
for(var i=0;i<oMembers.length;i++){
  oMember = oMembers[i];
  sName = oMember.getElementsByTagName("name")[0].firstChild.nodeValue;
  sClass = oMember.getElementsByTagName("class")[0].firstChild.nodeValue;
  sBirth = oMember.getElementsByTagName("birth")[0].firstChild.nodeValue;
  sConstell = oMember.getElementsByTagName("constell")[0].firstChild.nodeValue;
  sMobile = oMember.getElementsByTagName("mobile")[0].firstChild.nodeValue;
  //添加一行
  addTableRow(sName, sClass, sBirth, sConstell, sMobile);
}
}

function handleStateChange(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
DrawTable(xmlHttp.responseXML); //responseXML获取到XML文档
}
</script>
</head>

<body>
<input type="button" value="获取XML" οnclick="getXML('9-4.xml');"><br><br>
<table class="datalist" summary="list of members in EE Studay" id="member">
<tr>
  <th scope="col">Name</th>
  <th scope="col">Class</th>
  <th scope="col">Birthday</th>
  <th scope="col">Constellation</th>
  <th scope="col">Mobile</th>
</tr>
</table>
</body>
</html>

9-4.xml:

<?xml version="1.0" encoding="gb2312"?>
<list>
<caption>Member List</caption>
<member>
  <name>test</name>
  <class>W13sss</class>
  <birth>Jun 2ds4th</birth>
  <constell>Canascer</constell>
  <mobile>1118as159</mobile>
</member>
<member>
  <name>test02</name>
  <class>W6s10</class>
  <birth>Nov sds5th</birth>
  <constell>Scoraspio</constell>
  <mobile>1038df818</mobile>
</member>
</list>