ajax函數是指jQuery.ajax()函數,該函數用於透過後台HTTP請求載入遠端數據,是jQuery封裝的AJAX技術實現,透過該函數,我們無需刷新當前頁面即可獲取遠端伺服器上的數據。
本文操作環境:Windows7系統,jquery3.2.1版,Dell G3電腦。
ajax函數是什麼?
jQuery.ajax() 函數詳解
#jQuery.ajax()
函數用於透過後台HTTP請求加載遠程資料。
jQuery.ajax()
函數是jQuery封裝的AJAX技術實現,透過該函數,我們無需刷新當前頁面即可獲取遠端伺服器上的資料。
jQuery.ajax()
函數是jQuery的底層AJAX實作。 jQuery.get()、 jQuery.post()、load()、 jQuery.getJSON()、 jQuery.getScript()等函數都是此函數的簡化形式(都會呼叫函數,只是參數設定有所不同或有所省略)。
此函數屬於全域jQuery
物件(也可理解為靜態函數)。
請根據前面語法部分所定義的參數名稱尋找對應的參數。
參數 | 描述 |
---|---|
#url | String類型URL請求字串。 |
settings | 可選/Object類型一個Object對象,其中的每個屬性用來指定發送請求所需的額外參數設定。 |
參數settings
是一個對象,jQuery.ajax()
可以辨識該物件的以下屬性(它們都是可選的):
dataType屬性。
。 指示是否為非同步請求。同步請求將鎖定瀏覽器,直到取得遠端資料後才能執行其他操作。
settings對象。這是一個
Ajax事件,如果函數傳回false
,將取消本次ajax請求。
為'script'或'jsonp'時,則預設為false
)。 指示是否要快取URL請求。如果設為
false
將強制瀏覽器
目前URL請求。此參數只對HEAD、GET請求有效(POST請求本身就不會快取)。 complete
對象,一個是表示請求狀態的字串('success'、 'notmodified'、 'error'、 'timeout'、 'abort'或'parsererror ')。這是一個Ajax事件。 從jQuery 1.5開始,該屬性值可以是陣列形式的多個函數,每個函數都會被回調執行。
contents
------
---
converters
---
一個資料型別轉換器。每個轉換器的值都是一個<span id="9_nwp">函數,用來傳回回應轉換後的值。 </span>
crossDomain---
指示是否為跨域請求。如果你想在同一網域中強制跨域請求(如JSONP形式),請設定為true。例如,這允許
伺服器端重定向到另一個網域。
#傳送到伺服器的數據,它將自動轉為字串類型。如果是GET請求,它將被附加到URL後面。
指定處理回應的原始資料的回調函數。此函數還有兩個參數:其一表示回應的原始資料的字串,其二是<span id="8_nwp">dataType</span>
#屬性字串。
預設值:jQuery智慧猜測,猜測範圍(xml、 json、 script或html)
指定傳回的資料類型。此屬性值可以為:
cache
參數。注意:在遠端請求時(不在同一個網域下),所有POST請求都會轉為GET請求。 (因為將使用DOM的script標籤來載入)
null
或{}
。
指定請求失敗時執行的回呼函數。此函數有3個參數:jqXHR物件、 請求狀態字串(null、 'timeout'、 'error'、 'abort'和'parsererror')、錯誤訊息字串(回應狀態的文字描述部分,例如'Not Found '或'Internal Server Error')。這是一個Ajax事件。跨域腳本和跨域JSONP請求不會呼叫函數。
從jQuery 1.5開始,該屬性值可以是陣列形式的多個函數,每個函數都會被回調執行。
true。
false將阻止全域事件處理函數被觸發,例如ajaxStart()和ajaxStop()。它可以用來控制各種Ajax事件。
. 以物件形式指定附加的請求標頭資訊。請求頭
將始終被添加,當然你也可以在此處修改預設的XMLHttpRequest值。 headers
中的值可以覆寫beforeSend
回呼函數中設定的請求頭(意即beforeSend先被呼叫)。 <pre class="brush:php;toolbar:false">$.ajax({
url: "my.php" ,
headers: { "Referer": "http://www.365mini.com" // 有些浏览器不允许修改该请求头
,"User-Agent": "newLine" // 有些浏览器不允许修改该请求头
,"X-Power": "newLine"
,"Accept-Language": "en-US"
}
});</pre>
允許目前請求僅在伺服器資料改變時取得新資料(如未更改,瀏覽器從快取中取得資料)。它使用HTTP頭資訊
Last-Modified
允许将当前环境视作"本地",(例如文件系统),即使默认情况下jQuery不会如此识别它。目前,以下协议将被视作本地:file
、*-extension
和widget
。
重写JSONP请求的回调函数名称。该值用于替代"url?callback=?"中的"callback"部分。
为JSONP请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。
从jQuery 1.5开始,你也可以指定一个函数来返回所需的函数名称。
一个mime类型用来覆盖XHR的mime类型。
用于响应HTTP访问认证请求的密码。
默认值:true
。
默认情况下,通过<span id="4_nwp">data</span>
属性传递进来的数据,如果是一个对象(技术上讲,只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM树信息或其它不希望转换的信息,请设置为false
。
设置该请求加载的脚本文件的字符集。只有当请求时dataType为"jsonp"或"script",并且type是"GET"才会用于强制修改charset。这相当于设置3f1c4e4b6b16bbbd69b2ee476dc4f83a标签的charset属性。通常只在当前页面和远程数据的内容编码不同时使用。
默认值: {}
。
一组数值的HTTP代码和函数构成的对象,当响应时调用了相应的代码。例如:
$.ajax({ url: a_not_found_url , // 当响应对应的状态码时,执行对应的回调函数 statusCode: { 404: function() { alert( "找不到页面" ); }, 200: function(){ alert("请求成功"); } } });
指定请求成功后执行的回调函数。该函数有3个参数:请求返回的数据、响应状态字符串、jqXHR
对象。
从jQuery 1.5开始,该属性值可以是数组形式的多个函数,每个函数都将被回调执行。
设置请求超时的毫秒值。
如果你希望使用传统方式来序列化参数,将该属性设为true
。
默认值:"GET"。
请求类型,可以为'POST'或'GET'。注意:你也可以在此处使用诸如'PUT'、'DELETE'等其他请求类型,但它们不被所有浏览器支持。
默认值:当前页面URL。
请求的目标URL。
用于响应HTTP访问认证请求的用户名。
默认值:在IE下是ActiveXObject
(如果可用),在其他浏览器中是XMLHttpRequest
。
一个用于创建并返回XMLHttpRequest对象的回调函数。你可以重写该属性以提供自己的XHR实现,或增强其功能。
一个具有多个"字段名称-字段值"对的对象,用于对本地XHR对象进行设置。一对「文件名-文件值」在本机设置XHR对象。例如,如果需要,你可以用它来为跨域请求设置XHR对象的withCredentials
属性为true
。
$.ajax({ url: a_cross_domain_url, // 将XHR对象的withCredentials设为true xhrFields: { withCredentials: true } });
注意:
1、如果你的所有AJAX请求都需要设置settings
中某些参数,你可以使用jQuery.ajaxSetup()函数进行全局设置,而无需在每次执行jQuery.ajax()
时分别设置。
2、在jQuery 1.4(含)之前,选项参数complete
、succes
、error
等Ajax事件的回调函数的第3个参数不是经过jQuery封装的jqXHR对象,而是原生的XMLHttpRequest对象。
jQuery.<span id="19_nwp">ajax()</span>
函数的返回值为jqXHR类型,返回当前该请求的jqHXR对象(jQuery 1.4及以前版本返回的是原生的XMLHttpRequest对象)。
如果没有给jQuery.ajax()
指定任何参数,则默认请求当前页面,并且不对返回数据进行处理。
jQuery.ajax()
函数的settings
对象中,常用的属性有:url、type、async、data、dataType、success、error、complete、beforeSend、timeout等。
请参考下面这段初始HTML代码:
<div id="content"></div>
以下是与jQuery.ajax()
函数相关的jQuery示例代码,以演示jQuery.ajax()
函数的具体用法:
(演示页面只有第一个ajax()函数,其他代码请自行复制到演示页面分别执行)
$.ajax({ url: "jquery_ajax.php" , type: "POST" , data: "name=codeplayer&age=18" , success: function( data, textStatus, jqXHR ){ // data 是返回的数据 // textStatus 可能为"success"、"notmodified"等 // jqXHR 是经过jQuery封装的XMLHttpRequest对象 alert("返回的数据" + data); } }); $.ajax({ url: "jquery_ajax.php?page=1&id=3" , type: "POST" // jQuery会自动将对象数据转换为 "name=codeplayer&age=18&uid=1&uid=2&uid=3" , data: { name:"codeplayer", age:18, uid: [1, 2, 3] } // 请求成功时执行 , success: function( data, textStatus, jqXHR ){ alert("返回的数据" + data); } // 请求失败时执行 , error: function(jqXHR, textStatus, errorMsg){ // jqXHR 是经过jQuery封装的XMLHttpRequest对象 // textStatus 可能为: null、"timeout"、"error"、"abort"或"parsererror" // errorMsg 可能为: "Not Found"、"Internal Server Error"等 alert("请求失败:" + errorMsg); } }); // 将url单独提取出来作为第一个参数(jQuery 1.5+才支持) $.ajax("jquery_ajax.php?action=type&id=3", { dataType: "json" // 返回JSON格式的数据 , success: function( data, textStatus, jqXHR ){ // 假设返回的字符串数据为{ "name": "CodePlayer", age: 20 } // jQuery已帮我们将该JSON字符串转换为对应的JS对象,可以直接使用 alert( data.name ); // CodePlayer } }); $.ajax( { // 注意这里有个参数callback=? url: "http://cross-domain/jquery_ajax.php?name=Jim&callback=?&age=21" , async: false // 同步请求,发送请求后浏览器将被锁定,只有等到该请求完成(无论成功或失败)后,用户才能操作,js代码才会继续执行 , dataType: "jsonp" // 返回JSON格式的数据 , success: function( data, textStatus, jqXHR ){ // 假设返回的字符串数据为{ "site_name": "CodePlayer", "site_desc": "专注于编程开发技术分享" } // jQuery已帮我们将该JSON字符串转换为对应的JS对象,可以直接使用 alert( data.site_desc ); // 专注于编程开发技术分享 } }); $.ajax( { // 加载指定的js文件到当前文档中 url: "http://code.jquery.com/jquery-1.8.3.min.js" , dataType: "script" });
推荐学习:《ajax视频教程》
以上是ajax函數是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!