前端頁面——AJAX是個什麼樣的傳輸機，前端頁面ajax傳輸

前端頁面——AJAX是個什麼樣的傳輸機，前端頁面ajax傳輸

前篇文章我們介紹了一下級聯查詢，可是有時候我們需要在頁面和後台或頁面與頁面之間傳值，這樣我們就需要用到一個非常重要的技術——AJAX，想必大家都聽說過吧，今天我們來介紹一下AJAX，看看它是如何扮演一個傳輸機的角色的（我們使用的還是MVC）。

- 1概念

我們都知道AJAX有兩種傳輸策略，那就是同步和非同步，那麼什麼是同步，什麼是非同步呢，兩者有什麼不同呢？

同步：提交請求->等待伺服器處理->處理完畢返回 這個期間用戶端瀏覽器不能幹任何事

非同步: 請求通過事件觸發->伺服器處理（這是瀏覽器仍然可以作其他事情）->處理完畢

舉個例子：同步就是你叫我去吃飯，我聽到了就和你去吃飯；如果沒有聽到，你就不停的叫，直到我告訴你聽到了，才一起去吃飯。非同步就是你叫我，然後自己去吃飯，我得到訊息後可能立即走，也可能等到下班才去吃飯。

- 2實現方式

其實AJAX實現同步和非同步很簡單，只要設定async的屬性值就行，預設的設定值為true，這種情況為非同步方式，就是說當ajax發送請求後，在等待server端返回的這個過程中，前台會繼續 執行ajax塊後面的指令碼，直到server端返回正確的結果才會去執行success，也就是說這時候執行的是兩個線程，ajax塊發出請求後一個線程 和ajax塊後面的指令碼（另一個線程），兩個線程互不影響

下面我們來看一段JS代碼

 <script type="text/javascript">       // 當把asyn設為false時，這時ajax的請求時同步的，也就是說，這個時候ajax塊發出請求後，他會等待在function1（）這個地方，不會去執行function2()，直到function1()部分執行完畢。       // 當把asyn設為true時，這時ajax的請求時非同步，當ajax塊發出請求後，他將停留function1()，等待server端的返回，但同時（在這個等待過程中），前台會去執行function2()       function addclick() {//點擊觸發addclick事件               //用jquery擷取id為txtuserName的頁面標記的value，存放在txtuserName變數裡                var txtuserName = $("#txtuserName").val();                var txtuserPWD = $("#txtuserPWD").val();                $.ajax({                    type: "POST",  //ajax的方式為post(get方式對傳送資料長度有限制)                    url: "/AjaxRequest/AddUser.ashx", //一般處理常式頁面AddUser.ashx(在2中會寫出該頁面內容)                    dataType: "json",   //資料傳回的格式為json                    data: { "txtuserName ": txtuserName,"txtuserPWD":txtuserPWD },                    //或者data:  "txtuserName " + txtuserName + "&txtuserPWD" + txtuserPWD,                    //要傳送的資料索引值對adduserName為鍵（方便2中的檔案用此名稱接受資料）txtuserName為值（要傳遞的變數，例如使用者名稱）                   success: function (result) {                          function1()                        }               });               function2();            }       );           function function1() {               alert('function1');           }           function function2() {               alert('function2');           }    })}</script>

我們的JS代碼寫完後，如何在後台接到頁面傳來的資料呢。

String roundCoude = Request["txtuserName"];String roundCoude = Request["txtuserPWD"];

- 3總結

今天我們學習了AJAX如何將資料從頁面傳到後台，以及後台如何接收。我然我們也知道AJAX兩種不同的傳輸方式，也是AJAX的核心，那就是同步和非同步，我們在實際應用中一定要根據自己的需求來合理的選擇同步還是非同步。在以後的學習中，我們還會用到AJAX，本次只介紹了其post傳值的方式，其實他還有get方式傳值，大家可以上網查查，以後再與大家分享。

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。