關(guān)于AJAX

所謂Ajax，全名Asynchronous JavaScript and XML。（也就異步的JS和XML）

簡單點來講就是不刷新頁面來發(fā)送和獲取數(shù)據(jù)，然后更新頁面。

Ajax的優(yōu)勢

•無需插件支持
•優(yōu)秀的用戶體驗
•提高web程序的性能
•減輕服務(wù)器和帶寬的負擔

Ajax的不足

•瀏覽器兼容不足
•破壞瀏覽器前進和后退按鈕的正常功能
•對搜索引擎的支持不足
•開發(fā)和調(diào)試工具的 缺乏

好吧，這些都是幾年前的不足。技術(shù)的發(fā)展很快，這些不足也會慢慢彌補，起碼現(xiàn)在調(diào)試Ajax并不難。

Ajax的核心是XMLHttpRequest對象，它是Ajax實現(xiàn)的關(guān)鍵。

傳統(tǒng)的實現(xiàn)Ajax的例子就不舉了，太蛋疼了，我都沒記，網(wǎng)上一搜一大堆。

關(guān)于jQuery中的Ajax

$.ajax()方法是封裝了最原始的js的Ajax方式。

load(),$.get(),$.post()是封裝了$.ajax()得來

$.getScript()和$.getJSON()是進一步的封裝。

•load()方法 •用處：載入遠程HTML代碼并插入DOM中，通常用于獲取靜態(tài)的數(shù)據(jù)文件，結(jié)構(gòu)為：load(url [,data] [,callback])。 •url為請求的地址
•data可選，為發(fā)動到服務(wù)器的參數(shù)對象
•callback為回調(diào)函數(shù)，請求不論成功還是失敗都調(diào)用
•載入頁面的時候甚至可以在地址里加上篩選

$("#resDiv").load("test.html .myClass");//這個div里只載入test.html頁面里面 樣式為myClass 的元素


//舉一個完整的例子
$(function(){
$("#resDiv").load("text.php",{name:"troy",textInfo:"hello"},function(responseText,textStatus,XMLHttpRequest){
//responseText：請求返回的內(nèi)容
//textStatus： 請求狀態(tài)：success、error、notmodiffied、timeout 4種 
//XMLHttpRequest: XMLHttpRequest對象
});
}); 

•$.get()方法 •明顯的看到調(diào)用的方式不同，所以說這函數(shù)是jQuery的全局函數(shù)。而此前的方法和load()這種都是對jQuery對象進行操作
•$.get()方法使用GET方式來進行異步請求，結(jié)構(gòu)為：$.get(url [,data] [,callback] [,type]) •前三個參數(shù)就不說了，唯一不同的是callback只有請求成功才調(diào)用
•type參數(shù)為服務(wù)器端返回內(nèi)容的格式，包括xml,html,script,json,text和_default
•例子

$("#send").click(function()
$.get("get1.php"
,{
username:$("#username").val(),
content:$("#content").val()
}
,function(data,textStatus){
//data: 返回的內(nèi)容，可以是XML文檔、JSON文件、HTML片段
//textStatus: 請求狀態(tài)：success、error、notmodiffied、timeout 4種
}
)
}) 

•$.post()方法 •它與get方法的玩法一樣，不過一個是get方式，一個是post方式。
•$.getScript()方法 •有的時候頁面初次加載沒必要獲取所有的腳本，所以jQuery提供了getScript這種方法來直接加載js文件。
•例子

$('#send').click(function(){
$.getScript('test.js',function(){
//do something 這個時候腳本已經(jīng)加載了，不需要再對js文件進行處理
});
}); 

• $.getJSON()方法 •用于加載JSON文件，用法同上，只不過返回的json數(shù)據(jù)而已

$('#send').click(function(){
$.getJSON("myurl",function(data){
var html="";
$.each(data,function(commentIndex，comment){
html+=commentIndex+":"+comment['username']+";";
})
alert(html);
})
});
//注意一下ecch這種玩法，同樣是個全局函數(shù)。他的回調(diào)函數(shù)中，第一個參數(shù)為成員的索引，第二個為變量和內(nèi)容 

順便擴展一下，跨域訪問的JSONP

$("#send").click(function(){
$.getJSON("http://www.某網(wǎng)站.com/services/getMyCmpJson?tags=car&tagmode=any&format=json&jsoncall back=?"
,function(data){
//某些操作
}
)
})

//JSONP是個非官方協(xié)議，采用json與<script>標記結(jié)合的方式，主要用于web應(yīng)用程序跨域

•$.ajax()方法 •這個方法是jQuery最底層的Ajax實現(xiàn)，所以理所當然更加強大以及復雜。

雖然它只有一個參數(shù)，但是這個參數(shù)對象包含的屬性非常多，不過都是可選的。以下列出所有屬性： • url：默認當前頁地址，也可以手動寫請求的地址

•type：默認為GET，也可以寫POST
•timeout:設(shè)置請求超時時間（毫秒）
•data：發(fā)送的數(shù)據(jù)
•dataType：預期服務(wù)器返回的數(shù)據(jù)類型。
•beforeSend：發(fā)送前的調(diào)用的函數(shù)，如果次函數(shù)返回false將取消本次ajax請求。

function(XMLHttpRequest){//XMLHttpRequest是唯一的參數(shù)
this;//調(diào)用本次Ajax請求時傳遞的options參數(shù)
} 

•complete:請求完后，無論成功還是失敗都調(diào)用。

function(XMLHttpRequest，textStatus){//textStatus描述成功請求類型
this;//調(diào)用本次Ajax請求時傳遞的options參數(shù)
}

•success：請求成功后的回調(diào)函數(shù)

function(data,textStatus){//data為成功返回的數(shù)據(jù)
this;//調(diào)用本次Ajax請求時傳遞的options參數(shù)
}

•error：請求失敗調(diào)用的函數(shù)

function(XMLHttpRequest，textStatus,errorThrown){
// textStatus為錯誤信息，errorThrown為捕獲的錯誤對象，通常只有其中一個包含信息
this;//調(diào)用本次Ajax請求時傳遞的options參數(shù)
} 

•global：默認為true。表示是否觸發(fā)全局Ajax事件。
•序列化元素 •serialize()方法 •它能夠?qū)OM元素內(nèi)容序列化為字符串

//不僅可以序列化整個表單，也可以序列化單個元素，并且都是自動編碼過的
$.post("myurl",$("#form1").serialize(),function(data,textStatus){
$("#resText").html(data);
})

•serializeArray()方法 •它能夠?qū)OM元素內(nèi)容序列化為JSON格式
•$.param()方法 •這是serialize方法的核心，用來對一個數(shù)組或?qū)ο蟀凑真I值對進行序列化

var obj={a:1,b:2,c:3};
var k=$.param(obj);//輸出為a=1&b=2&c=3 

•jQuery中的Ajax全局事件 •ajaxStart()方法：當Ajax請求開始就觸發(fā)
•ajaxStop()方法：當Ajax請求結(jié)束就觸發(fā)

<div id="loading">加載中...</div>
$("#loading").ajaxStart(function(){
$(this).show();//ajax開始請求就顯示加載中
});
$("#loading").ajaxStop(function(){
$(this).hide();//ajax開始結(jié)束就隱藏加載中
}); 

•ajaxComplete():當Ajax請求完成就觸發(fā)
•ajaxError():當Ajax請求發(fā)生就觸發(fā),捕捉到的錯誤可以作為最后一個參數(shù)傳遞
•ajaxSend():當Ajax請求發(fā)送前就觸發(fā)
•ajaxSuccess():當Ajax請求成功就觸發(fā)
•如果想使某個Ajax請求不受全局事件的影響，可以在$.ajax中將global屬性設(shè)置為false，這個在前面已經(jīng)講過了。當然也可以在ajax請求前：

$.ajaxPrefilter(function(options){//每次發(fā)送前請求
options.global=true;
})

好吧，寫完了。最后順帶提一下，setTimeout("doMethod()",4000);為4s后執(zhí)行doMethod這個函數(shù)。

//一個簡單的定時發(fā)送功能
function updateMsg(){
$.post("myurl",{time:timestamp},function(xml){
//do something
});
setTimeout("updateMsg()",4000);
}

最新評論