Ajax中的回撥函式（利用PHP+JS實現）

很多和我一樣的初學者，總是搞不懂什麼是回撥函式。我經過了幾天的學習將自己的理解記錄在這裡。

一、為什麼使用回撥函式？

首先我們應該明白我們為什麼要用回撥函式？我們用它能夠解決什麼樣的問題。下邊看一個例子。

（1）在以上函式d中如果我們怎樣拿到temp的值？

我們應該知道在JS中或者很多語言中，我們每次用一個變數或者函式時，當執行時都會向上找。如下圖。

（2）當我們在函式a中要用到變數test中，我們發現函式內部並沒有呼叫，所有我們會去函式外邊找。一級一級找，當找到了window物件時如果發現還沒有找到，則會出現變數未定義的錯誤。

（3）下面回到我們一開始討論的問題，我們怎樣在d函式中拿到temp的值呢？看下面的方法。

（4）我們採取的方法在匿名函式中呼叫了d函式並且傳了一個temp變數，而在d函式加了一個引數用來接受。

然後拿到值之後，我們就可以為所欲為了。

（5）其實上邊的拿到函式內部值的過程就是回滾函式的意思。

（6）而回調函式就是為了解決拿到函式內部的值而產生的。

二、在ajax中我們是怎樣應用回撥函式的呢？

舉一個比較使用的例子。

最終實現目標：在登錄檔單時判斷使用者名稱是否佔用。

步驟如下：

（1）      在HTML頁面中設立一個表單，這個表單包括一個input. 我們想要實現的是在我們游標離開了輸入框之後，就會判斷該使用者名稱是否可用。如下圖

（2）      我們封裝一個ajax的檔案。在這個檔案中主要實現兩個功能。

第一個功能是：通過ID獲取DOM物件

第二個功能是：實現通過GET方式的ajax非同步傳輸。

我們這裡先寫第一個功能。

（3）      現在我們回到我們的HTML頁面中，我們給表單中的input繫結一個onblur事件（也就是失去焦點事件）;

（4）      接下來我們要通過JS拿到我們所輸入的值傳遞給Ajax物件，然後通過拿到的值讓Ajax物件去請求連線PHP。讓PHP去比對下有沒有我們所輸入的值。然後給我們返回結果。我將這個過程再分解成幾小步。

[1]在ajax.js中新增一個函式，並且賦給$.

[2]上面寫到了callback引數，並且我們又給了他一個引數。這能夠說明我們的callback其實就是一個函式傳遞過來了。那麼為什麼要使用callback回滾函式呢？

三個字：作用域。我們在一開始的例子裡就說了我們的函式或者變數都會向它們的上一級去尋找，而不會向下尋找。但是在這裡我們把$.get放在了一個自呼叫的匿名函式裡邊。而我們所獲取到的responseText內容又在最外層的自呼叫匿名函式的裡層。我們怎樣才能拿到資料呢？

這時我們就會想到回撥函式，而很多專案也的確是這樣用的。

下面我們就寫callback函式。

[3]回到靜態頁面,html中，我們把輸入的內容傳送到ajax中。

[4]我們在上面說了假定使用者名稱有了，我們在PHP中會echo 1;

如果沒有則輸出0。下面就來實現這個功能。

[5]PHP伺服器的實現。（這裡我們就不連線資料庫等操作了，模擬下操作）

（5）      現在我們已經全部完成了，大家可以測試了。

三、總結

所謂回撥函式其實就是函式呼叫，只不過在函式裡邊呼叫函式外邊的函式而已。