AJAX異步

　　打個(gè)比方吧，通常情況下，用戶(hù)注冊(cè)，那么用戶(hù)首先得填寫(xiě)好表單，然后點(diǎn)提交，這樣表單就會(huì)向服務(wù)發(fā)出一個(gè)請(qǐng)求，則服務(wù)器處理代碼，如果用戶(hù)存在，則返回一個(gè)信息?？傊褪撬械臄?shù)據(jù)需要你點(diǎn)提交后，信息才會(huì)發(fā)送！

　　而AJAX就相當(dāng)于是模擬了一個(gè)信息發(fā)送請(qǐng)求，你可以在很多網(wǎng)站上注冊(cè)的時(shí)候會(huì)發(fā)現(xiàn)，比如用戶(hù)名輸入“123”，那么它可能會(huì)提示你該用戶(hù)已經(jīng)存在，而給你的感覺(jué)是頁(yè)面并沒(méi)刷新，也就是并沒(méi)有提交表單，而用戶(hù)名又是存放在數(shù)據(jù)庫(kù)內(nèi)的，也就是說(shuō)要查詢(xún)用戶(hù)名是否存在，就必須得發(fā)送表單的里的用戶(hù)名，然后再在數(shù)據(jù)庫(kù)中去查詢(xún)。

　　而這個(gè)過(guò)程就是用了AJAX來(lái)處理的，用戶(hù)輸入用戶(hù)名，當(dāng)表單的焦點(diǎn)發(fā)生變化的時(shí)候，則會(huì)觸發(fā)AJAX，然后AJAX模擬一個(gè)GET或者POST請(qǐng)求給服務(wù)器，服務(wù)器就會(huì)處理傳遞過(guò)來(lái)的數(shù)據(jù)！而服務(wù)器在處理數(shù)據(jù)的時(shí)候，你可以做其它的，比較你可以填寫(xiě)密碼或者其它的！

　　Ajax同步和異步的區(qū)別

　　之前一直在寫(xiě)JQUERY代碼的時(shí)候遇到AJAX加載數(shù)據(jù)都需要考慮代碼運(yùn)行順序問(wèn)題。 最近的項(xiàng)目用了到AJAX同步。這個(gè)同步的意思是當(dāng)JS代碼加載到當(dāng)前AJAX的時(shí)候會(huì)把頁(yè)面里所有的代碼停止加載，頁(yè)面出去假死狀態(tài)，當(dāng)這個(gè)AJAX執(zhí) 行完畢后才會(huì)繼續(xù)運(yùn)行其他代碼頁(yè)面假死狀態(tài)解除。

　　而異步則這個(gè)AJAX代碼運(yùn)行中的時(shí)候其他代碼一樣可以運(yùn)行。

　　jquery的async:false，這個(gè)屬性

　　默認(rèn)是true：異步，false：同步。

　　$.ajax（{

　　type： “post”，

　　url： “path”，

　　cache:false，

　　async:false，

　　dataType： （$.browser.msie） ？ “text” ： “xml”，

　　success： function（xmlobj）{

　　}

　　}）;

　　有了這個(gè)屬性可以相對(duì)的減少代碼運(yùn)行書(shū)序問(wèn)題，但是如果用的太多，頁(yè)面假死次數(shù)太多。這樣反而導(dǎo)致用戶(hù)體驗(yàn)不佳~！

　　$.Ajax（）中 async 和success的官方的解釋?zhuān)?/p>

　　async

　　Boolean

　　Default： true

　　By default， all requests are sent asynchronous （e.g. this is set to true by default）。 If you need synchronous requests， set this option to false. Note that synchronous requests may temporarily lock the browser， disabling any actions while the request is active.

　　success

　　Function

　　A function to be called if the request succeeds. The function gets passed two arguments： The data returned from the server， formatted according to the ‘dataType’ parameter， and a string describing the status. This is an Ajax Event.

　　在 這里，async默認(rèn)的設(shè)置值為true，這種情況為異步方式，就是說(shuō)當(dāng)ajax發(fā)送請(qǐng)求后，在等待server端返回的這個(gè)過(guò)程中，前臺(tái)會(huì)繼續(xù) 執(zhí)行ajax塊后面的腳本，直到server端返回正確的結(jié)果才會(huì)去執(zhí)行success，也就是說(shuō)這時(shí)候執(zhí)行的是兩個(gè)線程，ajax塊發(fā)出請(qǐng)求后一個(gè)線程 和ajax塊后面的腳本（另一個(gè)線程）例：

　　$.ajax（{

　　type：“POST”，

　　url：“Venue.aspx？act=init”，

　　dataType：“html”，

　　success:function（result）{ //function1（）

　　f1（）;

　　f2（）;

　　}

　　failure:function （result） {

　　alert（‘Failed’）;

　　}，

　　}

　　function2（）;

　　在上例中，當(dāng)ajax塊發(fā)出請(qǐng)求后，他將停留function1（），等待server端的返回，但同時(shí)（在這個(gè)等待過(guò)程中），前臺(tái)會(huì)去執(zhí)行function2（），也就是說(shuō)，在這個(gè)時(shí)候出現(xiàn)兩個(gè)線程，我們這里暫且說(shuō)為function1（） 和function2（）。

　　當(dāng)把a(bǔ)syn設(shè)為false時(shí)，這時(shí)ajax的請(qǐng)求時(shí)同步的，也就是說(shuō)，這個(gè)時(shí)候ajax塊發(fā)出請(qǐng)求后，他會(huì)等待在function1（）這個(gè)地方，不會(huì)去執(zhí)行function2（），知道function1（）部分執(zhí)行完畢。

　　之前一直以為只要同步就好了。其實(shí)如果同步就失去了ajax的意義。

　　遇到一個(gè)bug.

　　頁(yè)面的加載 加載中。。。。。 引用一個(gè)publish.js

　　1 function loader（m） {

　　2 var left = （window.innerWidth / 2） - 83;

　　3 var top = window.innerHeight / 2 - 60;

　　4 var height = 50;

　　5 var html =

　　6 ‘《div id=“ajaxloader_zz” style=“z-index： 9999998; position： absolute; top： 0px; left： 0; width： 100%; height： 100%; opacity： 0; ”》《/div》’ +

　　7 ‘《div id=“ajaxloader” style=“width:200px;height:100px; text-align:center;background-color:snow;border-radius:5px; position:fixed;top：’ + top + ‘px;left：’ + left + ‘px;z-index:9999999;”》’ +

　　8 ‘《table style=“vertical-align:middle;text-align:center; width:100%;height:100%;”》’ +

　　9 ‘《tr》《td》《div style=“margin-top:20px;”》《img src=“。。/images/loading.gif” /》《/div》《/td》《/tr》’ +

　　10 ‘《tr》《td》《span style=“color:black;font-family:Helvetica-Regular;font-weight:bold;font-size:16px”》’ + m + ‘《/span》《/td》《/tr》《/table》《/div》’;

　　11 return html;

　　12 }

　　13

　　14 //請(qǐng)求開(kāi)始動(dòng)畫(huà)

　　15 $（document）.ajaxSend（function （） {

　　16 alert（1）;

　　17 if （$（“#ajaxloader”）.length == 0） {

　　18 $（“body”）.append（loader（“請(qǐng)稍候。。?！保?

　　19 $（“#ajaxloader，#ajaxloader_zz”）.fadeIn（“normal”）;

　　20 }

　　21 }）;

　　22

　　23 ////請(qǐng)求成功動(dòng)畫(huà)

　　24 $（document）.ajaxSuccess（function （） {

　　25 if （$（“#ajaxloader”）.length 》 0） {

　　26 $（“#ajaxloader，#ajaxloader_zz”）.fadeOut（“normal”）;

　　27 $（“#ajaxloader，#ajaxloader_zz”）.remove（）;

　　28 }

　　29 }）;

　　30 //請(qǐng)求錯(cuò)誤動(dòng)畫(huà)

　　31 $（document）.ajaxError（function （） {

　　32 if （$（“#ajaxloader”）.length 》 0） {

　　33 $（“#ajaxloader，#ajaxloader_zz”）.fadeOut（“normal”）;

　　34 $（“#ajaxloader，#ajaxloader_zz”）.remove（）;

　　35 $（“body”）.append（loader（“請(qǐng)求失??！”））;

　　36 $（“#ajaxloader，#ajaxloader_zz”）.fadeIn（“normal”）;

　　37 setTimeout（function （） { $（“#ajaxloader，#ajaxloader_zz”）.fadeOut（“normal”）; $（“#ajaxloader，#ajaxloader_zz”）.remove（）; }， 1000）;

　　38 }

　　39 }）;

　　頁(yè)面引用這個(gè)js.當(dāng)有ajax操作時(shí)，會(huì)有請(qǐng)稍等。。。。的提示

　　如果頁(yè)面中使用的ajax請(qǐng)求是同步的。在google和ie等瀏覽器上不會(huì)有此效果。改為異步即可。

　　注意：添加async:false.即修改為同步了，什么意思？（按同事解釋就是，這是等這個(gè)ajax有了返回值后才會(huì)執(zhí)行下面的js。一語(yǔ)道破天機(jī)，怪不得以前很多ajax調(diào)用里面的賦值都不起作用）。這樣等ajax給bol賦值完畢后，才執(zhí)行下面的js部分。而剛剛異步的話，還沒(méi)有來(lái)得及賦值，就已經(jīng)return了。