Ajax的使用代碼解析_AJAX相關

Ajax 簡介

Ajax被認為是(Asynchronous(非同步) JavaScript And Xml的縮寫）。現在，允許瀏覽器與伺服器通訊而無須重新整理當前頁面的技術都被叫做Ajax.

同步是指：發送方發出資料後，等接收方發迴響應以後才發下一個資料包的通訊方式。 

非同步是指：發送方發出資料後，不等接收方發迴響應，接著發送下個資料包的通訊方式 。

通常不用重新整理網頁而與伺服器通訊的方法：

• Flash 架構
• Frameset：如果使用一組架構構造了一個網頁，可以只更新其中一個架構，而不必驚動整個頁面
• XMLHttpRequest：該對象是對 JavaScript 的一個擴充，可使網頁與伺服器進行通訊。是建立 Ajax 應用的最佳選擇。實際上通常把 Ajax 當成XMLHttpRequest(XHR) 對象的代名詞

ajax基本使用

　　ajax在我們的開發中是必須使用的一個技術，ajax即非同步javascript和xml但是現在我們通常使用json來完成資料的互動，ajax職責很單一就是資料的互動，發送資料接收資料是它的核心功能也是唯一的功能。

　　ajax的實現依賴XMLHttpRequest，它的基本使用如下:

var xhr;window.XMLHttpRequest?xhr = new XMLHttpRequest():xhr = new ActiveXObject("Microsoft.XMLHTTP");xhr.open("get","demo!register.action?name=zt&age=23",true);xhr.send(null);xhr.onreadystatechange = function(){　　if(xhr.readyState==4&&xhr.status==200){ 　　alert(JSON.parse(xhr.responseText));　　}}

　　ajax的職責就是發送資料和接收資料我們基本使用流程為：

　　1.擷取一個XMLHttpRequest對象

　　2.發送資料

　　3.接收處理伺服器返回的資料

　　根據上面的步驟來實現一個非同步請求資料的過程，首先擷取一個xhr對象，在現代瀏覽器中我們可以直接通過執行個體化來擷取一個xhr對象：var xhr = new XMLHttpRequest()；在IE5、IE6中我們必須使用ActiveXObject來擷取xhr對象：var xhr = new ActiveXObject("Microsoft.XMLHTTP")。

　　此時我們已經得到了xhr對象接下來就是發送資料，通過xhr.open()方法來執行發送資料的方式，xhr.open()可以接收5個參數，我們經常使用的是前三個：

xhr.open(arg1,arg2,arg3)

　　arg1表示請求資料的方式一般為get或者post

　　arg2表示請求的伺服器位址

　　arg3表示本次請求是同步還是非同步，ajax的突出特點就是非同步所以我們一般都是使用非同步方式第三個參數設定為true（true表示進行非同步請求false表示進行同步請求）

　　xhr.open()方法只是準備一個請求，在調用open之後並不會和伺服器進行通訊，而是在調用send()函數之後才會和伺服器開始通訊，send()函數的參數將作為請求體發送到服務端。如果我們在open()函數中指定請求的方式為get通常我們將send()設定為xhr.send(null)，如果我們希望通過請求體發送資料則要將open()函數的請求方式設定為post同時將我們需要發送的資料作為send()函數的參數：xhr.send(param)，在調用send()函數之後，和伺服器的通訊就開始了。

　　對xhr的所有的設定都應該在send()函數之前設定好：

 xhr.open(...); xhr.setRequestHeader(...); xhr.overrideMimeType(...); xhr.onreadystatechange = function(){...}; xhr.send(...);

 　　但是由於xhr.onreadystatechange是一個事件，所以其放在send()之後也是可以執行的，出於易讀性我們一般都將對xhr的設定放在send()函數之前。

　　在send()之後可以通過xhr.readyState和xhr.status的來監測本次請求的狀態，如果滿足xhr.readyState==4&&xhr.status==200則本次請求成功：

在請求成功時我們可以通過xhr.responseText來擷取伺服器返回的資料，需要注意xhr.responseText是一個字串。

ajax常用API

　　上面的請求過程是一個最基本的請求過程xhr對象還有幾個經常使用的方法分別為xhr.abort()、xhr.setRequestHeader()、xhr.overrideMimeType()。

　　xhr.abort()：終止一個請求，直接調用即可不需要設定參數

xhr.abort()

　　xhr.setRequestHeader()：設定發送的要求標頭：

xhr.setRequestHeader("Content-Type","application/json; charset=utf-8")

　　第一個參數表示要設定的header，第二個參數表示要設定的header的值。xhr.setRequestHeader()必須在xhr.open()和xhr.send()之間，否則會拋出異常，同時xhr.setRequestHeader()的第一個參數是對大小寫不敏感的只要我們字母寫的對就能夠設定成功，但是出於易讀性我們要設定為正確的格式。

　　xhr.overrideMimeType()：重寫回應標頭的Content-Type：

xhr.overrideMimeType('text/plain; charset=utf-8')

 　　xhr.overrideMimeType()同樣要設定在xhr.send()之前。

JSON.parse()和JSON.stringify()使用

　　JSON.parse()用來將一個對象轉換為字串，JSON.stringify()用來將一個字串轉換為對象。在利用ajax進行資料互動的過程中返回的資料多數的時候是一個JSON格式的字串，如果伺服器給我們返回了資料此時我們就需要利用JSON.parse()來解析返回的資料（xhr.responseText即為伺服器返回的資料）：

xhr.onreadystatechange = function(){　　if(xhr.readyState==4&&xhr.status==200){ var data = JSON.parse(xhr.responseText);　　}}

 　　在使用post方式發送資料的過程中，如果不是檔案上傳一般情況下傳輸的也是一個JSON資料，要想能夠成功的發送到後台就需要用JSON.stringify()來將JSON對象來轉換為一個字串，同時Content-Type要設定為application/json：

var sendData = {name:"zt",age:23};...xhr.setRequestHeader("Content-Type","application/json; charset=utf-8");xhr.send(JSON.stringify(sendData));

　　另外利用JSON.parse()和JSON.stringify()可以實現一個對象的深拷貝功能：

var sendData = {name:"zt",age:23};var copyData = JSON.parse(JSON.stringify(sendData));

$.ajax基本使用

 　　為了方便使用JQ為我們封裝好了一個ajax來方便我們的使用：

$.ajax({ type:"post",//請求方式 url:"url",//請求地址 data:"...",//發送至服務端的資料 contentType:"...",//設定發送資料的類型如果data是一個json字串這裡要設定為application/json success:function(data){...},//請求成功的回呼函數data可看做是伺服器返回的資料 error:function(){...}//請求失敗的回呼函數 });

　　或者：

$.ajax({ type:"post", url:"url", data:"...", contentType:"...", }) .done(function(data){...}) .fail(function(){...});

　　回呼函數中的data即為伺服器返回的資料的一個代理，直接使用即可。

　　為了簡化我們的開發JQ提供了一些全域設定函數包括$.ajaxSetup()、$.()ajaxStart()、$().ajaxStop()、$().ajaxComplete()、$().ajaxError()、$().ajaxSuccess()、$().ajaxSend()。

　　$.ajaxSetup()用來設定基本的參數例如：

$.ajaxSetup({ type:"post", contentType:"application/json; charset=utf-8" });

　　我們在使用$.ajax時可以直接這樣設定：

 $.ajax({ url:"", success:function(){...}, error:function(){...} })

　　最終等價於：

 $.ajax({ type:"post", contentType:"application/json; charset=utf-8", url:"", success:function(){...}, error:function(){...} })

　　$().ajaxStart()、$().ajaxStop()、$().ajaxComplete()、$().ajaxError()、$().ajaxSuccess()、$().ajaxSend()都是用來設定一些全域回呼函數的。例如我們在提交資料時為了防止多次提交我們需要在發送請求時產生一個loading遮罩在資料發送完成後取消遮罩，如果在每一次ajax請求時我們都設定一次就會很麻煩，此時我們就可以用全域回呼函數來簡化我們的操作：

　　利用全域事件在請求開始時產生一個遮罩在請求完成時取消遮罩：

$(document).ajaxStart(function(){ loadingMask.show(); }); $(document).ajaxComplete(function(){ loadingMask.hide(); });

以上所述是小編給大家介紹的Ajax的使用代碼解析，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！