一、ajax的簡介
Ajax被認為是(Asynchronous(異步) JAVAScript And Xml的縮寫)。現在,允許瀏覽器與服務器通信而無須刷新當前頁面的技術都被叫做Ajax.
同步是指:發送方發出數據后,等接收方發回響應以后才發下一個數據包的通訊方式。
異步是指:發送方發出數據后,不等接收方發回響應,接著發送下個數據包的通訊方式 。
二、ajax的缺陷
AJAX大量使用了JavaScript和AJAX引擎,而這個取決于瀏覽器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持,Mozilla雖然也支持AJAX,但是提供XMLHttpRequest的方式不一樣。所以,使用AJAX的程序必須測試針對各個瀏覽器的兼容性。
AJAX更新頁面內容的時候并沒有刷新整個頁面,因此,網頁的后退功能是失效的;有的用戶還經常搞不清楚現在的數據是舊的還是已經更新過的。這個就需要在明顯位置提醒用戶“數據已更新”。
對流媒體的支持沒有FLASH好。
一些手持設備(如手機、PDA等)現在還不能很好的支持Ajax。
三、ajax的四種type類型:
1、GET請求會向數據庫發索取數據的請求,從而來獲取信息,該請求就像數據庫的select操作一樣,只是用來查詢一下數據,不會修改、增加數據,不會影響資源的內容,即該請求不會產生副作用。無論進行多少次操作,結果都是一樣的。
2、與GET不同的是,PUT請求是向服務器端發送數據的,從而改變信息,該請求就像數據庫的update操作一樣,用來修改數據的內容,但是不會增加數據的種類等,也就是說無論進行多少次PUT操作,其結果并沒有不同。
3、POST請求同PUT請求類似,都是向服務器端發送數據的,但是該請求會改變數據的種類等資源,就像數據庫的insert操作一樣,會創建新的內容。幾乎目前所有的提交操作都是用POST請求的。
4、DELETE請求顧名思義,就是用來刪除某一個資源的,該請求就像數據庫的delete操作。
簡單的說就是
get理解為查詢 delete就是刪除 post就是新增 put就是更新數據
四、ajax的原生寫法
window.onload = function () {
var oBtn = document.getElementById("btn1");
oBtn.onclick = function () {
//1.創建ajax對象
//只兼容非ie6的瀏覽器,在ie6瀏覽器上運行會提示沒有被定義
//var oAjax = new XMLHttpRequest();//這才是ajax實際的請求
//alert(oAjax);
//ie6瀏覽器下按照下面方法寫,但是在別的瀏覽器中不能用,會報錯。
//var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
//alert(oAjax);
//鑒于上面出現的問題,可以采取下面的方法解決,用if判斷是否為IE6瀏覽器
if (window.XMLHttpRequest)//如果有XMLHttpRequest,那就是非IE6瀏覽器。()里面加window的原因下面會有描述。
{
var oAjax = new XMLHttpRequest();//創建ajax對象
}
else//如果沒有XMLHttpRequest,那就是IE6瀏覽器
{
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6瀏覽器創建ajax對象
}
//2.連接服務器
//open(方法、文件名、異步傳輸)
//方法:
//傳輸方式是get方式還是post方式。
//文件名
//告訴服務器要讀哪個文件
//異步傳輸
//異步:多件事一件一件的做
//同步:多件事情一起進行
//但是js里面的同步和異步和現實的同步異步相反。
//同步:多件事一件一件的做
//異步:多件事情一起進行
//ajax天生是用來做異步的
oAjax.open("GET", "a.txt?t='+new Date().getTime()", true);//加上t='+new Date().getTime()"的目的是為了消除緩存,每次的t的值不一樣。
//3.發送請求
oAjax.send();
//4.接收返回
//客戶端和服務器端有交互的時候會調用onreadystatechange
oAjax.onreadystatechange = function () {
//oAjax.readyState //瀏覽器和服務器,進行到哪一步了。
//0->(未初始化):還沒有調用 open() 方法。
//1->(載入):已調用 send() 方法,正在發送請求。
//2->載入完成):send() 方法完成,已收到全部響應內容。
//3->(解析):正在解析響應內容。
//4->(完成):響應內容解析完成,可以在客戶端調用。
if (oAjax.readyState == 4) {
if (oAjax.status == 200)//判斷是否成功,如果是200,就代表成功
{
alert("成功" + oAjax.responseText);//讀取a.txt文件成功就彈出成功。后面加上oAjax.responseText會輸出a.txt文本的內容
}
else {
alert("失敗");
}
}
};
}
};
五、ajax的jquery寫法:
$.ajax({
url: "http://www.microsoft.com", //請求的url地址
dataType: "json", //返回格式為json
async: true, //請求是否異步,默認為異步,這也是ajax重要特性
data: {
"id": "value"
}, //參數值
type: "GET", //請求方式
processData: false, //對表單data數據是否進行序列化
contentType: false, //dataType設置你收到服務器數據的格式
xhr: function () { //ajax進度條
var xhr = $.ajaxSettings.xhr();
if (onprogress && xhr.upload) {
xhr.upload.addEventListener("progress", progressBar, false);
return xhr;
}
},
beforeSend: function () {
//請求前的處理
},
success: function (req) {
//請求成功時處理
},
complete: function () {
//請求完成的處理
},
error: function () {
//請求出錯處理
}
});
當然,jquery還有很多簡單變形的寫法。






