AJAX的伺服器回應內容
ajax的伺服器回應內容:
使用XMLHttpRequest物件的responseText或responseXML屬性可以取得來自伺服器的回應內容。
兩個屬性功能清單如下:
#屬性 | #描述 |
responseText | 取得字串形式的回應數據。 |
responseXML | #取得XML形式的回應資料。 |
一.responseText屬性:
如果來自伺服器回應內容不是XML,那麼要使用responseText屬性來取得。此屬性傳回值是字串格式的,使用方式示範如下:
document.getElementById("show").innerHTML=xmlhttp.responseText;
完整程式碼實例:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.php.cn/" /> <title>php中文网</title> <script> function loadXMLDoc(){ var xmlhttp; if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); } else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("show").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","demo/ajax/txt/demo.txt",true); xmlhttp.send(); } window.onload=function(){ var obt=document.getElementById("bt"); obt.onclick=function(){ loadXMLDoc(); } } </script> </head> <body> <div id="show"><h2>原来的内容</h2></div> <button type="button" id="bt">查看效果</button> </body> </html>
點擊按鈕可以取得文字檔案中的內容,並透過responseText屬性寫入到div中。
二.responseXML屬性:
如果來自伺服器的回應是XML,並且需要作為XML物件進行解析,那麼就需要使用responseXML屬性,使用方式示範如下:
var xmlDoc = xmlhttp.responseXML;
responseXML屬性的回傳值是一個XML對象,完整對象實例如下:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="author" content="http://www.php.cn/" /> <title>php中文网</title> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var xmlDoc = xmlhttp.responseXML; var str = ""; var targets = xmlDoc.getElementsByTagName("target"); for (index = 0; index < targets.length; index++) { str = str + targets[index].childNodes[0].nodeValue + "<br>"; } document.getElementById("show").innerHTML = str; } } xmlhttp.open("GET", "demo/ajax/xml/XML.xml", true); xmlhttp.send(); } window.onload = function () { var obt = document.getElementById("bt"); obt.onclick = function () { loadXMLDoc(); } } </script> </head> <body> <div> <div id="show"></div> <input id="bt" type="button" value="查看效果"/> </div> </body> </html>