一、什么是 AJAX？

AJAX（Asynchronous JavaScript and XML）
中文：異步 JavaScript 和 XML

本質(zhì)

在不刷新頁面的情況下，與服務(wù)器進(jìn)行數(shù)據(jù)交互

作用

• 局部更新頁面（提升用戶體驗(yàn)）
• 提高性能（減少整頁刷新）
• 實(shí)現(xiàn)前后端分離

二、AJAX 的核心特點(diǎn)

三、AJAX 工作原理

流程：

1. 用戶觸發(fā)事件（點(diǎn)擊按鈕等）
2. JavaScript 創(chuàng)建請求
3. 發(fā)送 HTTP 請求到服務(wù)器
4. 服務(wù)器返回?cái)?shù)據(jù)
5. JS 接收數(shù)據(jù)并更新頁面

簡化理解：

瀏覽器(JS)  ←→  服務(wù)器(API)

四、AJAX 實(shí)現(xiàn)方式（重點(diǎn)）

原生 XMLHttpRequest（了解）

var xhr = new XMLHttpRequest();
xhr.open("GET", "/api/user", true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

readyState 狀態(tài)

Fetch（主流 ）

fetch("/api/user")
  .then(res => res.json())
  .then(data => {
      console.log(data);
  })
  .catch(err => {
      console.error(err);
  });

優(yōu)點(diǎn)

• 語法簡潔
• 基于 Promise
• 更現(xiàn)代

async / await（推薦 ）

async function getUser() {
    try {
        const res = await fetch("/api/user");
        const data = await res.json();
        console.log(data);
    } catch (err) {
        console.error(err);
    }
}

最接近同步寫法，面試加分項(xiàng)

五、常見請求方式（HTTP）

六、發(fā)送 POST 請求示例

fetch("/api/login", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        username: "admin",
        password: "123456"
    })
})
.then(res => res.json())
.then(data => console.log(data));

七、AJAX 常見數(shù)據(jù)格式

JSON（最重要）

{
  "username": "admin",
  "age": 20
}

JS 轉(zhuǎn)換：

JSON.parse()   // 字符串 → 對象
JSON.stringify() // 對象 → 字符串

八、AJAX 優(yōu)缺點(diǎn)

優(yōu)點(diǎn)

• 用戶體驗(yàn)好（不卡頓）
• 減少服務(wù)器壓力
• 支持動態(tài)頁面

缺點(diǎn)

• SEO 不友好
• 依賴 JS
• 存在跨域問題

九、跨域問題（重點(diǎn) ）

什么是跨域

瀏覽器限制不同源之間的請求

不同源指：

• 協(xié)議不同（http / https）
• 域名不同
• 端口不同

解決方案

CORS（最常用 ）

服務(wù)器返回：

Access-Control-Allow-Origin: *

JSONP（已過時(shí)）

只支持 GET

代理服務(wù)器（開發(fā)常用）

十、AJAX 在項(xiàng)目中的應(yīng)用

結(jié)合你現(xiàn)在做的用戶管理系統(tǒng)，AJAX可以用在：

示例

1. 登錄

fetch("/api/login", { method: "POST" })

2. 獲取用戶列表

fetch("/api/users")

3. 刪除用戶

fetch("/api/user/1", {
    method: "DELETE"
})

4. 修改用戶信息

fetch("/api/user/1", {
    method: "PUT"
})

十一、AJAX 面試常問問題

AJAX 和 Fetch 區(qū)別

• AJAX 是概念
• Fetch 是實(shí)現(xiàn)方式

AJAX 是同步還是異步？

默認(rèn)異步（可以同步但不推薦）

為什么推薦 async/await？

• 可讀性強(qiáng)
• 避免回調(diào)地獄

AJAX 和 axios 區(qū)別？

• axios 是庫（封裝更強(qiáng)）
• fetch 是原生 API

十二、總結(jié)（核心記憶）

一句話理解：

AJAX = 用 JS 在后臺偷偷請求數(shù)據(jù)，不刷新頁面更新內(nèi)容

到此這篇關(guān)于AJAX 請求理解的文章就介紹到這了,更多相關(guān)ajax 請求內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論