關(guān)于AJAX

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

簡(jiǎn)單點(diǎn)來(lái)講就是不刷新頁(yè)面來(lái)發(fā)送和獲取數(shù)據(jù)，然后更新頁(yè)面。

Ajax的優(yōu)勢(shì)

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

Ajax的不足

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

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

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

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

關(guān)于jQuery中的Ajax

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

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

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

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

$("#resDiv").load("test.html .myClass");//這個(gè)div里只載入test.html頁(yè)面里面 樣式為myClass 的元素//舉一個(gè)完整的例子$(function(){$("#resDiv").load("text.php",{name:"troy",textInfo:"hello"},function(responseText,textStatus,XMLHttpRequest){//responseText：請(qǐng)求返回的內(nèi)容//textStatus： 請(qǐng)求狀態(tài)：success、error、notmodiffied、timeout 4種 //XMLHttpRequest: XMLHttpRequest對(duì)象});}); 

•$.get()方法 •明顯的看到調(diào)用的方式不同，所以說(shuō)這函數(shù)是jQuery的全局函數(shù)。而此前的方法和load()這種都是對(duì)jQuery對(duì)象進(jìn)行操作
•$.get()方法使用GET方式來(lái)進(jìn)行異步請(qǐng)求，結(jié)構(gòu)為：$.get(url [,data] [,callback] [,type]) •前三個(gè)參數(shù)就不說(shuō)了，唯一不同的是callback只有請(qǐng)求成功才調(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: 請(qǐng)求狀態(tài)：success、error、notmodiffied、timeout 4種})}) 

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

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

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

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

順便擴(kuò)展一下，跨域訪問(wèn)的JSONP

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

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

•$.ajax()方法 •這個(gè)方法是jQuery最底層的Ajax實(shí)現(xiàn)，所以理所當(dāng)然更加強(qiáng)大以及復(fù)雜。

雖然它只有一個(gè)參數(shù)，但是這個(gè)參數(shù)對(duì)象包含的屬性非常多，不過(guò)都是可選的。以下列出所有屬性： • url：默認(rèn)當(dāng)前頁(yè)地址，也可以手動(dòng)寫(xiě)請(qǐng)求的地址

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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