1. 程式人生 > >ajax同步和非同步的差異

ajax同步和非同步的差異

一、web中的同步和非同步:

(1)同步請求:順序處理,即當我們向伺服器發出一個請求時,在伺服器沒返回結果給客戶端之前,我們要一直處於等待狀態直至伺服器將結果返回到客戶端,我們才能執行下一步操作。例如普通的B/S模式就是同步請求(注:B/S模式 也即伺服器與瀏覽器通訊主要採用HTTP協議;通訊方式為“請求——響應”,瀏覽器發出請求;伺服器做出響應。)

(2)非同步請求:並行處理,當我們向伺服器發出一個請求時,在伺服器沒返回結果之前,我們還是可以執行其他操作。例如AJAX技術就是非同步請求。


二、ajax中的同步與非同步:

不要懷疑,在ajax中其實也存在著同步請求的選項,下面就讓我們重點來說說這塊的內容。各位小夥伴搬好小板凳坐好了嗎?咱們要開始講解了哈:


ajax的open()方法

用法:open(http-method,url,async,userID,password)

後面是帳號和密碼,在禁止匿名訪問的http頁面中,需要使用者名稱和口令。

ajax.open方法中,第3個引數是設同步或者非同步。prototype等js類庫一般都預設為非同步,即設為true。 先說下同步的情況下,js會等待請求返回,獲取status。不需要onreadystatechange事件處理函式。 而非同步則需要onreadystatechange事件處理,且值為4再正確處理下面的內容。

首先看看非同步處理方式。

其中async是一個布林值。如果是非同步通訊方式(true),客戶機就不等待伺服器的響應;如果是同步方式(false),客戶機就要等到伺服器返回訊息後才去執行其他操作。我們需要根據實際需要來指定同步方式,在某些頁面中,可能會發出多個請求,甚至是有組織有計劃有隊形大規模的高強度的request,而後一個是會覆蓋前一個的,這個時候當然要指定同步方式:Flase。

請求方式

GET

最為常見的HTTP請求,普通上網瀏覽頁面就是GET。GET方式的引數請求直接跟在URL後,以問號開始。(JS中用window.location.search獲得)。引數可以用encodeURIComponent進行編碼,使用方式:

1

var EnParam = encodeURIComponent(param);

URL只支援大約2K的長度,即2048字元數;

使用GET進行AJAX請求時候會快取導致出現的頁面不是正確的,一般方法加random引數值;

ajax.send(null)。

POST

向伺服器提交資料用到。

需要將form表單中的值先取出轉換成字串,用&符號連線,(同GET傳引數一樣);

提交資料量2GB;

使用ajax.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’),處理提交的字串;

ajax.send(strings),這個strings表示form中需要提交的內容,例如a=1&b=2類似這樣的字串。


下面是ajax中同步請求與非同步請求的程式碼示例,相信通過程式碼的比較,大家理解起來就不難了:


  
  1. <script>
  2. //同步示例
  3. function
    RequestByGet(nProducttemp, nCountrytemp)
    {
  4. var xmlhttp
  5. if( window.XMLHttpRequest) {
  6. //isIE = false;
  7. xmlhttp = new
    XMLHttpRequest();
  8. } else if( window.ActiveXObject) {
  9. //isIE = true;
  10. xmlhttp = new ActiveXObject( "Microsoft.XMLHTTP");
  11. }
  12. //Web page location.
  13. var URL = "http://www.baidu.com/;
  14. xmlhttp.open("GET ", URL, false);
  15. //xmlhttp.SetRequestHeader("Content-Type ","text/html; charset=Shift_JIS ")
  16. xmlhttp.send(null);
  17. var result = xmlhttp.status;
  18. //OK
  19. if(result == 200) {
  20. document.getElementById("div_RightBarBody ").innerHTML = xmlhttp.responseText;
  21. }
  22. xmlhttp = null;
  23. }
  24. </script>



  
  1. <script>
  2. //非同步示例
  3. var xmlhttp
  4. function RequestByGet(nProducttemp, nCountrytemp) {
  5. if( window.XMLHttpRequest) {
  6. //isIE = false;
  7. xmlhttp = new XMLHttpRequest();
  8. } else if( window.ActiveXObject) {
  9. //isIE = true;
  10. xmlhttp = new ActiveXObject( "Microsoft.XMLHTTP");
  11. }
  12. //Web page location.
  13. var URL = "http://www.baidu.com/";
  14. xmlhttp.open( "GET", URL, true);
  15. xmlhttp.onreadystatechange = handleResponse;
  16. //xmlhttp.SetRequestHeader("Content-Type","text/html; charset=UTF-8")
  17. xmlhttp.send( null);
  18. }
  19. function handleResponse() {
  20. if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  21. document.getElementById( "div_RightBarBody").innerHTML = xmlhttp.responseText;
  22. xmlhttp = null;
  23. }
  24. }
  25. < /script>

對比過上面的程式碼大家是不是清晰多了呢?

三、Ajax如何確定選擇同步還是非同步:

相信這是部分初學者包括我在內一直困惑的問題,就是什麼時候該選擇同步,什麼時候該選擇非同步呢?

首先要清楚Ajax中的同步選擇是為極少數既不能使用非同步呼叫也不能重新載入整個頁面的情況而準備的。而非同步處理是為避免了伺服器檢索時候的延時問題,因為你的訪客可以繼續在頁面進行操作,而要求的資訊也可以在更新頁面的同時得到處理。