AJAX - 服务器 响应
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
ResponseText和ResponseXML
响应信息的内容可能有多种不同的形式,例 如XML、纯文本、(X)HTML或JavaScript对象符号(JSON)。我们可以根据所接收到的数据格式的不同,用两种不同的方法来处理:使用 responseText或者responseXML。
responseText方法用于那些并非基于XML的格式。它把响应信息作为字符串,返回精确的 内容。纯文本、(X)HTML和JSON都使用responseText。responseText不仅可以给页面添加内容,它在调试AJAX请求的时候也有用处。例如,你可能还没有准备好分析数据,因为你还不知道所有的标签 是什么样的,是XML格式的还是JSON文件。这就要求有一种用于检测被分析数据的途径。一旦你知道了所有的标签名称,所需要做的事情就只是编写代码 了。
responseXML的使用也相当简单。但是与JSON格式类似,XML要求进行数据分析。我们需要执行的第一项事务是识别出XML响应信息中的根节点。
var response = ajax.request.responseXML.documentElement;
下一步,我们通过名称获取所有的元素并得到它们的值:
var header = response.getElementsByTagName(’header’)[0].firstChild.data;
var description = response.getElementsByTagName(’description’)[0].firstChild.data;
var sourceUrl = response.getElementsByTagName(’sourceUrl’)[0].firstChild.data;
最后,我们把响应信息显示在相应的div标记中:
$("body").html("<b>" + header + "</b><br/>"
+ description + "<br/><br/>"
+ "<a href=’" + sourceUrl + "'>Download the source files</a>";
responseText 属性返回字符串形式的响应:
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性
请求 cd_catalog.xml 文件,并解析响应:
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
var txt,x,i;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;
}
}
xmlhttp.open("GET","cd_catalog.xml",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>My CD Collection:</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
</body>
</html>实例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8" />
<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){
document.getElementById("results").innerHTML=xmlHttp.responseText;
}
}
}
</script>
</head>
<body>
<form>
<input type="button" value="Search for Today's Activities" onclick="startRequest();"/>
</form>
<div id="results"></div>
</body>
</html>innerHTML.xml文件
<?xml version="1.0" encoding="utf-8"?> <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>

末日的春天
看不懂哎,还要回炉
8年前 添加回复 0