關於jQuery ajax - ajax() 的使用方法

在學習ajax時會遇到ajax()的使用問題，接下來就詳細介紹ajax()的具體使用方法。

實例

透過AJAX 載入一段文字：

jQuery 程式碼：

$(document).ready(function(){
  $("#b01").click(function(){
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myDiv").html(htmlobj.responseText);
  });
});

HTML 程式碼：

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button id="b01" type="button">Change Content</button>

# 定義與用法

ajax() 方法透過HTTP 請求載入遠端資料。

此方法是 jQuery 底層 AJAX 實作。簡單易用的高層實作請見 $.get, $.post 等。 $.ajax() 傳回其建立的 XMLHttpRequest 物件。大多數情況下你無需直接操作該函數，除非你需要操作不常用的選項，以獲得更多的彈性。

最簡單的情況下，$.ajax() 可以不帶任何參數直接使用。

注意：所有的選項都可以透過 $.ajaxSetup() 函數來全域設定。

語法

jQuery.ajax([settings])

參數

描述

settings    

可選。用於配置 Ajax 請求的鍵值對集合。

可以透過 $.ajaxSetup() 設定任何選項的預設值。

參數

options

類型：Object

#可選。 AJAX 請求設定。所有選項都是可選的。

async

類型：Boolean

預設值: true。預設設定下，所有請求均為非同步請求。如果需要傳送同步請求，請將此選項設為 false。

注意，同步請求將鎖住瀏覽器，使用者其它操作必須等待請求完成才可以執行。

beforeSend(XHR)

類型：Function

#發送請求前可修改 XMLHttpRequest 物件的函數，例如新增自訂 HTTP 頭。

XMLHttpRequest 物件是唯一的參數。

這是一個 Ajax 事件。如果回傳 false 可以取消本次 ajax 請求。

cache

類型：Boolean

預設值: true，dataType 為 script 和 jsonp 時預設為 false。設定為 false 將不快取此頁面。

jQuery 1.2 新功能。

complete(XHR, TS)

類型：Function

#請求完成後回呼函數 (請求成功或失敗之後皆呼叫)。

參數： XMLHttpRequest 物件和一個描述請求類型的字串。

這是一個 Ajax 事件。

contentType

類型：String

預設值: "application/x-www-form-urlencoded"。發送訊息至伺服器時內容編碼類型。

預設值適合大多數情況。如果你明確地傳遞了一個 content-type 給 $.ajax() 那麼它必定會傳送給伺服器（即使沒有資料要傳送）。

context

類型：Object

這個物件用來設定 Ajax 相關回呼函數的上下文。也就是說，讓回呼函數內 this 指向這個物件（如果不設定這個參數，那麼 this 就指向呼叫本次 AJAX 請求時傳遞的 options 參數）。例如指定一個 DOM 元素作為 context 參數，這樣就設定了 success 回呼函數的上下文為這個 DOM 元素。

就像這樣：

$.ajax({ url: "test.html", context: document.body, success: function(){
        $(this).addClass("done");
      }});

data

類型：String

#傳送到伺服器的資料。將自動轉換為請求字串格式。 GET 請求中將附加在 URL 後。查看 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。如果為數組，jQuery 將自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換為 '&foo=bar1&foo=bar2'。

dataFilter

類型：Function

給 Ajax 傳回的原始資料的進行預處理的函數。提供 data 和 type 兩個參數：data 是 Ajax 傳回的原始數據，type 是呼叫 jQuery.ajax 時提供的 dataType 參數。函數傳回的值將由 jQuery 進一步處理。

dataType

類型：String

預期伺服器傳回的資料類型。如果不指定，jQuery 會自動根據 HTTP 套件 MIME 資訊來智慧判斷，例如 XML MIME 類型就被辨識為 XML。在 1.4 中，JSON 就會產生一個 JavaScript 對象，而 script 則會執行這個腳本。隨後伺服器端傳回的資料會根據這個值解析後，傳遞給回呼函數。可用值:

"xml": 傳回 XML 文檔，可用 jQuery 處理。

"html": 傳回純文字 HTML 資訊；包含的 script 標籤會在插入 dom 時執行。

"script": 傳回純文字 JavaScript 程式碼。不會自動快取結果。除非設定了 "cache" 參數。注意：在遠端請求時(不在同一個網域下)，所有 POST 請求都會轉為 GET 請求。 （因為將使用 DOM 的 script標籤來載入）

"json": 傳回 JSON 資料 。

"jsonp": JSONP 格式。使用 JSONP 形式呼叫函數時，如 "myurl?callback=?" jQuery 會自動取代 ? 為正確的函式名，以執行回呼函數。

"text": 傳回純文字字串

error

類型：Function

預設值: 自動判斷 (xml 或 html)。請求失敗時呼叫此函數。

有以下三個參數：XMLHttpRequest 物件、錯誤訊息、（可選）擷取的例外物件。

如果發生了錯誤，錯誤訊息（第二個參數）除了得到 null 之外，還可能是 "timeout", "error", "notmodified" 和 "parsererror"。

這是一個 Ajax 事件。

global

類型：Boolean

是否觸發全域 AJAX 事件。預設值: true。設定為 false 將不會觸發全域 AJAX 事件，如 ajaxStart 或 ajaxStop 可用於控制不同的 Ajax 事件。

ifModified

類型：Boolean

僅在伺服器資料改變時取得新資料。預設值: false。使用 HTTP 套件 Last-Modified 頭資訊判斷。在 jQuery 1.4 中，它也會檢查伺服器指定的 'etag' 來確定資料沒有被修改過。

jsonp

類型：String

在一個 jsonp 請求中重寫回調函數的名字。這個值用來取代在 "callback=?" 這種 GET 或 POST 請求中 URL 參數裡的 "callback" 部分，例如 {jsonp:'onJsonPLoad'} 會導致將 "onJsonPLoad=?" 傳給伺服器。

jsonpCallback

類型：String

為 jsonp 請求指定一個回呼函數名。這個值將會用來取代 jQuery 自動產生的隨機函數名稱。這主要用來讓 jQuery 產生度獨特的函數名，這樣管理請求更容易，也能方便地提供回呼函數和錯誤處理。你也可以在想讓瀏覽器快取 GET 請求的時候，指定這個回呼函數名稱。

password

類型：String

用於回應HTTP 存取認證請求的密碼

processData

類型：Boolean

#預設值: true。預設情況下，透過data選項傳遞進來的數據，如果是一個物件(技術上講只要不是字串)，都會處理轉換成一個查詢字串，以配合預設內容類型"application/x-www-form-urlencoded "。如果要傳送 DOM 樹資訊或其它不希望轉換的訊息，請設定為 false。

scriptCharset

類型：String

只有當請求時 dataType 為 "jsonp" 或 "script"，而 type 是 "GET" 才會用來強制修改 charset。通常只在本地和遠端的內容編碼不同時使用。

success

類型：Function

請求成功後的回呼函數。

參數：由伺服器傳回，並根據 dataType 參數進行處理後的資料；描述狀態的字串。

這是一個 Ajax 事件。

traditional

類型：Boolean

如果你想要用傳統的方式來序列化數據，那麼就設定為 true。請參考工具分類下面的 jQuery.param 方法。

timeout

類型：Number

#設定請求逾時時間（毫秒）。此設定將覆蓋全域設定。

type

類型：String

預設值: "GET")。請求方式 ("POST" 或 "GET")， 預設為 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支援。

url

類型：String

預設值: 目前頁位址。發送請求的位址。

username

類型：String

用於回應 HTTP 存取認證請求的使用者名稱。

xhr

類型：Function

#需要傳回一個 XMLHttpRequest 物件。預設在 IE 下是 ActiveXObject 而其他情況是 XMLHttpRequest 。用於重寫或提供一個增強的 XMLHttpRequest 物件。這個參數在 jQuery 1.3 以前不可用。

回呼函數

如果要處理 $.ajax() 得到的數據，則需要使用回呼函數：beforeSend、error、dataFilter、success、complete。

beforeSend

在發送請求之前調用，並且傳入一個 XMLHttpRequest 作為參數。

error

在請求出錯時呼叫。傳入 XMLHttpRequest 對象，描述錯誤類型的字串以及一個異常對象（如果有的話）

dataFilter

在請求成功之後調用。傳入傳回的資料以及 "dataType" 參數的值。並且必須傳回新的資料（可能是處理過的）傳遞給 success 回呼函數。

success

當請求之後呼叫。傳入返回後的數據，以及包含成功代碼的字串。

complete

當請求完成之後呼叫這個函數，無論成功或失敗。傳入 XMLHttpRequest 對象，以及一個包含成功或錯誤代碼的字串。

資料型別

$.ajax() 函數依賴伺服器提供的資訊來處理傳回的資料。如果伺服器報告說傳回的資料是 XML，那麼傳回的結果就可以用普通的 XML 方法或 jQuery 的選擇器來遍歷。如果您看到得到其他類型，例如 HTML，則資料就以文字形式來對待。

透過 dataType 選項也可以指定其他不同資料處理方式。除了單純的 XML，還可以指定 html、json、jsonp、script 或 text。

其中，text 和 xml 類型傳回的資料不會經過處理。資料僅簡單的將 XMLHttpRequest 的 responseText 或 responseHTML 屬性傳遞給 success 回呼函數。

注意：我們必須確保網頁伺服器報告的 MIME 類型與我們選擇的 dataType 所匹配。比方說，XML的話，伺服器端就必須宣告 text/xml 或 application/xml 來獲得一致的結果。

如果指定為 html 類型，任何內嵌的 JavaScript 都會在 HTML 作為一個字串傳回之前執行。類似地，指定 script 類型的話，也會先執行伺服器端產生 JavaScript，然後再把腳本當作一個文字資料回傳。

如果指定為 json 類型，則會把獲取到的資料當作一個 JavaScript 物件來解析，並且把建構好的物件當作結果傳回。為了實現這個目的，它首先嘗試使用 JSON.parse()。如果瀏覽器不支持，則使用函數來建構。

JSON 資料是一種能很方便透過 JavaScript 解析的結構化資料。如果取得的資料檔案存放在遠端伺服器上（網域名稱不同，也就是跨網域取得資料），則需要使用 jsonp 類型。使用這種類型的話，會建立一個查詢字串參數 callback=? ，這個參數會加在請求的 URL 後面。伺服器端應在 JSON 資料前加上回呼函數名，以便完成一個有效的 JSONP 請求。如果要指定回呼函數的參數名稱來取代預設的 callback，可以透過設定 $.ajax() 的 jsonp 參數。

注意：JSONP 是 JSON 格式的擴充。它要求一些伺服器端的程式碼來檢測並處理查詢字串參數。

如果指定了 script 或 jsonp 類型，那麼當從伺服器接收到資料時，實際上是使用了

熱AI工具

Undress AI Tool

免費脫衣圖片

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

Oguri Cap Build Guide |漂亮的德比志

3 週前 By Jack chen

Agnes Tachyon Build Guide |漂亮的德比志

3 週前 By Jack chen

Grass Wonder Build Guide |烏瑪媽媽漂亮的德比

2 週前 By Jack chen

峰如何表現

1 個月前 By Jack chen

如何修復KB5060829未安裝和其他報告的錯誤

3 週前 By DDD

顯示更多

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

Java教學

1793

16

CakePHP 教程

1735

56

Laravel 教程

1587

29

NYT迷你填字遊戲答案

267

587

NYT連接提示和答案

120

836

顯示更多