跟著jquery API學jquery之八 ajax

看到ajax這裡我們先看一下如何用javascritp寫一個ajax出來

Ajax的原理就是XMLHttpRequest這個對象

首先我們需要建立這個對象

首先我們建立一個xajax.js的檔案

 

 1 var request = false;
 2 
 3  try {
 4 
 5     request = new XMLHttpRequest();
 6 
 7 } catch (ex){
 8 
 9     try {
10 
11         request = new ActiveXObject("Msxml2.XMLHTTP");
12 
13     } catch(ex1){
14 
15         try {
16 
17             request = new ActiveXObject("Microsoft.XMLHTTP");
18 
19         } catch (failed) {
20 
21             request = false;
22 
23         }
24 
25     }
26 
27 }
28 
29  

 

 

這裡我們建立了一個XMLHttpRequest對象 ，XMLHttpRequest對象唯一的目的就是發送請求和接受相應

我們在ajax中常用的幾個函數

open()：建立到伺服器的新請求。

send()：向伺服器發送請求。

abort()：退出當前請求。

readyState：提供當前 HTML 的就緒狀態。

responseText：伺服器返回的請求響應文本。

 

 

 1 function GetInfo(url) {
 2 
 3     request.open("GET", url, true); //open函數中設定為true是非同步關鍵
 4  
 5     request.onreadystatechange = callback;//設定一個回呼函數    
 6  
 7     request.send(null); //send用來傳遞參數 如果沒有則為null
 8  
 9 }
10 
11  
12 
13  //現在我們實現這個回呼函數
14  
15  function callback() {
16 
17     //首先我們判斷一下狀態
18  
19     if (request.readyState == 4) { //4表示響應完成
20  
21         if (request.status == 200) { //200表示合約談判狀態是順利的 比如我們會見到404的的錯誤
22  
23             //判斷完成後我們就可以對伺服器返回的值做處理了
24  
25                $("#a").text(request.responseText);
26 
27         
28 
29         }  
30 
31     } 
32 
33 }
34 
35 

 

 

 

這樣我們就基本完成了一個最基本的ajax，然後我們建立一個hand.ashx的處理常式

我們在index.aspx頁面上放置一個按鈕 ，並寫上onclick="GetInfo('hand.ashx')" ，這樣就完成了一個簡單的ajax

 

當jquery出現之後 ，ajax就變成了一句話的事情 

要實現上面的請求 jQuery要怎麼做呢

我們看一下load這個函數：載入遠端html檔案代碼，並插入到DOM中，

那麼我們只需要

 

$('#a').load('hand.ashx')  

 

 

就可以實現上面我們寫的N多代碼

 

當然，我們知道有兩中方式 get和post，jquery中提供了

$.get(url,[data],[callback],type)  $.post()兩種方式，分別用簡單的get/post來取代複雜的$.ajax

其中 url表示地址 data為傳入參數 callback為回呼函數 type為傳回值的類型

當然，有時候這種方式也無法滿足我們的需求 這裡就要用到$.ajax了

在這個函數中可以很方便色設定ajax的細節 如：

 

$.ajax({
   type: "get",
   url: "hand.ashx ", 
   success: function(text){
     alert( text);
   }
});

 

 

當然我們並不希望每次寫$ajax都要重複的寫這些細節，這時我們就要用到

$ajaxSetup了 ，用來設定全域的ajax預設選項，參數方式與$.ajax一樣

 到這裡ajax就差不多了，但是有時候我們需要對ajax執行的進度操作，比如在請求資料時顯示 請稍候  ，在資料請求完成時顯示資料之類的。

這裡就要用到ajax事件了

 ajaxSend(callback) ajax請求發送前執行

ajaxStart(callback) ajax請求開始時執行

ajaxComplete(callback)  ajax請求完成時執行

jQueryajaxStop(callback)  ajax請求結束時執行

ajaxSuccess(callback)   ajax請求成功時執行

jQueryajaxError(callback) ajax請求錯誤時執行

相關代碼