電子發燒友App
AJAX異步
打個比方吧，通常情況下，用戶注冊，那么用戶首先得填寫好表單，然后點提交，這樣表單就會向服務發出一個請求，則服務器處理代碼，如果用戶存在，則返回一個信息。總之，就是所有的數據需要你點提交后，信息才會發送！
而AJAX就相當于是模擬了一個信息發送請求，你可以在很多網站上注冊的時候會發現，比如用戶名輸入“123”，那么它可能會提示你該用戶已經存在，而給你的感覺是頁面并沒刷新，也就是并沒有提交表單，而用戶名又是存放在數據庫內的，也就是說要查詢用戶名是否存在，就必須得發送表單的里的用戶名，然后再在數據庫中去查詢。
而這個過程就是用了AJAX來處理的，用戶輸入用戶名，當表單的焦點發生變化的時候，則會觸發AJAX，然后AJAX模擬一個GET或者POST請求給服務器，服務器就會處理傳遞過來的數據！而服務器在處理數據的時候，你可以做其它的，比較你可以填寫密碼或者其它的！
Ajax同步和異步的區別
之前一直在寫JQUERY代碼的時候遇到AJAX加載數據都需要考慮代碼運行順序問題。 最近的項目用了到AJAX同步。這個同步的意思是當JS代碼加載到當前AJAX的時候會把頁面里所有的代碼停止加載，頁面出去假死狀態，當這個AJAX執 行完畢后才會繼續運行其他代碼頁面假死狀態解除。
而異步則這個AJAX代碼運行中的時候其他代碼一樣可以運行。
jquery的async:false，這個屬性
默認是true：異步，false：同步。
$.ajax（{
type： “post”，
url： “path”，
cache:false，
async:false，
dataType： （$.browser.msie） ？ “text” ： “xml”，
success： function（xmlobj）{
}
}）;
有了這個屬性可以相對的減少代碼運行書序問題，但是如果用的太多，頁面假死次數太多。這樣反而導致用戶體驗不佳~！
$.Ajax（）中 async 和success的官方的解釋：
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默認的設置值為true，這種情況為異步方式，就是說當ajax發送請求后，在等待server端返回的這個過程中，前臺會繼續 執行ajax塊后面的腳本，直到server端返回正確的結果才會去執行success，也就是說這時候執行的是兩個線程，ajax塊發出請求后一個線程 和ajax塊后面的腳本（另一個線程）例：
$.ajax（{
type：“POST”，
url：“Venue.aspx？act=init”，
dataType：“html”，
success:function（result）{ //function1（）
f1（）;
f2（）;
}
failure:function （result） {
alert（‘Failed’）;
}，
}
function2（）;
在上例中，當ajax塊發出請求后，他將停留function1（），等待server端的返回，但同時（在這個等待過程中），前臺會去執行function2（），也就是說，在這個時候出現兩個線程，我們這里暫且說為function1（） 和function2（）。
當把asyn設為false時，這時ajax的請求時同步的，也就是說，這個時候ajax塊發出請求后，他會等待在function1（）這個地方，不會去執行function2（），知道function1（）部分執行完畢。
之前一直以為只要同步就好了。其實如果同步就失去了ajax的意義。
遇到一個bug.
頁面的加載 加載中。。。。。 引用一個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 //請求開始動畫
15 $（document）.ajaxSend（function （） {
16 alert（1）;
17 if （$（“#ajaxloader”）.length == 0） {
18 $（“body”）.append（loader（“請稍候。。。”））;
19 $（“#ajaxloader，#ajaxloader_zz”）.fadeIn（“normal”）;
20 }
21 }）;
22
23 ////請求成功動畫
24 $（document）.ajaxSuccess（function （） {
25 if （$（“#ajaxloader”）.length 》 0） {
26 $（“#ajaxloader，#ajaxloader_zz”）.fadeOut（“normal”）;
27 $（“#ajaxloader，#ajaxloader_zz”）.remove（）;
28 }
29 }）;
30 //請求錯誤動畫
31 $（document）.ajaxError（function （） {
32 if （$（“#ajaxloader”）.length 》 0） {
33 $（“#ajaxloader，#ajaxloader_zz”）.fadeOut（“normal”）;
34 $（“#ajaxloader，#ajaxloader_zz”）.remove（）;
35 $（“body”）.append（loader（“請求失敗！”））;
36 $（“#ajaxloader，#ajaxloader_zz”）.fadeIn（“normal”）;
37 setTimeout（function （） { $（“#ajaxloader，#ajaxloader_zz”）.fadeOut（“normal”）; $（“#ajaxloader，#ajaxloader_zz”）.remove（）; }， 1000）;
38 }
39 }）;
頁面引用這個js.當有ajax操作時，會有請稍等。。。。的提示
如果頁面中使用的ajax請求是同步的。在google和ie等瀏覽器上不會有此效果。改為異步即可。
注意：添加async:false.即修改為同步了，什么意思？（按同事解釋就是，這是等這個ajax有了返回值后才會執行下面的js。一語道破天機，怪不得以前很多ajax調用里面的賦值都不起作用）。這樣等ajax給bol賦值完畢后，才執行下面的js部分。而剛剛異步的話，還沒有來得及賦值，就已經return了。
工商網監
評論