Ajax的get和post使用和案例分享

ajax學習筆記

使用ajax需要先創建一個對象，用於在後臺與服務器交換數據

//xmlhttp 這個名字可以隨便起
var xmlhttp = new XMLHttpRequest();

當創建完對象後，需要向服務器發起請求

發送請求我們需要使用，XMLHttpRequest對象的open()和send()方法

xmlhttp.open("GET","test.txt",true);
xmlhttp.send();

說明

open() 屬性解析：

1.method：請求的類型，GET或POST

2.url:文件的路徑

3.async：異步 true 或 同步 false

send(string) 屬性解析：

• 將數據發送到服務器
• string 僅限於POST請求

GET和POST的區別

GET方法：

1. GET比POST更快更簡單，大部分都可以使用。

POST方法：

1.無法使用緩存文件；

2.向服務器發送大量數據(POST沒有數據量限制)；

3.涉及敏感字符時；

當發送到服務器時，還需要執行一些基於響應的任務。那麼我們就需要一個事件來監控它。

onreadystatechange 事件。每當狀態改變時就會調用這個函數。
readyState存有XMLHttpRequest狀態。分別是從0~4。
0：請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒

每當readyState發生改變就會調用onreadystatechange函數。

除此之外，我們還需要另一個狀態碼–status。我們只要記住200表示的是成功，404表示未找到頁面。

在readyState4並且status200時，表示相應已就緒。

get請求例子（1）

<h3 id="text">點擊按鈕改變文字</h3>
<input type="button" value="按鈕" onclick="loadXMLDoc()">

<script type="text/javascript">
	function loadXMLDoc(){//點擊後調用的函數
		var xmlhttp = new XMLHttpRequest();//創建一個對象，用於在後臺與服務器交換數據
		xmlhttp.onreadystatechange = function(){//狀態發生變化時，函數被回調
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
				document.getElementById("text").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("GET","test.txt",true);
		xmlhttp.send();
	}
</script>

get請求例子(2)

<div>
	<div>
		<h3 id='mydiv'>點擊按鈕，這裏就變字</h3>
	</div>
	<input type="button" onclick="loadXMLDoc()" value="點擊變字">
</div>
<script type="text/javascript">
	function loadXMLDoc(){//get方法
		var xmlhttp;
		xmlhttp = new XMLHttpRequest();//創建一個對象，用於在後臺與服務器交換數據
		xmlhttp.onreadystatechange = function(){//狀態發生變化時，函數被回調
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
				document.getElementById("mydiv").innerHTML = xmlhttp.responseText;
			}
		}
		//Math.floor(Math.random()*10)會產生一個1到9的數字
		xmlhttp.open("GET","get.php?rdm="+Math.floor(Math.random()*10),true);
		xmlhttp.send();
		}
</script>

post請求例子

<div id="box">
	<div>
		<h3 id="test">點擊按鈕變字</h3>
	</div>
	<input type="button" value="點擊變字" onclick="loadXMLDoc()" />
</div>

<script type="text/javascript">
	function loadXMLDoc(){
		var xmlhttp;
		xmlhttp = new XMLHttpRequest();
		xmlhttp.onreadystatechange = function(){
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
				document.getElementById('test').innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("POST","post.php",true);
		xmlhttp.send();
	}
</script>

ajax例子網址