Jquery的Ajax總結

04-28

使用Ajax的流程：

//createXHR()function createXHR(){ if(typeof XMLHttpRequest != "undefined"){ return new XMLHttpRequest(); }else if(type ActiveXObject != "undefined"){ return new ActiveXObject(); }else{ return new Error("No XHR object available") }}//創建一個XMLHttpRequest對象var xhr = createXHR();//註冊回調函數xhr.onreadyStatechange = function(){ if(xhr.readState == 4){ if(xhr.status >= 200){ alert(xhr.responseText); } }}//啟動調用open()//參數分別為發送請求方式，目標文件地址，是否非同步xhr.open("GET/POST",url,true);//發送請求send()xhr.send(null);

Jquery的Ajax方法：

load()

載入頁面
//載入整個頁面$("#resText").load("test.html");//篩選載入頁面$("#resText").load("test.html .par");
傳遞參數
//傳遞方式無參默認為GET$("#resText").load("test.html");//傳遞方式有參數為POST$("#resText").load("test.html",{ name:"cwg"});
回調函數
//回調函數 load()中無論請求是否成功總是執行回調函數// $("#resText").load("test.html",function(responseText, textStatus, XMLHttpRequest){ //參數分別代表 // responseText : 響應請求返回的內容 // textStatus : 請求狀態：success、error、notmodified、timeout 4種 // XMLHttpRequest : XMLHttpRequest對象})

get() / post()

get()
//$.get(url[,data][,callback][,type])url : 請求頁面data : 發送的數據callback : 回調函數（返回成功時調用）type : 伺服器端返回的內容格式//get實例$.get("php/test.php",{ username : $("#username").val(), password : $("#password").val() },function(data,textStatus){ // data: 返回內容：xml/json/.. // textStatus: 請求狀態：success/error/notmodified/timeout $("#resText").html(data); },"json")
post()
同get()
區別

提交方式
傳輸大小（get通常 < 2k）
get 會被瀏覽器緩存不安全
獲取方式不同，$_GET[ ] / $_POST[ ]，但是$_REQUEST[ ]獲取

ajax()

//以上所有方法全部都可以用ajax()實現$.ajax({ //發送請求地址（默認當前頁地址） url : String, //請求方式(默認get) 可選：get/post/put(部分)/delete(部分) type : String, //延遲毫秒數 timeout : Number, //發送至伺服器的數據 data : Object/String, //預期伺服器返回類型可選：xml/html/script/json/jsonp/text dataType : String, //發送前修改XMLHttpRequest對象函數 //以下this均為本次調用Ajax傳遞的options參數 beforeSend : function(XMLHttpRequest){ this; }, //完成後的回調函數 complete : function(XMLHttpRequest,textStatus){ this; }, //調用成功的回調函數 data可能是html/text/.. success : function(data,textStatus){ this; } //請求失敗時返回的函數通常後兩個參數只有一個包含信息 error : function(XMLHttpRequest,textStatus,errorThrown){ this;} //是否出發全局Ajax事件 global: Boolean})

序列化

目的：為了傳遞數據時一個個寫json屬性值工作量大，且缺乏彈性
返回String類型
$.get("php/test.php",{ username : $("#username").val(); password : $("#password").val();},function(data,textStatus){ $("#resText").html(data);})
以上代碼等價於：

//serialize()的應用$.get("php/test.php",$("#form").serialize(),function(data,textStatus){ $("#resText").html(data);})//serialize()的核心 --- param()var obj = {a:1,b:2,c:3};var key = $.param(obj);console.log(key); //a=1&b=2&c=3
返回Json類型
//serializeArray()$(":checkbox,:radio").serializeArray();

Jquery中Ajax全局事件

//ajax請求開始時執行 $("#form1").ajaxStart(function(){ loading盒子顯示 }); //ajax請求結束後執行 $("#form1").ajaxStop(function(){ loading盒子隱藏 }); //ajax請求完成時執行 $("#form1").ajaxComplete(function(){ ... },error); //ajax請求錯誤時執行,捕獲到的錯誤可以作為最後一個參數傳遞 $("#form1").ajaxError(function(){ ... }); //ajax請求發送前執行 $("#form1").ajaxSend(function(){ ... }); //ajax請求成功時執行 $("#form1").ajaxSuccess(function(){ ... });