AJAX非同步原理與實現

2022-07-30 15:42:14 字數 2198 閱讀 8094

面試時問到了這個問題,說實話我還是不理解的,只是單單會使用。所以今天我看一下,自己了解下。

看了網上前輩們寫的資料,我自己總結歸納ajax的原理和流程如下:

這個是ajax核心的物件,當然不是所有瀏覽器建立這個物件的方法是一致的。我們開發過程中一般建議使用chrome瀏覽器,在chrome中,xmlhttprequest物件的建立方法直接

var xmlhttp=new xmlhttprequest();即可。但是ie是特例,我們需要這樣var 

xmlhttp=new activexobject("msxml2.xmlhttp");(這裡忽略低版本ie了,我相信再低不可能使用ie6以下吧),要在乙個方法內完成物件建立需要try、catch(js也是可以的)

物件建立完成後當然是使用了。

(1)設定請求引數(請求方式,請求頁面的相對路徑,是否非同步)

(2)設定**函式,乙個處理伺服器響應的函式,使用 onreadystatechange ,類似函式指標

(3)獲取非同步物件的readystate 屬性:該屬性存有伺服器響應的狀態資訊。每當 readystate 改變時,onreadystatechange 函式就會被執行。

(4)判斷響應報文的狀態,若為200說明伺服器正常執行並返回響應資料,

(5)讀取響應資料,可以通過 responsetext 屬性來取回由伺服器返回的資料。

感覺好難記,一時間還是很難消化的。我們還是直接來看ajax怎麼寫吧

現在ajax我會的就兩種,一種就是原生的ajax,另一種就是jquery中提供的ajax,後者比前者更簡單。

第一種:

原生ajax,請求方式因為分為post和get等,為了統一,可以當引數傳入,不必分開處理,然後我們可以封裝這樣的乙個方法,使用時直接呼叫

1

function

ajax_method(url,data,method,success) else

15//

設定 方法 以及 url

16ajax.open(method,url);

1718

//send即可

19ajax.send();

20 }else

else36}

3738

//註冊事件

39 ajax.onreadystatechange = function

() 53}54

55 }

第二種:

其實jquery中使用ajax也是有多種方式的,先看看不帶引數的:

1 $(document).ready(function

()});

13});

14 });

其中第乙個引數是請求的url,第二個引數是**用函式,json資料封裝在result,需要對result的json資料進行解析

如果想加入引數,則在url和**函式之間加入引數即可。

另外,jquery中提供post型別的ajax方法從伺服器載入資料

1 $('#send').click(function

(),function

(data))

7 })

寫法上我覺得就是三種$.ajax()和$.post()和$.get(),至於引數不引數,按實際需要來就行

三者做個比較:

$.get $.post是簡單易用的高層實現,我們使用$.get $.post方法,jquery會自動封裝呼叫底層的$.ajax。

$.get 只處理簡單的 get 請求功能以取代複雜 $.ajax,請求成功時可呼叫**函式。不支援出錯時執行函式,否則必須使用$.ajax。

$.post 只處理 post請求功能以取代複雜 $.ajax 。請求成功時可呼叫**函式。不支援出錯時執行函式,否則必須使用$.ajax。

$.get("test.php", ) $.get方法在請求時會自動生成querystring提交給伺服器(name=john&time=2pm),

$.post方法提交的資料直接類似表單提交,提交的資料量比$.get更大。

這裡插一句:post和get提交的區別,面試也問了,回答的不是很全面。

1.post提交的資料量幾乎沒有限制,get提交有內容大小限制

2.get提交把引數加在url中,post提交不會

3.由於get提交把引數放入了url,所以大家都可以看到是比較不安全的,post比較安全

Ajax同步與非同步

之前一直在寫jquery 的時候遇到ajax載入資料都需要考慮 執行順序問題。最近的專案用了到ajax同步。這個同步的意思是當js 載入到當前ajax的時候會把頁面裡所有的 停止載入,頁面出去假死狀態,當這個ajax執行完畢後才會繼續執行其他 頁面假死狀態解除。而非同步則這個ajax 執行中的時候其...

ajax 同步與非同步

同步是指 傳送方發出資料後,等接收方發回響應以後才發下乙個資料報的通訊方式。使用者填寫所有資訊後,提交給伺服器,等待伺服器的回應 檢驗資料 是一次性的。資訊錯誤又要重新填寫!非同步是指 傳送方發出資料後,不等接收方發回響應,接著傳送下個資料報的通訊方式。當使用者填寫完一條資訊後,該資訊會自動向伺服器...

AJAX同步與非同步

今天來大概說說ajax中的同步與非同步。其實,就我的理解,同步與非同步的區別就是程式執行過程中是否有等待。同步 意思就是js 載入到當前的 ajax時候,會等待ajax 執行完畢後再開始載入其他 非同步 js 是指當載入到 ajax時候,在ajax 執行的同時 也會執行其他 jquery 的asyn...