從淺到深，帶你徹底搞懂AJAX異步請求

在平時開發過程中，異步請求似乎比同步請求出現的頻率還要高一些。這是爲什麼呢？在同步請求時如果對網頁的部分內容進行更新時，是不是就必須重載整個頁面。這樣肯定是不行的，這時就可以採用異步請求來解決此問題。

文章目錄

什麼是 AJAX

AJAX = 異步 JavaScript 和 XML。
AJAX 是一種用於創建快速動態網頁的技術。
通過在後臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。

實例用法

AJAX異步請求細分的話可以分爲四種：

load()方法
$.get()方法
$.post()方法
$.ajax()方法

其實這四種方法，原理和實現都相差無幾。具體實現請往下看吧。

1、AJAX load() 方法

load() 方法是簡單但強大的 AJAX 方法。
load() 方法從服務器加載數據，並把返回的數據放入被選元素中。

使用語法

$(selector).load(URL, data, callback);

【注意】
URL 必填項，請求加載的URL地址。
data 選填項，參數，請求時需要攜帶的參數，格式鍵 / 值對集合。
callback 選填項，load()方法執行完後回調方法。

使用案例（需要引入Jquery）
頁面給出了一個按鈕和一個div標籤，點擊按鈕load數據內容顯示到div中。代碼如下：

<button class = "btn btn-success" onclick = "loadFun()">AJAX   load方法</button>
<div id = "loadText" ></div>

JS代碼：

<script type="text/javascript">
	function loadFun(){
		//loadText顯示返回數據的標籤DOM
		$("#loadText").load("loadText", {data: "請求攜帶的參數"}, function(responseTxt, statusTxt, xhr){
			console.log(responseTxt);
			console.log(statusTxt);
			console.log(xhr);
		})
	}
</script>

【注】 load方法中第一個參數loadText是請求地址，第二{data: “請求攜帶的參數”}是攜帶的參數，第三個爲請求完成後回調方法。請求地址必填，其他兩個可以根據項目需求是否添加。

回調方法中三個參數分別爲：

responseTxt - 請求返回的內容
statusTXT - 請求返回的狀態
xhr - XMLHttpRequest 對象

loadText請求後臺代碼：

@RequestMapping(value = "/loadText")
public String loadText(String data) {
	System.out.println("前臺傳遞的參數" + data);
	return "loadText";
}

返回的爲loadText頁面，代碼如下(只需要body中的內容也可以)：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	這是load過去的頁面
</body>
</html>

初始頁面效果（初始頁面就一個按鈕）：

點擊按鈕後效果（點擊按鈕後，請求的到的內容將顯示在div中）：

瀏覽器控制檯輸出（請求結束後，回調方法的參數）

編輯器控制檯輸出（後臺方法接收到的參數輸出）

2、$.get() 方法

$.get() 方法通過 HTTP GET 請求從服務器上請求數據。
GET 基本上用於從服務器獲得（取回）數據。GET 方法可能返回緩存數據。

使用語法

$.get(URL, callback);

【注意】
URL 必填項，請求加載的URL地址。
callback 選填項，$.get()方法執行完後回調方法。

使用實例
這裏偷個懶 O(∩_∩)O哈哈~，頁面代碼還是用上面的load方法的，把點擊按鈕的方法改成$.get()方法了。代碼如下：

<script type="text/javascript">
	function loadFun(){
		$.get("loadText", function(data, status){
			console.log(data);
			console.log(status);
		})
	}
</script>

【注】 $.get()方法只能獲取到請求後臺返回的數據，不能直接顯示在頁面上，如果需要顯示在頁面上還是使用load方法吧（不嫌麻煩可以在回調函數中用JS處理）。其中loadText爲請求地址，必填項，第二回調方法，選填。

回調方法中的參數：

data爲請求返回的數據
status爲請求狀態

請求的後臺代碼和上面load方法的一樣，點擊按鈕後，瀏覽器控制檯輸出如下：

3、$.post() 方法

$.post() 方法通過 HTTP POST 請求從服務器上請求數據。
POST 也可用於從服務器獲取數據。不過，POST 方法不會緩存數據，並且常用於連同請求一起發送數據。

使用語法

$.post(URL, data, callback);

【注意】
URL 必填項，請求加載的URL地址。
data 選填項，參數，請求時需要攜帶的參數，格式鍵 / 值對集合。
callback 選填項，$.post()方法執行完後回調方法。

使用實例
這裏頁面只改了點擊按鈕的方法，發送請求方法改成$.post()方法了。代碼如下：

<script type="text/javascript">
	function loadFun(){
		$.post("loadText", {data: "請求攜帶的參數"}, function(data,status){
			console.log(data);
			console.log(status);
		})
	}
</script>

不難發現， $.post()方法在參數上和load()方法一樣，但回調方法的參數又和 $.get()方法一樣，這裏就不用在解釋了吧！直接來看一下效果吧（左邊爲瀏覽器控制檯輸出，右邊爲編輯器控制檯輸出）。

4、ajax() 方法

ajax() 方法通過 HTTP 請求加載遠程數據。該方法是 jQuery 底層 AJAX 實現。上面的 $.post()和 $.get()方法底層都是ajax()方法。大多數情況直接使用 $.post()和 $.get()方法簡單一些，如果需要操作不常用的選項，使用ajax()方法更靈活，屬性設置多一些。
【注】 這裏說一下 $.get()和 $.post()方法除了參數外的區別， $.get()方法請求攜帶的參數一般只能拼接在請求地址後面，安全性不是很高。 $.post()方法請求攜帶的參數不會顯示在地址後面，所以安全性要高一點，一般推薦使用 post方法。

ajax()的簡單使用案例
這裏頁面只改了點擊按鈕的方法，發送請求方法改成$.ajax()方法了。代碼如下：

<script type="text/javascript">
	function loadFun(){
		$.ajax({
			url: "loadText",	//請求地址
			type: "post",	//請求方式，post/get
			data: {data: "請求攜帶的參數"},		//請求攜帶參數
			async: false,	//設置請求是同步還是異步，默認爲true異步
			// 設置返回的數據類型，一般最多的設置爲json，這裏因爲返回的是一個HTML文件，所以設置的爲text文本。詳細講解請往下看
			dataType:"text", 
			success: function(data){	//請求成功後的回調函數，data爲返回的數據
				console.log(data);
			}
		});
	}
</script>

其中請求地址還是上面的請求地址，使用對應的後臺方法也就一樣了。其中屬性這裏只設置了部分，下方有ajax方法的全部屬性，可以根據項目需求自行添加。下面是控制檯輸出的效果（左邊爲瀏覽器控制檯輸出，右邊爲編輯器控制檯輸出）。

5、頁面全部代碼

因爲寫的案例，偷了個懶O(∩_∩)O哈哈~，每次都只改了按鈕點擊事件的方法，這裏我把頁面的全部代碼貼出來，大家容易看一些。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="static/bootstrap/js/jquery.js"></script>
</head>
<body>
	<button class = "btn btn-success" onclick = "loadFun()">AJAX   load方法</button>
	<div id = "loadText" ></div>
	
	<script type="text/javascript">
		function loadFun(){
			//load()方法
			/* $("#loadText").load("loadText", {data: "請求攜帶的參數"}, function(responseTxt, statusTxt, xhr){
				console.log(responseTxt);
				console.log(statusTxt);
				console.log(xhr);
			}) */
			
			//$.get()方法
			/* $.get("loadText", function(data,status){
				console.log(data);
				console.log(status);
			}) */
			
			//$.post()方法
			/* $.post("loadText", {data: "請求攜帶的參數"}, function(data,status){
				console.log(data);
				console.log(status);
			}) */
			
			//ajax方法
			$.ajax({
				url: "loadText",	//請求地址
				type: "post",	//請求方式，post/get
				data: {data: "請求攜帶的參數"},		//請求攜帶參數
				async: false,	//設置請求是同步還是異步，默認爲true異步
				// 設置返回的數據類型，一般最多的設置爲json，這裏因爲返回的是一個HTML文件，所以設置的爲text文本。詳細講解請往下看
				dataType:"text", 
				success: function(data){	//請求成功後的回調函數，data爲返回的數據
					console.log(data);
				}
			});
		}
	</script>
</body>
</html>

6、ajax的常用屬性

1、url
類型：String
默認值: 當前頁地址。發送請求的地址。

2、type
類型：String
請求類型（get / set），默認值: “GET”。請求方式 (“POST” 或 “GET”)，默認爲 “GET”。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支持。

3、data
類型：String
請求攜帶的參數，發送到服務器的數據。將自動轉換爲請求字符串格式。GET 請求中將附加在 URL 後。必須爲 Key/Value 格式。如果爲數組，jQuery 將自動爲不同值對應同一個名稱。如 {foo:[“bar1”, “bar2”]} 轉換爲 ‘&foo=bar1&foo=bar2’。

4、async
類型：Boolean
請求方式（同步 / 異步），默認值: true。默認設置下，所有請求均爲異步請求。如果需要發送同步請求，請將此選項設置爲 false。
注意，同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成纔可以執行。

5、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”: 返回純文本字符串

6、success
類型：Function方法
請求成功後的回調函數。
參數：由服務器返回，並根據 dataType 參數進行處理後的數據；描述狀態的字符串。

7、error
類型：Function方法
默認值: 自動判斷 (xml 或 html)。請求失敗時調用此函數。
有以下三個參數：XMLHttpRequest 對象、錯誤信息、（可選）捕獲的異常對象。
如果發生了錯誤，錯誤信息（第二個參數）除了得到 null 之外，還可能是 “timeout”, “error”, “notmodified” 和 “parsererror”。

8、complete(XHR, TS)
類型：Function方法
請求完成後回調函數 (請求成功或失敗之後均調用)。
參數： XMLHttpRequest 對象和一個描述請求類型的字符串。

9、beforeSend(XHR)
類型：Function方法
發送請求前可修改 XMLHttpRequest 對象的函數，如添加自定義 HTTP 頭。
XMLHttpRequest 對象是唯一的參數。
如果返回 false 可以取消本次 ajax 請求。

10、xhr
類型：Function方法
需要返回一個 XMLHttpRequest 對象。默認在 IE 下是 ActiveXObject 而其他情況下是 XMLHttpRequest 。用於重寫或者提供一個增強的 XMLHttpRequest 對象。這個參數在 jQuery 1.3 以前不可用。

11、dataFilter
類型：Function方法
給 Ajax 返回的原始數據的進行預處理的函數。提供 data 和 type 兩個參數：data 是 Ajax 返回的原始數據，type 是調用 jQuery.ajax 時提供的 dataType 參數。函數返回的值將由 jQuery 進一步處理。

12、ifModified
類型：Boolean
僅在服務器數據改變時獲取新數據。默認值: false。使用 HTTP 包 Last-Modified 頭信息判斷。在 jQuery 1.4 中，它也會檢查服務器指定的 ‘etag’ 來確定數據沒有被修改過。

13、password
類型：String
用於響應 HTTP 訪問認證請求的密碼

14、username
類型：String
用於響應 HTTP 訪問認證請求的用戶名。

15、contentType
類型：String
默認值: “application/x-www-form-urlencoded”。發送信息至服務器時內容編碼類型。
默認值適合大多數情況。如果你明確地傳遞了一個 content-type 給 $.ajax() 那麼它必定會發送給服務器（即使沒有數據要發送）。

16、context
類型：Object
這個對象用於設置 Ajax 相關回調函數的上下文。也就是說，讓回調函數內 this 指向這個對象（如果不設定這個參數，那麼 this 就指向調用本次 AJAX 請求時傳遞的 options 參數）。比如指定一個 DOM 元素作爲 context 參數，這樣就設置了 success 回調函數的上下文爲這個 DOM 元素。
就像這樣：

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

17、cache
類型：Boolean
默認值: true，dataType 爲 script 和 jsonp 時默認爲 false。設置爲 false 將不緩存此頁面。

18、global
類型：Boolean
是否觸發全局 AJAX 事件。默認值: true。設置爲 false 將不會觸發全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用於控制不同的 Ajax 事件。

19、jsonp
類型：String
在一個 jsonp 請求中重寫回調函數的名字。這個值用來替代在 “callback=?” 這種 GET 或 POST 請求中 URL 參數裏的 “callback” 部分，比如 {jsonp:‘onJsonPLoad’} 會導致將 “onJsonPLoad=?” 傳給服務器。

20、jsonpCallback
類型：String
爲 jsonp 請求指定一個回調函數名。這個值將用來取代 jQuery 自動生成的隨機函數名。這主要用來讓 jQuery 生成度獨特的函數名，這樣管理請求更容易，也能方便地提供回調函數和錯誤處理。你也可以在想讓瀏覽器緩存 GET 請求的時候，指定這個回調函數名。

21、processData
類型：Boolean
默認值: true。默認情況下，通過data選項傳遞進來的數據，如果是一個對象(技術上講只要不是字符串)，都會處理轉化成一個查詢字符串，以配合默認內容類型 “application/x-www-form-urlencoded”。如果要發送 DOM 樹信息或其它不希望轉換的信息，請設置爲 false。

22、scriptCharset
類型：String
只有當請求時 dataType 爲 “jsonp” 或 “script”，並且 type 是 “GET” 纔會用於強制修改 charset。通常只在本地和遠程的內容編碼不同時使用。

23、traditional
類型：Boolean
如果你想要用傳統的方式來序列化數據，那麼就設置爲 true。

24、timeout
類型：Number
設置請求超時時間（毫秒）。此設置將覆蓋全局設置。

都看到這裏了，點個贊在走唄！原創不易，各位的支持和認可，是對我創作的最大鼓勵。

從淺到深，帶你徹底搞懂AJAX異步請求

文章目錄

什麼是 AJAX

實例用法

1、AJAX load() 方法

2、$.get() 方法

3、$.post() 方法

4、ajax() 方法

5、頁面全部代碼

6、ajax的常用屬性

【面試準備】又一次失敗的面試經歷，題目離譜～資深軟件測試工程師

大廠都在用的Markdown編輯器

SpringBoot整合Shiro（完整版）

Java持久層和控制器的封裝

BootStrap-Table-Treegrid樹形表格使用指南

BootStrap富文本編輯器Summernote

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結