2017年9月8日 星期五

Ajax使用XMLHttpRequest物件的寫法(資料來源是html) 


/*資料夾結構*/

├─data

 │ data.html

0909ajax_html.html


<!--檔案：0909ajax_html.html-->

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		var xhr = new XMLHttpRequest();
		xhr.onload=function(){
			if(xhr.status===200){
				//200：伺服器已經回應且無誤 
				//304：未修改
				//404：找不到頁面
				//500：伺服器內部錯誤
				document.write(xhr.responseText);
			}
		}
				// http方法 資料請求頁面URL 指定資料傳輸模式
		xhr.open('GET','data/data.html',true); //準備資料請求
		xhr.send(null); //發送資料請求(無額外資訊)
	</script>
</body>
</html>


<!--檔案：data/data.html-->

<div class="event">
	<img src="https://api.fnkr.net/testimg/350x200/a00/FFF/?text=A">
	<p>A</p>
</div>
<div class="event">
	<img src="https://api.fnkr.net/testimg/350x200/0a0/FFF/?text=B">
	<p>B</p>
</div>
<div class="event">
	<img src="https://api.fnkr.net/testimg/350x200/00a/FFF/?text=C">
	<p>C</p>
</div>




Posted by 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)