DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery ajax請求方式與提示用戶正在處理請稍等
jquery ajax請求方式與提示用戶正在處理請稍等
編輯:JQuery特效代碼     

初次使用$.ajax() ,我沒有去區分過ajax的異步請求和同步請求的不同,剛開始使用同步請求,以至後來出現許多問題,特別在體驗度方面。
異步和同步:
同步意味著執行完一段程序才能執行下一段,它屬於阻塞模式,其表現在網頁上的現象是——浏覽器會鎖定頁面(即所謂的頁面假死狀態),用戶不能操作其它的,必須等待當前請求返回數據。而使用異步方式請求,頁面不會出現假死現象。
提升用戶體驗度:
當用戶提交數據等待頁面返回結果是需要時間的,有時這段等待時間比較長,為了提高用戶體驗度,我們通常會給出 “正在處理,請稍等!”諸如此類的提示。我們可通過設置$.ajax()下的參數beforeSend()來實現,
eg:
html關鍵代碼

<div id="warning"></div>

js文件中的關鍵代碼

$.ajax(function(){
.
.
.
//省略了一些參數,這裡只給出async 和 beforeSend
async: false, //同步請求,默認情況下是異步(true)
beforeSend: function(){
$('#warning').text('正在處理,請稍等!');
}
});

注意,如果你按照同步設置 async: false, $('#warning').text('正在處理,請稍等!');在網頁中根本沒有出現效果,如果將$('#warning').text('正在處理,請稍等!');換成 alert(‘test');在發送請求前會立即看到彈出框,這說明 beforeSend:是執行了,但是換成別的諸如 $('#warning').text('正在處理,請稍等!'); 在請求發出返回結果了都沒有看到提示出現。關於這個問題,我是納悶了很久,問題到底是什麼我還是不清楚。
把同步請求改成異步請求,上面的問題就沒有了,

beforeSend: function(){
$('#warning').text('正在處理,請稍等!');
}

會立即被執行。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved