文章目錄

一、原生 AJAX
- 1. AJAX 簡介
- 2. XML 簡介
- 3. AJAX 特點
- 4. XMLHttpRequest 物件
- 5. 向服務器發送請求
- 6. 接收服務器回應
- 7. AJAX 的使用
- 8. 請求超時與網路例外處理
- 9. AJAX 取消請求
二、jQuery 中 AJAX 請求
- 1. $.ajax()
- 2. $.get
- 3. $.post
三、axios 發送 AJAX 請求
- 1. axios 特性
- 2. axios 安裝
- 3. axios 使用
四、fetch 發送 AJAX 請求

一、原生 AJAX

1. AJAX 簡介

AJAX，即 Asynchronous JavaScript and XML 的縮寫，指的是通過 JavaScript 的異步通信，從服務器獲取 XML 檔案從中提取資料，再更新當前網頁的對應部分，而不用重繪整個網頁，

后來，AJAX 這個詞就成為 JavaScript 腳本發起 HTTP 通信的代名詞，也就是說，只要用腳本發起通信，就可以叫做 AJAX 通信，

AJAX 不是新的編程語言，而是一種將現有的標準組合在一起使用的新方式，

具體來說，AJAX 包括以下幾個步驟：

在這里插入圖片描述

概況來說，AJAX 通過原生的 XMLHttpRequest 物件發出 HTTP 請求，得到服務器回傳的資料后，再進行處理，

2. XML 簡介

XML 可擴展標記語言，是一種用于標記電子檔案使其具有結構性的標記語言，XML 被用于存盤和傳輸資料，

XML 和 HTML 類似，不同的是 HTML 中都是預定義標簽，而 XML 中沒有預定義標簽，全都是自定義標簽，用來表示一些資料，

例如，對于一個學生資料 name = "孫悟空" ; age = 18; gender = "男" 可以用 XML 表示為

<student>
	<name>孫悟空</name>
	<age>18</age>
	<gender>男</gender>
</student>

現在，服務器回傳的都是 JSON 格式的資料，XML 格式已經被 JSON 取代了，JSON 表示為

{"name":"孫悟空", "age":18, "gender":"男"}

3. AJAX 特點

優點

可以在頁面不重繪的情況下，向服務端發送請求
允許根據用戶事件（如滑鼠事件、鍵盤事件、表單事件等）來更新部分頁面內容

缺點

沒有瀏覽歷史，不能回退
存在跨域問題（同源），如 a.com 網頁打算向 b.com 網頁發送請求，Ajax 默認是不允許的，
SEO 搜索引擎優化不友好，爬蟲爬取不到網頁中相關資料

4. XMLHttpRequest 物件

AJAX 的核心是 XMLHttpRequest 物件，它用于同幕后服務器交換資料，這意味著可以更新網頁的部分，而不需要重新加載整個頁面，

創建語法

const xhr = new XMLHttpRequest();

物件方法

先簡單進行列舉，后文用到時詳解，
在這里插入圖片描述

物件屬性

先簡單進行列舉，后文用到時詳解，
在這里插入圖片描述

5. 向服務器發送請求

如需向服務器發送請求，我們使用 XMLHttpRequest 物件的 open() 和 send() 方法，如下：

GET 請求

	xhr.open('GET', 'http://127.0.0.1:8000/server');
	// 3. 發送
	xhr.send();

POST 請求

	xhr.open('POST', 'http://127.0.0.1:8000/server');
	xhr.send();

如需像 HTML 表單那樣 POST 資料，需要通過 setRequestHeader() 添加一個 HTTP 頭部，

	xhr.open('POST', 'http://127.0.0.1:8000/server');
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	xhr.send('a=100&b=200&c=300');

open 方法

初始化 HTTP 請求引數，但不會發送請求，

	xhr.open(method, url [, async][,user][,pwd])

method：要使用的 HTTP 方法，比如 GET、POST 等，
url：要向其發送請求的 URL ，
async：可選，表示是否異步執行操作，默認為 true，true 表示通過異步發送請求；false 表示同步發送請求，將停止執行直到服務器回應就緒（不推薦使用），
user：可選，用戶名稱，
pwd：可選，密碼，

send 方法

這個方法導致一個 HTTP 請求發送，

	xhr.send(body)

GET 請求不傳 body 引數，只有 POST 請求使用，

如果之前沒有呼叫 open()，或者更具體地說，如果 readyState 不是 1，send() 拋出一個例外，否則，它發送一個 HTTP 請求，該請求由以下幾部分組成：

之前呼叫 open() 時指定的 HTTP 方法、URL 以及認證資格（如果有的話），
之前呼叫 setRequestHeader() 時指定的請求頭部（如果有的話），
傳遞給這個方法的 body 引數，

setRequestHeader 方法

向請求添加 HTTP 頭部，也就是設定請求頭資訊，此方法必須在 open() 方法和 send() 之間呼叫，

	setRequestHeader(header, value)

header：規定頭部名稱
value：規定頭部值

一般我們設定的是：content-type，傳輸資料型別，即服務器需要我們傳送的資料型別

	xhr.setRequestHeader ("content-type", "application/x-www-form-urlencoded" )

6. 接收服務器回應

readyState

readyState 保存了 XMLHttpRequest 的狀態，其屬性值對應描述如下：

屬性值	描述
`0`	XMLHttpRequest 物件已創建或已被 `abort()` 方法重置
`1`	`open()` 方法已呼叫， `send()` 方法未呼叫，請求還沒有被發送
`2`	`send()` 方法已呼叫，HTTP 請求已發送到 Web 服務器，但還未接收到回應
`3`	所有回應頭部都已經接收到，回應體開始接收但未完成
`4`	請求已完成且 HTTP 回應已經完全接收

每當 readyState 發生變化時就會呼叫 onreadystatechange 函式，

status

請求的狀態碼，HTTP 回應中狀態行的一部分，不同的狀態碼代表不同的含義，如下：

狀態碼	描述
1xx	表示 HTTP 請求已經接受，繼續處理請求
2xx	表示 HTTP 請求已經處理完成
3xx	表示把請求訪問的 URL 重定向到其他目錄
4xx	表示客戶端出現錯誤
5xx	表示服務器端出現錯誤

常用的狀態碼：

狀態碼	描述
200	表明該請求被成功地完成，所請求的資源發送回客戶端
403	Forbidden 禁止訪問
404	Not Found 資源不存在

onreadystatechange

onreadystatechange 屬性定義當 readyState 發生變化時執行的函式，

看下面示例，

xhr.onreadystatechange = () => {
    // 判斷
    if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
            // 處理結果
            document.querySelector('div').innerHTML = xhr.response;
        }
    }
}

如上代碼表示：當可以成功訪問且有回應時，將回應資訊寫入到 div 中，

responseType

XMLHttpRequest 屬性 responseType 是一個列舉字串值，用于指定回應中包含的資料型別，它還允許作者更改回應型別，如果將 responseType 的值設定為空字串，則會使用 text 作為默認值，

值	描述
`""`	與默認型別 “text” 相同
`"arraybuffer"`	response 是一個包含二進制資料的 JavaScript ArrayBuffer
`"blob"`	response 是一個包含二進制資料的 Blob 物件
`"document"`	response 是一個 HTML Document 或 XML XMLDocument，根據接收到的資料的 MIME 型別而定，
`"text"`	response 是 DOMString 物件中的文本
`"json"`	response 是通過將接收到的資料內容決議為 JSON 而創建的 JavaScript 物件

如下示例，設定回應體資料型別為 json

xhr.responseType = 'json';

xhr.onreadystatechange = () => {
	if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
            // {name: "zhangsan"}
            result.innerHTML = xhr.response.name;	// zhangsan
        }
    }
}

當然，你也可以手動對資料進行轉換，只不過顯得有些麻煩，如下

	// {name: "zhangsan"}
	let data = JSON.parse(xhr.response);
	result.innerHTML = data.name;		// zhangsan

7. AJAX 的使用

下圖表示 AJAX 作業流程：
在這里插入圖片描述

下面兩個示例，分別為向服務器發送 GET 和 POST 請求，

向服務器發送 GET 請求

需求：點擊按鈕，向服務端發送 GET 請求；回應結果在 div 呈現
請添加圖片描述

前端頁面 index.html

<button>點擊發送請求</button>
<div id="result"></div>

<script>
    // 系結事件
    const btn = document.querySelector('button');
    const result = document.querySelector('#result');

    btn.addEventListener('click', () => {
        // 1. 創建物件
        const xhr = new XMLHttpRequest();
        // 2. 初始化：設定請求方法 和 url
        xhr.open('GET', 'http://127.0.0.1:8000/server');
        // 3. 發送
        xhr.send();
        // 4. 事件系結：處理服務端回傳結果
        xhr.onreadystatechange = () => {
            // readystate 是 xhr 物件的屬性： 表示狀態 0 1 2 3 4    
            if (xhr.readyState === 4) {
                // 判斷回應狀態碼 200 401 403 404 500 
                // 2xx 表示 成功
                if (xhr.status >= 200 && xhr.status < 300) {
                    // 處理結果：行 頭 空行 體
                    result.innerHTML = xhr.response;
                } else {

                }
            }
        }
    })
</script>

服務器端 sever.js

const express = require('express');

// 創建應用物件
const app = express();

// 創建路由規則
app.get('/sever', (req, res) => {
    // 設定回應頭：設定允許跨域
    res.setHeader('Access-Control-Allow-Origin', '*');
    // 設定回應
    res.send('Hello AJAX');
})

// 監聽埠啟動服務
app.listen(8000, () => {
    console.log('服務已經啟動, 8000 埠監聽中...');
})

向服務器發送 POST 請求

請添加圖片描述

前端頁面 index.html

<div id="result"></div>
<script>
    const result = document.querySelector('#result');

    result.addEventListener('mouseenter', function () {
        // 1. 創建物件
        const xhr = new XMLHttpRequest();
        // 2. 初始化
        xhr.open('POST', 'http://127.0.0.1:8000/server');
        // 3. 發送
        xhr.send();
        xhr.onreadystatechange = () => {
            // 判斷
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    // 處理結果
                    result.innerHTML = xhr.response;
                }
            }
        }
    })
</script>

服務器端 sever.js

const express = require('express');

// 創建應用物件
const app = express();

// 創建路由規則
app.post('/sever', (req, res) => {
    // 設定回應頭：設定允許跨域
    res.setHeader('Access-Control-Allow-Origin', '*');
    // 設定回應
    res.send('Hello AJAX POST');
})

// 監聽埠啟動服務
app.listen(8000, () => {
    console.log('服務已經啟動, 8000 埠監聽中...');
})

8. 請求超時與網路例外處理

請求超時

我們可以使用一個超時設定來設定一個時間，到時自動取消請求，進而避免代碼為了等候讀取請求的回傳資料長時間執行，

超時毫秒數可以通過為 XMLHttpRequest 物件的 timeout 屬性賦值來指定：

    xhr.timeout = 2000;			// 指定超時時間 2s

同時還可以為 timeout 事件的 ontimeout 事件句柄指定事件處理函式，如下：

    xhr.ontimeout = () => {
        alert('請求超時，稍后重試');		// 超時后觸發
    }

網路例外

XMLHttpRequestEventTarget.onerror 是 XMLHttpRequest 事務由于錯誤而失敗時呼叫的函式，

請注意只有在網路層級出現錯誤時才會呼叫此函式，如果錯誤只出現在應用層（比如發送一個HTTP的錯誤碼），這個方法將不會被呼叫，

    // 網路例外
    xhr.onerror = () => {
        alert('你的網路似乎除了一些問題');		// 網路例外時觸發
    }

注意：可以通過下面操作設定斷網
在這里插入圖片描述

9. AJAX 取消請求

XMLHttpRequest.abort() 方法：如果該請求已被發出，利用此方法將終止該請求，

如下所示：
請添加圖片描述

    const btns = document.querySelectorAll('button');
    let xhr = null;

    btns[0].addEventListener('click', () => {
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://127.0.0.1:8000/delay');
        xhr.send();
        // 不需要回傳什么結果，可以不加事件系結
    })

    // abort
    btns[1].addEventListener('click', () => {
        xhr.abort();
    })

應用：解決請求重復發送問題

如果同意請求被重復發送，會使得服務器壓力比較大，效率變低的問題，

解決方法：創建標識變數，通過標識變數判斷此前的請求是否已經完成，未完成則利用 abort() 取消此次請求，

    const btn = document.querySelector('button');
    let xhr = null;

    // 標識變數：是否正在發送 AJAX 請求
    let isSending = false;

    btn.addEventListener('click', () => {
        // 首先判斷標識變數
        if (isSending) x.abort();
        xhr = new XMLHttpRequest();
        isSending = true;
        xhr.open('GET', 'http://127.0.0.1:8000/delay');
        xhr.send();
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                isSending = false;
            }
        }
    })

二、jQuery 中 AJAX 請求

詳細內容可查閱檔案：jQuery API - AJAX

1. $.ajax()

通過 HTTP 請求加載遠程資料，這是 jQuery 底層 AJAX 實作，簡單易用的高層實作見 $.get，$.post 等，

$.ajax() 回傳其創建的 XMLHttpRequest 物件，

$.ajax(url,[settings])

url：一個用來包含發送請求的 URL 字串，
settings：AJAX 請求設定，所有選項都是可選的，

settings 選項

可選的選項有很多，這里簡單列舉一些常用的作為說明，

data：發送到服務器的資料，將自動轉換為請求字串格式，
dataType：指定服務器回傳的資料型別，如，xml、html、json、script、text
type：請求方式，默認 GET 請求，也可以設定為 POST，注意：其他 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但區域分瀏覽器支持，
timeout：設定請求超時時間，
headers：設定頭資訊，
async：(默認: true) 默認設定下，所有請求均為異步請求，如果需要發送同步請求，請將此選項設定為 false，

除此外，還有幾種回呼函式可作為引數選項

beforeSend(XHR)：發送請求前可修改 XMLHttpRequest 物件的函式，如添加自定義 HTTP 頭，XMLHttpRequest 物件是唯一的引數，
success(data, textStatus, jqXHR)：請求成功后的回呼函式，引數：由服務器回傳，并根據 dataType 引數進行處理后的資料；描述狀態的字串，還有 jqXHR（在jQuery 1.4.x的中，XMLHttpRequest）物件，在jQuery 1.5，成功設定可以接受一個函式陣列，每個函式將被依次呼叫，
error：請求失敗時呼叫此函式，有以下三個引數：XMLHttpRequest 物件、錯誤資訊、（可選）捕獲的例外物件，如果發生了錯誤，錯誤資訊（第二個引數）除了得到null之外，還可能是 "timeout"，"error"，"notmodified" 和 "parsererror"，
complete(XHR, TS)：請求完成后回呼函式 (請求成功或失敗之后均呼叫)，引數： XMLHttpRequest 物件和一個描述成功請求型別的字串，

示例

    $('button').eq(2).click(() => {
        $.ajax({
            // url
            url: 'http://127.0.0.1:8000/jquery-server',
            // 引數
            data: { a: 100, b: 200 },
            // 請求型別
            type: 'GET',
            // 回應體結果
            dataType: 'json',
            // 成功的回呼
            success: (data) => {
                console.log(data);
            },
            // 超時時間
            timeout: 2000,
            // 失敗的回呼
            error: () => {
                console.log('出錯啦.....');
            },
            // 頭資訊
            headers: {
                c: 300,
                d: 400
            }
        });
    })

2. $.get

通過遠程 HTTP GET 請求載入資訊，請求成功時可呼叫回呼函式，如果需要在出錯時執行函式，請使用 $.ajax，

	$.get(url, [data], [callback], [type])

url：請求的 URL 地址，
data：請求攜帶的引數，
callback：載入成功時回呼函式，可以接收回應體引數（data），
type：設定回應體型別，如，xml, html, script, json, text, _default，

示例一

請求 test.php 網頁，忽略回傳值，

	$.get("test.php");

示例二

請求 test.php 網頁，傳送 2 個引數，忽略回傳值，

	$.get("test.php", { name: "John", time: "2pm" } );

示例三

請求 http://127.0.0.1:8000/jquery-server 網頁，傳送 2 個引數，添加回呼，成功時列印以 json 格式列印回呼資訊，

    $('button').eq(0).click(() => {
        $.get('http://127.0.0.1:8000/jquery-server', {
            a: 100,
            b: 200
        }, (data) => {
            console.log(data);
        }, 'json');
    })

3. $.post

和 GET 請求相似，通過遠程 HTTP POST 請求載入資訊，

	$.post(url, [data], [callback], [type])

url：請求的 URL 地址，
data：請求攜帶的引數，
callback：載入成功時回呼函式，
type：設定回傳內容格式，xml, html, script, json, text, _default，

    $('button').eq(1).click(() => {
        $.post('http://127.0.0.1:8000/jquery-server', {
            a: 100,
            b: 200
        }, (data) => {
            console.log(data);
        });
    })

三、axios 發送 AJAX 請求

官方檔案：axios 中文檔案

Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中，簡單的講就是可以發送 GET、POST 請求，

1. axios 特性

從瀏覽器中創建 XMLHttpRequests
從 node.js 創建 http 請求
支持 Promise API
攔截請求和回應
轉換請求資料和回應資料
取消請求
自動轉換 JSON 資料
客戶端支持防御 XSRF

2. axios 安裝

使用 npm

$ npm install axios

使用 bower

$ bower install axios

使用 cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

3. axios 使用

GET 請求

// 配置 baseURL
axios.defaults.baseURL = 'http://127.0.0.1:8000';

btns[0].onclick = function () {
    axios.get('/axios-server', {
        // url 引數
        params: {
            id: 100,
            vip: 7
        },
        // 請求頭資訊
        headers: {
            name: 'zs',
            age: 18
        }
    }).then(value => {
        console.log(value);
    });
}

在這里插入圖片描述
想要處理回傳結果，后面跟 then() 方法處理即可，

POST 請求

axios.post(url[, data[, config]])

示例

    axios.post('/axios-server', {
        // 請求體
        username: 'admin',
        password: 'admin'
    }, {
        // url
        params: {
            id: 200,
            vip: 9
        },
        // 請求頭引數
        headers: {
            height: 180,
            weight: 170
        }
    })

在這里插入圖片描述

通用方式

可以通過向 axios 傳遞相關配置來創建請求，

axios(config)

示例如下

    axios({
        // 請求方法
        method: 'POST',
        // url
        url: '/axios-server',
        // url 引數
        params: {
            vip: 10,
            level: 30
        },
        // 頭資訊
        headers: {
            a: 100,
            b: 200
        },
        // 請求體引數
        data: {
            username: 'admin',
            password: 'admin'
        }
    }).then(response => {
        // 回應狀態碼
        console.log(response.status);
        // 回應狀態字串
        console.log(response.statusText);
        // 回應頭資訊
        console.log(response.headers);
        // 回應體
        console.log(response.data);
    })

在這里插入圖片描述

四、fetch 發送 AJAX 請求

fetch() 方法用于發起獲取資源的請求，它回傳一個 Promise，這個 Promise 會在請求回應后被 resolve，并傳回 Response 物件，

fetch() 方法的引數與 Request() 構造器是一樣的，

   fetch('http://127.0.0.1:8000/fetch-server', {
       // 請求方法
       method: 'POST',
       // 請求頭
       headers: {
           name: 'zs'
       },
       // 請求體
       body: 'username=admin&password=admin'
   }).then(response => {
       return response.text();
   }).then(response => {
       console.log(response);  
   });

參考：

1） W3school - AJAX 教程

2）【尚硅谷】3小時 Ajax 入門到精通

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/357127.html

標籤：其他

上一篇：workflow 的審批流程的業務實作一

下一篇：javascript百煉成仙第一章掌握JavaScript基礎01 初入宗門

AJAX —— 原生 AJAX / jQuery 發送 AJAX / axios 發送 AJAX / fetch 發送 AJAX

文章目錄

一、原生 AJAX

1. AJAX 簡介

2. XML 簡介

3. AJAX 特點

4. XMLHttpRequest 物件

5. 向服務器發送請求

6. 接收服務器回應

7. AJAX 的使用

8. 請求超時與網路例外處理

9. AJAX 取消請求

二、jQuery 中 AJAX 請求

1. $.ajax()

2. $.get

3. $.post

三、axios 發送 AJAX 請求

1. axios 特性

2. axios 安裝

3. axios 使用

四、fetch 發送 AJAX 請求