To obtain a response from the server, use the responseText or responseXML property of the XMLHttpRequest object.
ResponseText and ResponseXML
The content of the response message may come in many different forms, such as XML, plain text, (X)HTML or JavaScript Object Notation (JSON) . We can process it in two different ways depending on the format of the data received: using responseText or responseXML.
The responseText method is used for formats that are not based on XML. It takes the response information as a string and returns the exact content. Plain text, (X)HTML, and JSON all use responseText. responseText can not only add content to the page, it is also useful when debugging AJAX requests. For example, you may not be ready to analyze the data because you don't yet know what all the tags look like, whether they are in XML format or JSON files. This requires a way to detect the data being analyzed. Once you know all the tag names, all you need to do is write the code.
The use of responseXML is also quite simple. But similar to the JSON format, XML requires data analysis. The first thing we need to do is identify the root node in the XML response.
var response = ajax.request.responseXML.documentElement;
Next step, we get all the elements by name and get their values:
var header = response.getElementsByTagName('header')[0].firstChild.data;
##var description = response.getElementsByTagName('description ')[0].firstChild.data;
var sourceUrl = response.getElementsByTagName('sourceUrl')[0].firstChild.data;
Finally, we display the response information in the corresponding div tag:$("body").html("<b>" + header + "</b> <br/>" + ;/a>";
<!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>and parse the response:
<!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>Example: innerHTML.xml file <!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><?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>
