文章目錄
一、 什麼是Ajax？
Ajax 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創建交互式、快速動態網頁應用的網頁開發技術，無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。
通過在後臺與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新。這意味着可以在 不重新加載整個網頁 的情況下，對網頁的某部分進行更新 。
二、 Ajax的執行過程
爲了方便大家瞭解Ajax的執行過程，我這裏舉一個打電話的例子來和Ajax執行過程對應。
在平時生活中我們如果需要給朋友打電話大致需要經過這4個步驟：
- 有一部手機
- 撥號
- 說
- 聽
那麼我們的Ajax也差不多就是這4個步驟 如圖：
2.1 創建Ajax對象
注意兼容性問題：IE5-IE6使用 Ajax=new ActiveXObject("Microsoft.XMLHTTP");
其他使用：Ajax=new XMLHttpRequest();
創建Ajax對象:
<body>
<input type="button" id="btn" value="讀取">
</body>
<script>
window.onload=function(){
var btn = document.getElementById('btn');
btn.onclick=function(){
//1.創建Ajax對象
var Ajax;
if(window.XMLHttpRequest){
//非IE6情況
Ajax=new XMLHttpRequest();
}else{
//IE6
Ajax=new ActiveXObject('Microsoft.XMLHTTP');
}
}
}
</script>
在這裏我們提一個JS當中的小問題，當我們
彈出沒有定義的變量: 會報錯
彈出沒有定義的屬性: undefined
所以這裏我們在判斷兼容性的時候需要使用: window.XMLHttpRequest()
如果沒有使用window的話，在IE6模式下，這裏會直接報錯。
2.2 .open() 連接到服務器
如需連接到服務器，我們使用 XMLHttpRequest 對象的 open() 方法：
例如：Ajax.open('GET','abc.txt',true);
GET 還是 POST？
與 POST 相比， GET 更簡單也更快 ，並且在大部分情況下都能用。
然而，在以下情況中，請使用 POST 請求：
- 無法使用緩存文件（更新服務器上的文件或數據庫）
- 向服務器發送大量數據（POST 沒有數據量限制）
- 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠
GET方式特點:
- 通過url傳遞數據 並且是 name=value&&nameTwo=valueTwo 這種樣式
- GET方式的容量小，不適合傳遞大量數據
- 安全性差
- 大多數情況用來獲取數據
POST方式特點:
- 通過http content方式傳遞數據
- 容量大
- 安全性稍微好一些
- 向服務器發送數據
Ajax的POST方式寫法：
如果需要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。然後在 send() 方法中規定您希望發送的數據：
Ajax.open("POST","/try/ajax/demo_post2.php",true);
Ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
Ajax.send("fname=Peng&lname=Gang");
參考菜鳥：菜鳥教程：Ajax POST請求
Ajax的GET方式寫法:
<script>
window.onload=function(){
var btn = document.getElementById('btn');
btn.onclick=function(){
//1.創建Ajax對象
var Ajax;
if(window.XMLHttpRequest){
//非IE6情況
Ajax=new XMLHttpRequest();
}else{
//IE6
Ajax=new ActiveXObject('Microsoft.XMLHTTP');
}
//2.連接服務器
//open(連接的方法[GET,POST],文件名,是否異步傳輸);
Ajax.open('GET','abc.txt',true);
}
}
</script>
在上面的例子中，您很有可能得到的是緩存的結果，爲了避免這種情況，請向 URL 添加一個唯一的 ID：
例如：
Math.random();
改進過後:
<script>
window.onload=function(){
var btn = document.getElementById('btn');
btn.onclick=function(){
//1.創建Ajax對象
var Ajax;
if(window.XMLHttpRequest){
//非IE6情況
Ajax=new XMLHttpRequest();
}else{
//IE6
Ajax=new ActiveXObject('Microsoft.XMLHTTP');
}
//2.連接服務器
//open(連接的方法[GET,POST],文件名,是否異步傳輸);
Ajax.open('GET','abc.txt?t='+Math.random(),true);
}
}
</script>
2.3 .send() 發送請求
發送請求很簡單，只需要調用send()方法即可。
完整代碼:
<script>
window.onload=function(){
var btn = document.getElementById('btn');
btn.onclick=function(){
//1.創建Ajax對象
var Ajax;
if(window.XMLHttpRequest){
//非IE6情況
Ajax=new XMLHttpRequest();
}else{
//IE6
Ajax=new ActiveXObject('Microsoft.XMLHTTP');
}
//2.連接服務器
//open(連接的方法[GET,POST],文件名,是否異步傳輸);
Ajax.open('GET','abc.txt?t='+Math.random(),true);
//3.發送請求
Ajax.send();
}
}
</script>
2.4 .onreadystatechange 事件 接收返回值
首先我們需要知道 XMLHttpRequest 對象的三個重要的屬性：
當請求被髮送到服務器時，我們需要執行一些基於響應的任務，每當 readyState 改變時，就會觸發 onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態信息。
在 onreadystatechange事件中，我們規定當服務器響應已做好被處理的準備時所執行的任務。
當 readyState 等於 4 且狀態爲 200 時，表示讀取成功：
.responseText()，可以返回讀取到的結果
實例:
<script>
window.onload=function(){
var btn = document.getElementById('btn');
btn.onclick=function(){
//1.創建Ajax對象
var Ajax;
if(window.XMLHttpRequest){
//非IE6情況
Ajax=new XMLHttpRequest();
}else{
//IE6
Ajax=new ActiveXObject('Microsoft.XMLHTTP');
}
//2.連接服務器
//open(連接的方法[GET,POST],文件名,是否異步傳輸);
Ajax.open('GET','abc.txt?t='+Math.random(),true);
//3.發送請求
Ajax.send();
//4.接收返回值
Ajax.onreadystatechange=function(){
//4讀取完成 200讀取成功
// if(Ajax.readyState==4 && Ajax.status == 200){
// alert('成功');
// }
if(Ajax.readyState==4){
if(Ajax.status == 200){
alert('讀取成功:'+Ajax.responseText);
}else{
alert('讀取失敗:'+Ajax.status);
}
}
};
}
}
</script>