JavaScript:創建ajax簡單應用

創建ajax步驟:創建ajax對象、連接到服務器、發送請求、接收返回值。實例如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>my ajax</title>
<script type="text/javascript">
window.onload = function(){
	var oBtn = document.getElementById('btn1');

	oBtn.onclick = function(){
		//1.創建一個ajax對象 
		var oAjax = new XMLHttpRequest();
		//2.連接服務器
		//open(方法,文件名,異步傳輸)
		oAjax.open('GET','abc.txt?t='+new Date().getTime(),true); //?去緩存
		//3.發送請求
		oAjax.send();
		//4.接收返回信息
		oAjax.onreadystatechange = function(){
			/*readyState = 
			0 (未初始化)還沒有調用open()方法
			1 (載入)已調用send()方法,正在發送請求
			2 (載入完成)send()方法完成,已收到全部響應內容 
			3 (解析)正在解析響應內容
			4 (完成)響應內容解析完成,可以在客戶端調用了
			*/
			if(oAjax.readyState==4) //讀取完成
			{
				if(oAjax.status == 200) //status表示請求結果,200表示讀取成功,除了200基本都是失敗
				{
					alert("success:"+oAjax.responseText);
				}
				else{
					alert("failed:"+oAjax.status);
				}
			}
		};
	};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="按鈕"></input>
</body>
</html>

注意:該例程需要在本地服務器上運行,不然無法使用ajax。

使用wamp搭建的服務器運行結果
直接路徑運行結果

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章