1. 程式人生 > >ajax學習筆記-XMLHttpRequest物件的使用

ajax學習筆記-XMLHttpRequest物件的使用

XMLHttpRequest物件主要用於獲取並解析檔案內容,常用有以下四種方式

一、獲取文字檔案

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="oned">
		<script type="text/javascript">
			var xhr=new XMLHttpRequest();
			var mothed="GET";
			var url="1.txt";
			xhr.open(mothed,url);
			xhr.send();
			xhr.onreadystatechange=function(){
					if (xhr.readyState==4) {
						//取出文字輸出到頁面
						document.getElementById("oned").innerHTML=xhr.responseText;
					}
				}
		</script>
</div>
</body>
</html>
二、獲取js檔案並執行js程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="oned">
		<script type="text/javascript">
			var xhr=new XMLHttpRequest();
			var mothed="GET";
			var url="2.js";
			xhr.open(mothed,url);
			xhr.send();
			xhr.onreadystatechange=function(){
					if (xhr.readyState==4) {
						//直接執行js檔案內容
						eval(xhr.responseText);
					}
				}
		</script>
</div>
</body>
</html>
三、獲取xml檔案並解析
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div id="oned">
		<script type="text/javascript">
			var xhr=new XMLHttpRequest();
			var mothed="GET";
			var url="3.xml";
			xhr.open(mothed,url);
			xhr.send();
			xhr.onreadystatechange=function(){
					if (xhr.readyState==4) {
						//取出xml檔案內容轉換為字串物件輸出到頁面
						var strcont="name="+xhr.responseXML.getElementsByTagName("name")[0].innerHTML+="		pwd="+xhr.responseXML.getElementsByTagName("name")[1].innerHTML;
						document.getElementById("oned").innerHTML=strcont;
					}
				}
		</script>
	</div>
</body>
</html>

四、獲取json檔案並解析成js物件,通過物件訪問內容

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div id="oned">
		<script type="text/javascript">
			//建立XMLHttpRequest物件
			var xhr=new XMLHttpRequest();
			var mothed="GET";
			var url="4.json";
		   //開始請求
			xhr.open(mothed,url);
			//傳送請求
			xhr.send();
			//獲取狀態變化次數
			xhr.onreadystatechange=function(){
				//判斷在第四次變化的時候執行動作
					if (xhr.readyState==4) {
						//取出json檔案內容轉換為js物件輸出到頁面
						//	ecma5以上可用
						var user=JSON.parse(xhr.responseText);
						//適用於老版本相容
						//var user = eval("("+xhr.responseText+")");
						document.getElementById("oned").innerHTML=user.name+"       "+user.pwd;
					}
				}
		</script>
	</div>
</body>
</html>