ajax函數(shù)怎么使用

本篇內(nèi)容主要講解“ajax函數(shù)怎么使用”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“ajax函數(shù)怎么使用”吧!

ajax函數(shù)是指jQuery.ajax()函數(shù)，該函數(shù)用于通過(guò)后臺(tái)HTTP請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)，是jQuery封裝的AJAX技術(shù)實(shí)現(xiàn)，通過(guò)該函數(shù)，我們無(wú)需刷新當(dāng)前頁(yè)面即可獲取遠(yuǎn)程服務(wù)器上的數(shù)據(jù)。

本文操作環(huán)境：Windows7系統(tǒng)，jquery3.2.1版，Dell G3電腦。

ajax函數(shù)是什么？

jQuery.ajax() 函數(shù)詳解

jQuery.ajax()函數(shù)用于通過(guò)后臺(tái)HTTP請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)。

jQuery.ajax()函數(shù)是jQuery封裝的AJAX技術(shù)實(shí)現(xiàn)，通過(guò)該函數(shù)，我們無(wú)需刷新當(dāng)前頁(yè)面即可獲取遠(yuǎn)程服務(wù)器上的數(shù)據(jù)。

jQuery.ajax()函數(shù)是jQuery的底層AJAX實(shí)現(xiàn)。jQuery.get()、 jQuery.post()、load()、 jQuery.getJSON()、 jQuery.getScript()等函數(shù)都是該函數(shù)的簡(jiǎn)化形式(都調(diào)用該函數(shù)，只是參數(shù)設(shè)置有所不同或有所省略)。

該函數(shù)屬于全局jQuery對(duì)象(也可理解為靜態(tài)函數(shù))。

參數(shù)

請(qǐng)根據(jù)前面語(yǔ)法部分所定義的參數(shù)名稱查找對(duì)應(yīng)的參數(shù)。

參數(shù)settings是一個(gè)對(duì)象，jQuery.ajax()可以識(shí)別該對(duì)象的以下屬性(它們都是可選的)：

accepts --- Object類型

默認(rèn)值：取決于dataType屬性。

發(fā)送的內(nèi)容類型請(qǐng)求頭，用于告訴服務(wù)器——瀏覽器可以接收服務(wù)器返回何種類型的響應(yīng)。

async --- Boolean類型

默認(rèn)值：true。

指示是否是異步請(qǐng)求。同步請(qǐng)求將鎖定瀏覽器，直到獲取到遠(yuǎn)程數(shù)據(jù)后才能執(zhí)行其他操作。

beforeSend---Function類型

指定在請(qǐng)求發(fā)送前需要執(zhí)行的回調(diào)函數(shù)。該函數(shù)還有兩個(gè)參數(shù)：其一是jqXHR對(duì)象，其二是當(dāng)前settings對(duì)象。這是一個(gè)Ajax事件，如果該函數(shù)返回false，將取消本次ajax請(qǐng)求。

cache---Boolean類型

默認(rèn)值：true(dataType為'script'或'jsonp'時(shí)，則默認(rèn)為false)。

指示是否緩存URL請(qǐng)求。如果設(shè)為false將強(qiáng)制瀏覽器不緩存當(dāng)前URL請(qǐng)求。該參數(shù)只對(duì)HEAD、GET請(qǐng)求有效(POST請(qǐng)求本身就不會(huì)緩存)。

complete---Function/Array類型

指定請(qǐng)求完成(無(wú)論成功或失敗)后需要執(zhí)行的回調(diào)函數(shù)。該函數(shù)還有兩個(gè)參數(shù)：一個(gè)是jqXHR對(duì)象，一個(gè)是表示請(qǐng)求狀態(tài)的字符串('success'、 'notmodified'、 'error'、 'timeout'、 'abort'或'parsererror')。這是一個(gè)Ajax事件。

從jQuery 1.5開(kāi)始，該屬性值可以是數(shù)組形式的多個(gè)函數(shù)，每個(gè)函數(shù)都將被回調(diào)執(zhí)行。

contents---Object類型1.5 新增

一個(gè)以"{字符串:正則表達(dá)式}"配對(duì)的對(duì)象，用來(lái)確定jQuery將如何解析響應(yīng)，給定其內(nèi)容類型。

contentType---String類型

默認(rèn)值：'application/x-www-form-urlencoded; charset=UTF-8'。

使用指定的內(nèi)容編碼類型將數(shù)據(jù)發(fā)送給服務(wù)器。W3C的XMLHttpRequest規(guī)范規(guī)定charset始終是UTF-8，你如果將其改為其他字符集，也無(wú)法強(qiáng)制瀏覽器更改字符編碼。

context---Object類型

用于設(shè)置Ajax相關(guān)回調(diào)函數(shù)的上下文對(duì)象(也就是函數(shù)內(nèi)的this指針)。

converters --- Object類型1.5 新增

默認(rèn)值：{'* text': window.String, 'text html': true, 'text json': jQuery.parseJSON, 'text xml': jQuery.parseXML}。

一個(gè)數(shù)據(jù)類型轉(zhuǎn)換器。每個(gè)轉(zhuǎn)換器的值都是一個(gè)函數(shù)，用于返回響應(yīng)轉(zhuǎn)化后的值。

crossDomain---Boolean類型1.5 新增

默認(rèn)值：同域請(qǐng)求為false，跨域請(qǐng)求為true。

指示是否是跨域請(qǐng)求。如果你想在同一域中強(qiáng)制跨域請(qǐng)求(如JSONP形式)，請(qǐng)?jiān)O(shè)置為true。例如，這允許服務(wù)器端重定向到另一個(gè)域。

data---任意類型

發(fā)送到服務(wù)器的數(shù)據(jù)，它將被自動(dòng)轉(zhuǎn)為字符串類型。如果是GET請(qǐng)求，它將被附加到URL后面。

dataFilter---Function類型

指定處理響應(yīng)的原始數(shù)據(jù)的回調(diào)函數(shù)。該函數(shù)還有兩個(gè)參數(shù)：其一表示響應(yīng)的原始數(shù)據(jù)的字符串，其二是dataType屬性字符串。

dataType---String類型

默認(rèn)值：jQuery智能猜測(cè)，猜測(cè)范圍(xml、 json、 script或html)

指定返回的數(shù)據(jù)類型。該屬性值可以為：

• 'xml' :返回XML文檔，可使用jQuery進(jìn)行處理。

• 'html': 返回HTML字符串。

• 'script': 返回JavaScript代碼。不會(huì)自動(dòng)緩存結(jié)果。除非設(shè)置了cache參數(shù)。注意：在遠(yuǎn)程請(qǐng)求時(shí)(不在同一個(gè)域下)，所有POST請(qǐng)求都將轉(zhuǎn)為GET請(qǐng)求。(因?yàn)閷⑹褂肈OM的script標(biāo)簽來(lái)加載)

• 'json': 返回JSON數(shù)據(jù)。JSON數(shù)據(jù)將使用嚴(yán)格的語(yǔ)法進(jìn)行解析(屬性名必須加雙引號(hào)，所有字符串也必須用雙引號(hào))，如果解析失敗將拋出一個(gè)錯(cuò)誤。從jQuery 1.9開(kāi)始，空內(nèi)容的響應(yīng)將返回null或{}。

• 'jsonp': JSONP格式。使用JSONP形式調(diào)用函數(shù)時(shí)，如"url?callback=?"，jQuery將自動(dòng)替換第二個(gè)?為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)。

• 'text': 返回純文本字符串。

error---Function/Array類型

指定請(qǐng)求失敗時(shí)執(zhí)行的回調(diào)函數(shù)。該函數(shù)有3個(gè)參數(shù)：jqXHR對(duì)象、 請(qǐng)求狀態(tài)字符串(null、 'timeout'、 'error'、 'abort'和'parsererror')、 錯(cuò)誤信息字符串(響應(yīng)狀態(tài)的文本描述部分，例如'Not Found'或'Internal Server Error')。這是一個(gè)Ajax事件?？缬蚰_本和跨域JSONP請(qǐng)求不會(huì)調(diào)用該函數(shù)。

從jQuery 1.5開(kāi)始，該屬性值可以是數(shù)組形式的多個(gè)函數(shù)，每個(gè)函數(shù)都將被回調(diào)執(zhí)行。

global---Boolean類型

默認(rèn)值：true。

指示是否觸發(fā)全局Ajax事件。將該值設(shè)為false將阻止全局事件處理函數(shù)被觸發(fā)，例如ajaxStart()和ajaxStop()。它可以用來(lái)控制各種Ajax事件。

headers---Object類型1.5 新增

默認(rèn)值：{}。

以對(duì)象形式指定附加的請(qǐng)求頭信息。請(qǐng)求頭X-Requested-With: XMLHttpRequest將始終被添加，當(dāng)然你也可以在此處修改默認(rèn)的XMLHttpRequest值。headers中的值可以覆蓋beforeSend回調(diào)函數(shù)中設(shè)置的請(qǐng)求頭(意即beforeSend先被調(diào)用)。

$.ajax({
    url: "my.php" ,
    headers: {        "Referer": "http://www.365mini.com" // 有些瀏覽器不允許修改該請(qǐng)求頭
        ,"User-Agent": "newLine" // 有些瀏覽器不允許修改該請(qǐng)求頭
        ,"X-Power": "newLine"
        ,"Accept-Language": "en-US"
    }
});

ifModified---Boolean類型

默認(rèn)值：false。

允許當(dāng)前請(qǐng)求僅在服務(wù)器數(shù)據(jù)改變時(shí)獲取新數(shù)據(jù)(如未更改，瀏覽器從緩存中獲取數(shù)據(jù))。它使用HTTP頭信息Last-Modified來(lái)判斷。從jQuery 1.4開(kāi)始，他也會(huì)檢查服務(wù)器指定的'etag'來(lái)確定數(shù)據(jù)是否已被修改。

isLocal---Boolean類型1.5.1 新增

默認(rèn)值：取決于當(dāng)前的位置協(xié)議。

允許將當(dāng)前環(huán)境視作"本地"，(例如文件系統(tǒng))，即使默認(rèn)情況下jQuery不會(huì)如此識(shí)別它。目前，以下協(xié)議將被視作本地：file、*-extension和widget。

jsonp---String類型

重寫JSONP請(qǐng)求的回調(diào)函數(shù)名稱。該值用于替代"url?callback=?"中的"callback"部分。

jsonpCallback---String/Function類型

為JSONP請(qǐng)求指定一個(gè)回調(diào)函數(shù)名。這個(gè)值將用來(lái)取代jQuery自動(dòng)生成的隨機(jī)函數(shù)名。

從jQuery 1.5開(kāi)始，你也可以指定一個(gè)函數(shù)來(lái)返回所需的函數(shù)名稱。

mimeType---String類型1.5.1 新增

一個(gè)mime類型用來(lái)覆蓋XHR的mime類型。

password---String類型

用于響應(yīng)HTTP訪問(wèn)認(rèn)證請(qǐng)求的密碼。

processData---Boolean類型

默認(rèn)值：true。

默認(rèn)情況下，通過(guò)data屬性傳遞進(jìn)來(lái)的數(shù)據(jù)，如果是一個(gè)對(duì)象(技術(shù)上講，只要不是字符串)，都會(huì)處理轉(zhuǎn)化成一個(gè)查詢字符串，以配合默認(rèn)內(nèi)容類型 "application/x-www-form-urlencoded"。如果要發(fā)送 DOM樹(shù)信息或其它不希望轉(zhuǎn)換的信息，請(qǐng)?jiān)O(shè)置為false。

scriptCharset---String類型

設(shè)置該請(qǐng)求加載的腳本文件的字符集。只有當(dāng)請(qǐng)求時(shí)dataType為"jsonp"或"script"，并且type是"GET"才會(huì)用于強(qiáng)制修改charset。這相當(dāng)于設(shè)置<script>標(biāo)簽的charset屬性。通常只在當(dāng)前頁(yè)面和遠(yuǎn)程數(shù)據(jù)的內(nèi)容編碼不同時(shí)使用。

statusCode---Object類型1.5 新增

默認(rèn)值: {}。

一組數(shù)值的HTTP代碼和函數(shù)構(gòu)成的對(duì)象，當(dāng)響應(yīng)時(shí)調(diào)用了相應(yīng)的代碼。例如：

$.ajax({
    url: a_not_found_url ,    
    // 當(dāng)響應(yīng)對(duì)應(yīng)的狀態(tài)碼時(shí)，執(zhí)行對(duì)應(yīng)的回調(diào)函數(shù)    
    statusCode: {        404: function() {
            alert( "找不到頁(yè)面" );
        },        200: function(){
            alert("請(qǐng)求成功");
        }
    }
});

success---Function/Array類型

指定請(qǐng)求成功后執(zhí)行的回調(diào)函數(shù)。該函數(shù)有3個(gè)參數(shù)：請(qǐng)求返回的數(shù)據(jù)、響應(yīng)狀態(tài)字符串、jqXHR對(duì)象。

從jQuery 1.5開(kāi)始，該屬性值可以是數(shù)組形式的多個(gè)函數(shù)，每個(gè)函數(shù)都將被回調(diào)執(zhí)行。

timeout---Number類型

設(shè)置請(qǐng)求超時(shí)的毫秒值。

traditional---Boolean類型

如果你希望使用傳統(tǒng)方式來(lái)序列化參數(shù)，將該屬性設(shè)為true。

type---String類型

默認(rèn)值："GET"。

請(qǐng)求類型，可以為'POST'或'GET'。注意：你也可以在此處使用諸如'PUT'、'DELETE'等其他請(qǐng)求類型，但它們不被所有瀏覽器支持。

url --- String類型

默認(rèn)值：當(dāng)前頁(yè)面URL。

請(qǐng)求的目標(biāo)URL。

username --- String類型

用于響應(yīng)HTTP訪問(wèn)認(rèn)證請(qǐng)求的用戶名。

xhr --- Function類型

默認(rèn)值：在IE下是ActiveXObject(如果可用)，在其他瀏覽器中是XMLHttpRequest。

一個(gè)用于創(chuàng)建并返回XMLHttpRequest對(duì)象的回調(diào)函數(shù)。你可以重寫該屬性以提供自己的XHR實(shí)現(xiàn)，或增強(qiáng)其功能。

xhrFieldsObject類型1.5.1 新增

一個(gè)具有多個(gè)"字段名稱-字段值"對(duì)的對(duì)象，用于對(duì)本地XHR對(duì)象進(jìn)行設(shè)置。一對(duì)「文件名-文件值」在本機(jī)設(shè)置XHR對(duì)象。例如，如果需要，你可以用它來(lái)為跨域請(qǐng)求設(shè)置XHR對(duì)象的withCredentials屬性為true。

$.ajax({
   url: a_cross_domain_url,   // 將XHR對(duì)象的withCredentials設(shè)為true   xhrFields: {
      withCredentials: true
   }
});

注意：
1、如果你的所有AJAX請(qǐng)求都需要設(shè)置settings中某些參數(shù)，你可以使用jQuery.ajaxSetup()函數(shù)進(jìn)行全局設(shè)置，而無(wú)需在每次執(zhí)行jQuery.ajax()時(shí)分別設(shè)置。
2、在jQuery 1.4(含)之前，選項(xiàng)參數(shù)complete、succes、error等Ajax事件的回調(diào)函數(shù)的第3個(gè)參數(shù)不是經(jīng)過(guò)jQuery封裝的jqXHR對(duì)象，而是原生的XMLHttpRequest對(duì)象。

返回值

jQuery.ajax()函數(shù)的返回值為jqXHR類型，返回當(dāng)前該請(qǐng)求的jqHXR對(duì)象(jQuery 1.4及以前版本返回的是原生的XMLHttpRequest對(duì)象)。

示例&說(shuō)明

如果沒(méi)有給jQuery.ajax()指定任何參數(shù)，則默認(rèn)請(qǐng)求當(dāng)前頁(yè)面，并且不對(duì)返回?cái)?shù)據(jù)進(jìn)行處理。

jQuery.ajax()函數(shù)的settings對(duì)象中，常用的屬性有：url、type、async、data、dataType、success、error、complete、beforeSend、timeout等。

請(qǐng)參考下面這段初始HTML代碼：

<p id="content"></p>

以下是與jQuery.ajax()函數(shù)相關(guān)的jQuery示例代碼，以演示jQuery.ajax()函數(shù)的具體用法：

(演示頁(yè)面只有第一個(gè)ajax()函數(shù)，其他代碼請(qǐng)自行復(fù)制到演示頁(yè)面分別執(zhí)行)

$.ajax({
     url: "jquery_ajax.php"
    , type: "POST"
    , data: "name=codeplayer&age=18"
    , success: function( data, textStatus, jqXHR ){
        // data 是返回的數(shù)據(jù)
        // textStatus 可能為"success"、"notmodified"等
        // jqXHR 是經(jīng)過(guò)jQuery封裝的XMLHttpRequest對(duì)象
        alert("返回的數(shù)據(jù)" + data);
    }
});


$.ajax({
     url: "jquery_ajax.php?page=1&id=3"
    , type: "POST"
    // jQuery會(huì)自動(dòng)將對(duì)象數(shù)據(jù)轉(zhuǎn)換為 "name=codeplayer&age=18&uid=1&uid=2&uid=3"
    , data: { name:"codeplayer", age:18, uid: [1, 2, 3] }
    // 請(qǐng)求成功時(shí)執(zhí)行
    , success: function( data, textStatus, jqXHR ){
        alert("返回的數(shù)據(jù)" + data);
    }
    // 請(qǐng)求失敗時(shí)執(zhí)行
    , error: function(jqXHR, textStatus, errorMsg){
        // jqXHR 是經(jīng)過(guò)jQuery封裝的XMLHttpRequest對(duì)象
        // textStatus 可能為： null、"timeout"、"error"、"abort"或"parsererror"
        // errorMsg 可能為： "Not Found"、"Internal Server Error"等
        alert("請(qǐng)求失敗：" + errorMsg);
    }
});


// 將url單獨(dú)提取出來(lái)作為第一個(gè)參數(shù)(jQuery 1.5+才支持)
$.ajax("jquery_ajax.php?action=type&id=3", {
     dataType: "json" // 返回JSON格式的數(shù)據(jù)
    , success: function( data, textStatus, jqXHR ){
        // 假設(shè)返回的字符串?dāng)?shù)據(jù)為{ "name": "CodePlayer", age: 20 }
        // jQuery已幫我們將該JSON字符串轉(zhuǎn)換為對(duì)應(yīng)的JS對(duì)象，可以直接使用
        alert( data.name ); // CodePlayer
    }   
});


$.ajax( {
    // 注意這里有個(gè)參數(shù)callback=?
     url: "http://cross-domain/jquery_ajax.php?name=Jim&callback=?&age=21"
    , async: false // 同步請(qǐng)求，發(fā)送請(qǐng)求后瀏覽器將被鎖定，只有等到該請(qǐng)求完成(無(wú)論成功或失敗)后，用戶才能操作，js代碼才會(huì)繼續(xù)執(zhí)行
    , dataType: "jsonp" // 返回JSON格式的數(shù)據(jù)
    , success: function( data, textStatus, jqXHR ){
        // 假設(shè)返回的字符串?dāng)?shù)據(jù)為{ "site_name": "CodePlayer", "site_desc": "專注于編程開(kāi)發(fā)技術(shù)分享" }
        // jQuery已幫我們將該JSON字符串轉(zhuǎn)換為對(duì)應(yīng)的JS對(duì)象，可以直接使用
        alert( data.site_desc ); // 專注于編程開(kāi)發(fā)技術(shù)分享
    }   
});


$.ajax( {
    // 加載指定的js文件到當(dāng)前文檔中
     url: "http://code.jquery.com/jquery-1.8.3.min.js"
    , dataType: "script"
});

到此，相信大家對(duì)“ajax函數(shù)怎么使用”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！