原生Ajax與JQuery?Ajax實例分析

本篇內容主要講解“原生Ajax與JQuery Ajax實例分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“原生Ajax與JQuery Ajax實例分析”吧!

一、Ajax簡介。

1、AJAX全稱：異步的JavaScript和XML

2、AJAX不是編程語言，是一種無需重新載入整個頁面，能夠更新部分網頁的技術。

3、要想更新內容或者提交一個表單，就要重新載入整個頁面；使用AJAX技術的頁面，通過與后臺服務器進行少量的數據交換，就可以實現異步局部更新。

4、同步和異步：

同步：需要更新內容或者提交表單時，需要對整個頁面向服務器請求->服務器處理、響應->頁面載入

如果錯誤，再次請求，等待，響應；需要對整個頁面解析重新載入，很多時候等待的時間很長，讓人很抓狂。

異步：針對頁面部分內容進行請求，服務器處理響應，頁面刷新載入這一部分；這中間不會影響頁面其他交互，無需進行等待，提升了用戶體驗。

二、Ajax概念

1、XMLHttpRequest對象

IE5、IE6支持Active X對象。

所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。

在新瀏覽器上，創建對象很簡單，使用構造函數：var xhr=new XMLHttpRequest();老瀏覽器可能不常用，但我們要考慮在里邊，兼容老瀏覽器：

function createXHR(){
    if(typeof XMLHttpRequest !="undefined"){
//如果瀏覽器不支持XMLHttpRequest對象，就使用IE5、IE6對象ActiveXObject
        return new XMLHttpRequest();
    }else if(typeof ActiveXobject !="undefined"){
        if(typeof arguments.callee.activeXString !="string"){
            var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],
                i,len;
                for(i=0,len=versions.length;i<len;i++){
                    try{
                        new new ActiveXObject(versions[i]);
                        arguments.callee.activeXString = versions[i];
                        break;
                    }catch(ex){
                        //
                    }
                }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    }else{
        throw new Error("No XHR object available");
    }
}

這個函數首先檢測原生XHR對象是否存在，如果存在，就返回它的實例。XHR不存在，檢測ActiveX對象；否則，拋出錯誤。
創建兼容的XHR對象就可以使用：var xhr=createXHR();

2、HTTP請求

在運用Ajax之前，我認為先了解HTTP更有助于理解Ajax方法。

HTTP是一種應用進程與服務器之間連接的協議，無狀態協議，也就是沒有記憶，每一次請求都需要重新建立連接。

HTTP請求過程：

1>建立TCP連接

2>Web瀏覽器向Web服務器發送請求命令

3>Web瀏覽器發送請求頭信息

4>Web服務器應答

5>Web服務器發送應答頭信息

6>Web服務器向瀏覽器發送數據

7>Web服務器關閉TCP連接

HTTP狀態碼：

• 1XX：信息類，表示收到Web瀏覽器請求，正在進一步處理中

• 2XX:成功，表示用戶請求被正確接收，如200

• 3XX:重定向，表示請求沒有成功，客戶必須采取進一步動作

• 4XX:客戶端錯誤，表示客戶端提交的請求有錯誤，例如：404 NOT Found,意味著請求中所引用的文檔不存在

• 5XX:服務器錯誤，表示服務器不能完成對請求的處理，如：500

3、XHR用法

向服務器發送請求，需要使用XMLHttpRequest對象的open()和send()方法。

發送請求：

xhr.open("get","example","false")//同步xhr.send(null);同步：JavaScript 會等到服務器響應就緒才繼續執行。

異步：在等待服務器響應時執行其他腳本；

當響應就緒后對響應進行處理。

① 當服務器響應后會填充XHR對象屬性

->responseText 獲得字符串形式的響應數據。

->responseXML 獲得 XML 形式的響應數據。

->status 響應的HTTP狀態碼

->statusText HTTP狀態碼說明

② 異步下檢測XHR對象的readyState屬性，請求過程中的活動階段：

->0:未初始化，尚未調用open()方法

->1:啟動，已經調用open()方法，但未調用send()方法

->2:發送，已經調用send()方法，尚未接到響應

->3:接收，已接收部分數據

->4:完成，已經接收全部響應數據。

readyState改變就會觸發一次readyStatechange事件，可以利用這個事件來檢測readyState變化的值。必須在open()之前指定onreadyStatechange事件處理程序。

var xhr=createXHR();
xhr.onreadyStatechange=function(){
  if(xhr.readyState==4){
      if(xhr.status >=200 && xhr.status<300){
            alert(xhr.responseText);
      }else{
            alert("Request was unsuccessful:"+xhr.status);
      }
  }
}
xhr.open("get","example.txt",true);
xhr.send(null);

默認情況下，在發送XHR請求的同時，還會發送一些默認的頭部信息。

使用 setRequestHeader() 可以設置自定義的請求頭部信息：這個方法接收2個參數，頭部字段的名稱和頭部字段的值。

setRequestHeader() 方法必須在open()后，send()前調用

xhr.open("get","example.txt",true); xhr.setRequestHeader("myheader","myvalue"); xhr.send(null);調用XHR對象的getRequestHeader() 方法，并傳入頭部字段名稱可以取得相應的響應頭部信息。

③ get請求、post請求

• get 請求

• 常用于向服務器查詢(獲取)某些信息，需要注意傳入的URL格式，查詢的字符串參數名稱和值都必須經過 encodeURIComponent() 進行編碼，然后放到URL末尾；而且所有的名稱和值和后一個需用"&"隔開。

• xhr.open("get","example.php?name1=value1&name2=value2",true);可向現有url后添加查詢字符串參數：

function addURLParam(url,name,value){
    url +=(url.indexOf("?") == -1  ?  "?" : "&");//檢測url后是否已有參數
    url +=encodeURIComponent(name) + "=" + encodeURIComponent(value);
    return url;
}
//示例
var url="example.php";
//添加參數
url=addURLParam(url,"name","Nico");
//初始化請求
xhr.open("get",url,true);

• post請求
  下列情況使用：
  ->無法使用緩存文件（更新服務器上的文件或數據庫）
  ->向服務器發送大量數據（POST 沒有數據量限制）
  ->發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠
  如果需要像 HTML 表單那樣 POST 數據；首先使用 setRequestHeader() 來設置 HTTP 頭"Content-type"為"application/x-www-form-urlencoded"，其次以適當格式創建字符串。

var xhr=createXHR();
//省略
xhr.open("POST","ajax_test.asp",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var form=document.getElementById("user-info");
xhr.send(serialize(form));

三、jQuery - AJAX

jQuery get() 和 post() 方法用于通過 HTTP GET 或 POST 請求從服務器請求數據。

• jQuery $.get() 方法
  語法：$.get(URL,callback);
  必需的 URL 參數規定您希望請求的 URL。
  可選的 callback 參數是請求成功后所執行的函數名。
  例子：

$("button").click(function(){
    $.get("demo_test.asp",function(data,status){
      alert("Data: " + data + "\nStatus: " + status);
    });
});```
+ jQuery $.post() 方法
語法：$.post(*URL*,*data*,*callback*);
必需的 *URL* 參數規定您希望請求的 URL。
可選的 *data* 參數規定連同請求發送的數據。
可選的 *callback* 參數是請求成功后所執行的函數名。
例子：

$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});

$.post() 的第一個參數是我們希望請求的 URL ("demo_test_post.asp")。
然后我們連同請求（name 和 city）一起發送數據。
"demo_test_post.asp" 中的 ASP 腳本讀取這些參數，對它們進行處理，然后返回結果。
第三個參數是回調函數。第一個回調參數存有被請求頁面的內容，而第二個參數存有請求的狀態。

到此，相信大家對“原生Ajax與JQuery Ajax實例分析”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！