Ajax返回xml類型數據

時間 2019-11-18

標籤 ajax 返回 xml 類型數據欄目 Ajax 简体版

原文原文鏈接

ajax能夠返回文本類型數據和xml類型數據，xml是計算機通用語言
可使用js解析返回xml類型數據的dom對象

前端頁面javascript

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Ajax</title>
<script type="text/javascript">
function createXHR(){
    var xhr=null;
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest();
    }else if(window.ActiveXObject){
        xhr=new ActiveXObject('Microsoft.XMLHttp');
    }
    return xhr;
}
function returnxml(){
	var xhr=createXHR();
	xhr.open('GET','./returnxml.php',true);

	xhr.onreadystatechange=function (){
		if(this.readyState==4&&this.status==200){
			//alert(this.responseXML);//[object XMLDocument]
			var xmldom=this.responseXML;
			var title=xmldom.getElementsByTagName('title')[0];
			var title=title.firstChild.wholeText;
			var str='書名:'+title+'<br/>';
			var price=xmldom.getElementsByTagName('price')[0].firstChild.wholeText;
			var desc=xmldom.getElementsByTagName('desc')[0].firstChild.wholeText;
			str=str+'價格:'+price+'<br/>';
			str=str+'詳細信息：'+desc+'<br/>';
			str=str+'狀態碼：'+this.status+'<br/>';
			str=str+'狀態文字：'+this.statusText+'<br/>';
			str=str+'返回值類型：'+this.getResponseHeader('content-type')+'<br/>';
			str=str+'返回值長度：'+this.getResponseHeader('content-length')+'<br/>';
			str=str+'ip：'+this.getResponseHeader('x-forwarded-for')+'<br/>';
			document.getElementById('book').innerHTML=str;
		}
	}
	xhr.send(null);
} 
</script>
 </head>
 <body>
  <input type="button" value="返回值xml" onclick="returnxml();"/>
  <div id="book"></div>
 </body>
</html>

returnxml.phpphp

<?php
header('content-type:text/xml');
?>
<?xml version="1.0" encoding="utf8" ?>
<bookstore><book><title>ajax詳解</title><price>39.9元</price><desc>學習ajax的最強幫</desc></book></bookstore>

結果顯示效果html