這篇文章給大家分享的是有關(guān)Ajax的使用示例的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司專注于曲靖網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供曲靖營銷型網(wǎng)站建設(shè)，曲靖網(wǎng)站制作、曲靖網(wǎng)頁設(shè)計(jì)、曲靖網(wǎng)站官網(wǎng)定制、微信平臺小程序開發(fā)服務(wù)，打造曲靖網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供曲靖網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

Ajax 簡介

Ajax被認(rèn)為是(Asynchronous(異步) JavaScript And Xml的縮寫）?，F(xiàn)在，允許瀏覽器與服務(wù)器通信而無須刷新當(dāng)前頁面的技術(shù)都被叫做Ajax.

同步是指：發(fā)送方發(fā)出數(shù)據(jù)后，等接收方發(fā)回響應(yīng)以后才發(fā)下一個數(shù)據(jù)包的通訊方式。 

異步是指：發(fā)送方發(fā)出數(shù)據(jù)后，不等接收方發(fā)回響應(yīng)，接著發(fā)送下個數(shù)據(jù)包的通訊方式 。

通常不用刷新網(wǎng)頁而與服務(wù)器通訊的方法：

• Flash 框架

• Frameset：如果使用一組框架構(gòu)造了一個網(wǎng)頁，可以只更新其中一個框架，而不必驚動整個頁面

• XMLHttpRequest：該對象是對 JavaScript 的一個擴(kuò)展，可使網(wǎng)頁與服務(wù)器進(jìn)行通信。是創(chuàng)建 Ajax 應(yīng)用的最佳選擇。實(shí)際上通常把 Ajax 當(dāng)成XMLHttpRequest(XHR) 對象的代名詞

ajax基本使用

ajax在我們的開發(fā)中是必須使用的一個技術(shù)，ajax即異步的javascript和xml但是現(xiàn)在我們通常使用json來完成數(shù)據(jù)的交互，ajax職責(zé)很單一就是數(shù)據(jù)的交互，發(fā)送數(shù)據(jù)接收數(shù)據(jù)是它的核心功能也是唯一的功能。

ajax的實(shí)現(xiàn)依賴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的職責(zé)就是發(fā)送數(shù)據(jù)和接收數(shù)據(jù)我們基本使用流程為：

1.獲取一個XMLHttpRequest對象

2.發(fā)送數(shù)據(jù)

3.接收處理服務(wù)器返回的數(shù)據(jù)

根據(jù)上面的步驟來實(shí)現(xiàn)一個異步請求數(shù)據(jù)的過程，首先獲取一個xhr對象，在現(xiàn)代瀏覽器中我們可以直接通過實(shí)例化來獲取一個xhr對象：var xhr = new XMLHttpRequest()；在IE5、IE6中我們必須使用ActiveXObject來獲取xhr對象：var xhr = new ActiveXObject("Microsoft.XMLHTTP")。

此時(shí)我們已經(jīng)得到了xhr對象接下來就是發(fā)送數(shù)據(jù)，通過xhr.open()方法來執(zhí)行發(fā)送數(shù)據(jù)的方式，xhr.open()可以接收5個參數(shù)，我們經(jīng)常使用的是前三個：

xhr.open(arg1,arg2,arg3)

arg1表示請求數(shù)據(jù)的方式一般為get或者post

arg2表示請求的服務(wù)器地址

arg3表示本次請求是同步還是異步，ajax的突出特點(diǎn)就是異步所以我們一般都是使用異步的方式第三個參數(shù)設(shè)置為true（true表示進(jìn)行異步請求false表示進(jìn)行同步請求）

xhr.open()方法只是準(zhǔn)備一個請求，在調(diào)用open之后并不會和服務(wù)器進(jìn)行通訊，而是在調(diào)用send()函數(shù)之后才會和服務(wù)器開始通訊，send()函數(shù)的參數(shù)將作為請求體發(fā)送到服務(wù)端。如果我們在open()函數(shù)中指定請求的方式為get通常我們將send()設(shè)置為xhr.send(null)，如果我們希望通過請求體發(fā)送數(shù)據(jù)則要將open()函數(shù)的請求方式設(shè)置為post同時(shí)將我們需要發(fā)送的數(shù)據(jù)作為send()函數(shù)的參數(shù)：xhr.send(param)，在調(diào)用send()函數(shù)之后，和服務(wù)器的通訊就開始了。

對xhr的所有的設(shè)置都應(yīng)該在send()函數(shù)之前設(shè)置好：

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

 　　但是由于xhr.onreadystatechange是一個事件，所以其放在send()之后也是可以執(zhí)行的，出于易讀性我們一般都將對xhr的設(shè)置放在send()函數(shù)之前。

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

在請求成功時(shí)我們可以通過xhr.responseText來獲取服務(wù)器返回的數(shù)據(jù)，需要注意xhr.responseText是一個字符串。

ajax常用API

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

xhr.abort()：終止一個請求，直接調(diào)用即可不需要設(shè)置參數(shù)

xhr.abort()

xhr.setRequestHeader()：設(shè)置發(fā)送的請求頭：

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

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

xhr.overrideMimeType()：重寫響應(yīng)頭的Content-Type：

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

 　　xhr.overrideMimeType()同樣要設(shè)置在xhr.send()之前。

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

JSON.parse()用來將一個對象轉(zhuǎn)換為字符串，JSON.stringify()用來將一個字符串轉(zhuǎn)換為對象。在利用ajax進(jìn)行數(shù)據(jù)交互的過程中返回的數(shù)據(jù)多數(shù)的時(shí)候是一個JSON格式的字符串，如果服務(wù)器給我們返回了數(shù)據(jù)此時(shí)我們就需要利用JSON.parse()來解析返回的數(shù)據(jù)（xhr.responseText即為服務(wù)器返回的數(shù)據(jù)）：

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

 　　在使用post方式發(fā)送數(shù)據(jù)的過程中，如果不是文件上傳一般情況下傳輸?shù)囊彩且粋€JSON數(shù)據(jù)，要想能夠成功的發(fā)送到后臺就需要用JSON.stringify()來將JSON對象來轉(zhuǎn)換為一個字符串，同時(shí)Content-Type要設(shè)置為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()可以實(shí)現(xiàn)一個對象的深拷貝功能：

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

$.ajax基本使用

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

$.ajax({
 type:"post",//請求方式
 url:"url",//請求地址
 data:"...",//發(fā)送至服務(wù)端的數(shù)據(jù)
 contentType:"...",//設(shè)置發(fā)送數(shù)據(jù)的類型如果data是一個json字符串這里要設(shè)置為application/json
 success:function(data){...},//請求成功的回調(diào)函數(shù)data可看做是服務(wù)器返回的數(shù)據(jù)
 error:function(){...}//請求失敗的回調(diào)函數(shù)
 });

或者：

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

回調(diào)函數(shù)中的data即為服務(wù)器返回的數(shù)據(jù)的一個代理，直接使用即可。

為了簡化我們的開發(fā)JQ提供了一些全局設(shè)置函數(shù)包括$.ajaxSetup()、$.()ajaxStart()、$().ajaxStop()、$().ajaxComplete()、$().ajaxError()、$().ajaxSuccess()、$().ajaxSend()。

$.ajaxSetup()用來設(shè)置基本的參數(shù)例如：

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

我們在使用$.ajax時(shí)可以直接這樣設(shè)置：

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

最終等價(jià)于：

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

$().ajaxStart()、$().ajaxStop()、$().ajaxComplete()、$().ajaxError()、$().ajaxSuccess()、$().ajaxSend()都是用來設(shè)置一些全局回調(diào)函數(shù)的。例如我們在提交數(shù)據(jù)時(shí)為了防止多次提交我們需要在發(fā)送請求時(shí)產(chǎn)生一個loading遮罩在數(shù)據(jù)發(fā)送完成后取消遮罩，如果在每一次ajax請求時(shí)我們都設(shè)置一次就會很麻煩，此時(shí)我們就可以用全局回調(diào)函數(shù)來簡化我們的操作：

利用全局事件在請求開始時(shí)產(chǎn)生一個遮罩在請求完成時(shí)取消遮罩：

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

感謝各位的閱讀！關(guān)于“Ajax的使用示例”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁標(biāo)題：Ajax的使用示例
標(biāo)題網(wǎng)址：http://jinyejixie.com/article6/ijghog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、、標(biāo)簽優(yōu)化、網(wǎng)站排名、響應(yīng)式網(wǎng)站、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)