JavaScript擴展DOM、BOM、AJAX、事件、定時器舉例詳解

更新時間：2025年06月04日 09:58:25 作者：Sy_COOH

在前端開發(fā)中,DOM事件、Ajax和BOM(瀏覽器對象模型)是非常重要的概念和技術,這篇文章主要介紹了JavaScript擴展DOM、BOM、AJAX、事件、定時器的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

BOM 操作

BOM指的是瀏覽器對象模型：Browser Object Mode，通過操作 window 對象的屬性和方法來實現(xiàn)與瀏覽器的交互。

BOM的構成如下圖所示：

其中，window對象是頂級對象，在 window 對象下面有一些重要的屬性：

document：DOM 對象。
location：用于獲取或設置文檔當前 URL 的位置。
navigation：包含瀏覽器配置相關的信息。
history：用于操作瀏覽器的歷史記錄。

screen：用于獲取屏幕設備信息。

用戶操作

警告框：

alert(message)

對話框：

const res = confirm(message)	// 根據(jù)用戶點擊確定或取消結果：true或者false

彈出輸入對話框（defaultValue為默認值占位值，可選）：

prompt(message, defaultValue)	// 返回值為用戶的輸入文本

// 參考實例
const res = prompt('請輸入姓名：', 'Alice')
console.log('用戶的輸入結果：', res)

獲取窗口尺寸

window 對象包含一些存儲窗口尺寸的只讀屬性：

屬性	描述
`innerWidth`	窗口的內部寬度
`innerHeight`	窗口的內部高度
`outerWidth`	整個瀏覽器窗口的寬度
`outerHeight`	整個瀏覽器窗口的高度

參考用例：

console.log('窗口的內部寬度：', innerWidth)	// 1797
console.log('窗口的內部高度：', innerHeight) // 889
console.log('整個瀏覽器窗口的寬度：', outerWidth) // 1797
console.log('整個瀏覽器窗口的高度：', outerHeight) // 976

獲取屏幕尺寸

訪問 window 對象的 screen 屬性會返回一個 Screen 對象，它包含一些屏幕尺寸相關的只讀屬性：

屬性	描述
`screen.width`	屏幕的寬度
`screen.height`	屏幕的高度
`screen.availWidth`	屏幕上可用的寬度
`screen.availHeight`	屏幕上可用的高度（不包括任務欄）

參考實例：

console.log('屏幕的寬度：', screen.width)	// 1797
console.log('屏幕的高度：', screen.height) // 1011
console.log('屏幕上可用的寬度：', screen.availWidth) // 1797
console.log('屏幕上可用的高度：', screen.availHeight) // 976

Location 對象

訪問 window 對象的 location 屬性會返回一個 Location 對象，它包含有關文檔當前 URL 位置的信息。

屬性	描述
`location.href`	包含整個 URL 的字符串
`location.protocol`	包含 URL 協(xié)議方案的字符串
`location.hostname`	包含 URL 域名的字符串
`location.pathname`	包含開頭的 `/` 后跟 URL 路徑的字符串
`location.search`	包含開頭的 `?` 后跟 URL 的“查詢字符串”
`location.hash`	包含開頭的 `#` 后跟 URL 的片段標識符

參考用例：

console.log('整個 URL：', location.href)
console.log('URL 協(xié)議：', location.protocol)
console.log('URL 域名：', location.hostname)
console.log('URL 路徑：', location.pathname)

此外，Location 對象還包含對 URL 進行操作的方法。

其中，assign() 方法可以使瀏覽器加載并顯示指定 URL 處的頁面：

location.assign(url)

reload() 方法會重新加載當前 URL，就像點擊了刷新按鈕一樣。

location.reload()

History 對象

訪問 window 對象的 history 屬性會返回一個 History 對象，可以通過它操作瀏覽器的歷史記錄。

方法	描述
`location.go()`	移動到歷史記錄中相對于當前頁面的位置，例如 `-1` 表示上一頁，`1` 表示下一頁。參數(shù)為 `0` 則會重新加載當前頁面。
`location.back()`	轉到歷史記錄中的上一頁，相當于點擊瀏覽器的“后退”按鈕
`location.forward()`	轉到歷史記錄中的下一頁，相當于點擊瀏覽器的“前進”按鈕
`location.pushState()`	向瀏覽器的歷史記錄中添加一個條目
`location.replaceState()`	修改當前歷史記錄條目

DOM 操作

DOM 的英文全稱為 Document Object Model（文檔對象模型），它是瀏覽器為每個窗口內的 HTML 頁面在內存中創(chuàng)建的表示文檔的結構。通過 DOM，我們可以使用 JavaScript 來對頁面中的元素進行操作。

常用的 DOM 屬性

常用的 DOM 屬性如下表所示：

屬性	描述
`document.title`	獲取文檔的標題文本
`document.URL`	獲取文檔的 URL
`document.head`	獲取文檔的 `<head>` 元素
`document.body`	獲取文檔的 `<body>` 元素
`document.forms`	獲取文檔的 `<form>` 元素列表
`document.images`	獲取文檔的 `<img>` 元素列表
`document.links`	獲取文檔的 `<a>` 元素列表
`document.scripts`	獲取文檔的 `<script>` 元素列表

常用的 DOM 方法

我們可以使用下面這些方法從當前文檔中獲取元素節(jié)點：

方法	描述
`document.getElementById()`	通過 `id` 屬性獲取元素
`document.getElementsByClassName()`	通過 `class` 屬性獲取元素列表
`document.getElementsByTagName()`	通過標簽名獲取元素列表
`document.getElementsByName()`	通過 `name` 屬性獲取元素列表
`document.querySelector()`	通過選擇器獲取第一個匹配的元素
`document.querySelectorAll()`	通過選擇器獲取所有匹配的元素列表

除了獲取已有的元素節(jié)點，我們還可以使用下面這些方法創(chuàng)建新節(jié)點：

方法	描述
`document.createElement()`	創(chuàng)建元素節(jié)點
`document.createTextNode()`	創(chuàng)建文本節(jié)點

基本 DOM 操作

常用的元素節(jié)點屬性如下表所示：

屬性	描述
`parentElement`	獲取父級元素
`previousElementSibling`	獲取同級的前一個元素
`nextElementSibling`	獲取同級的后一個元素
`children`	獲取子級元素列表
`firstElementChild`	獲取第一個子級元素
`lastElementChild`	獲取最后一個子級元素

常用的元素節(jié)點方法如下表所示：

方法	描述
`cloneNode()`	返回當前節(jié)點的副本（如果傳入一個參數(shù) `true` 則連同后代節(jié)點一起復制）
`remove()`	刪除當前節(jié)點本身
`removeChild(node)`	從當前節(jié)點的子級列表中刪除子級節(jié)點 `node`
`replaceWith(node1, node2, ...)`	將當前節(jié)點替換為一組其它節(jié)點或文本
`prepend(node1, node2, ...)`	在當前節(jié)點的子級列表開頭添加一組新的子級節(jié)點或文本
`append(node1, node2, ...)`	在當前節(jié)點的子級列表末尾添加一組新的子級節(jié)點或文本
`before(node1, node2, ...)`	在當前節(jié)點的前面添加一組新的同級節(jié)點或文本
`after(node1, node2, ...)`	在當前節(jié)點的后面添加一組新的同級節(jié)點或文本
`insertBefore(node, reference)`	在子級節(jié)點 `reference` 的前面插入一個新節(jié)點 `node`

元素節(jié)點的方法參考以下示例：

在這個示例中：

使用 remove() 方法刪除了 id="js" 的 <li> 元素。
創(chuàng)建了一個新的 <li> 元素，并插入到 id="css" 的 <li> 元素的前面。
在 <h2> 元素的前面添加了一行文本。
將 <h2> 元素復制，并添加到 <body> 元素內部的末尾位置。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文檔</title>
  </head>
  <body>
    <h2>Web 開發(fā)三劍客</h2>
    <ul>
      <li id="html">HTML</li>
      <li id="css">CSS</li>
      <li id="js">JavaScript</li>
    </ul>
    <script>
      // 刪除元素節(jié)點
      const js = document.getElementById('js')
      js.remove()

      // 創(chuàng)建元素節(jié)點
      const es = document.createElement('LI')
      es.prepend('ES6')

      // 插入新節(jié)點
      const ul = document.getElementsByTagName('ul')[0]
      const css = document.getElementById('css')
      ul.insertBefore(es, css)

      // 在節(jié)點的前面添加文本
      const h2 = document.getElementsByTagName('h2')[0]
      h2.before('Vue 是一套用于構建用戶界面的漸進式框架。')

      // 復制節(jié)點并在 body 中添加
      const clone = h2.cloneNode(true)
      document.body.append(clone)
    </script>
  </body>
</html>

預覽效果：

定時器

js中定時器有一次性定時器和重復執(zhí)行定時器。

一次性定時器

全局 setTimeout() 函數(shù)設置一個定時器，一旦倒計時完成，就會執(zhí)行一段指定的代碼。

需要注意，定時器函數(shù)一般為異步函數(shù)。

設置定時器的方法如下：

// 使用格式：
setTimeout(functionRef, delay, param1, param2, /* …, */ paramN)

// 參考示例：
setTimeout(() => {
  console.log('延遲一秒')
}, 1000)
console.log('其他代碼')

setTimeout() 函數(shù)的返回值是一個正整數(shù)值，它代表了這個定時器的 ID。我們可以將這個值傳遞給 clearTimeout() 函數(shù)以取消定時。

// 參考示例：
const timer1 = setTimeout(() => {
  console.log('延遲一秒')
}, 1000)
const timer2 = setTimeout(() => {
  console.log('延遲兩秒')
}, 2000)
const timer3 = setTimeout(() => {
  console.log('延遲三秒')
}, 3000)
// 取消第二個定時器
clearTimeout(timer2)

重復定時器

全局 setInterval() 函數(shù)設置一個定時器，用于重復執(zhí)行一段指定的代碼，每次執(zhí)行之間有固定的時間間隔。

其使用格式如下：

// 使用方法：
setInterval(functionRef, delay, param1, param2, /* …, */ paramN)

// 參考示例：
setInterval(() => {
  console.log('重復執(zhí)行')
}, 1000)
console.log('其他代碼')

本地存儲

本地存儲是指在客戶端存儲數(shù)據(jù)。HTML5 為我們提供了兩種 API，分別是 localStorage 與 sessionStorage。二者的使用方法類似，都可以用來存儲客戶端臨時信息，并且二者存儲的數(shù)據(jù)格式均為 key/value 對的形式。

localStorage API

localStorage 對象是 HTML 5 新增的特性，主要用于本地存儲。

在網(wǎng)絡發(fā)展的早期，當沒有其他選擇時，cookie 被用于一般客戶端數(shù)據(jù)存儲目的。而在現(xiàn)在，更加推薦使用 localStorage 等現(xiàn)代存儲 API。

localstorage 與 cookie 主要有以下區(qū)別：

localStorage 解決了早期使用 cookie 存儲遇到的存儲空間不足的問題( 每條 cookie 的存儲空間為 4k )
localStorage 一般瀏覽器支持的是 5M 大小，具體存儲大小根據(jù)瀏覽器的不同會有所不同。
相較于 cookie 而言，localStorage 中的信息不會被傳輸?shù)椒掌鳌?/li>

localStorage 對象提供的方法如下：

方法	說明
`setItem(key, value)`	保存數(shù)據(jù)到本地存儲
`getItem(key)`	根據(jù)指定 `key` 從本地存儲中獲取數(shù)據(jù)
`removeItem(key)`	根據(jù)指定 `key` 從本地存儲中移除數(shù)據(jù)
`clear()`	清除所有保存數(shù)據(jù)

存儲數(shù)據(jù)

localStorage.setItem(key, value)	// 方法一
localStorage.key = value	// 方法二，和方法一效果一樣

讀取數(shù)據(jù)

localStorage.getItem(key)	// 方法一
localStorage.key	// 方法二，等效于前者

刪除數(shù)據(jù)

// 根據(jù)指定名稱從本地存儲中移除
localStorage.removeItem(key)

上面的key一般是一個字符串。

清空數(shù)據(jù)

// 清除本地存儲中所有數(shù)據(jù)
localStorage.clear()

sessionStorage API

localStorage 和 sessionStorage 對象作為 HTML5 新增的特性，都可以用來存儲客戶端臨時信息，并且二者存儲的數(shù)據(jù)格式均為 key/value 鍵值對數(shù)據(jù)。

sessionStorage 對象提供的方法與 localStorage 對象相同，具體如下：

方法	說明
`setItem(key, value)`	保存數(shù)據(jù)到本地存儲
`getItem(key)`	根據(jù)指定 `key` 從本地存儲中獲取數(shù)據(jù)
`removeItem(key)`	根據(jù)指定 `key` 從本地存儲中移除數(shù)據(jù)
`clear()`	清除所有保存數(shù)據(jù)

那么localStorage 和 sessionStorage 二者有什么區(qū)別呢？

它們的區(qū)別在于：

localStorage 的生命周期是永久的，除非用戶清除 localStorage 信息，否則這些信息將永遠存在。
sessionStorage 的生命周期是臨時的，一旦當前窗口或標簽頁被關閉了，那么通過它存儲的數(shù)據(jù)也就被清空了。

由于具體的調用方法和localStorage完全一致，使用方法這里省略。

事件處理

事件是指用戶進行了某些操作時觸發(fā)的“信號”，例如點擊鼠標、按下鍵盤、輸入文字等。我們可以綁定相應的事件處理函數(shù)來進行處理。

DOM 0 級事件與 DOM 2 級事件
鼠標事件
鍵盤事件
表單事件
事件對象

DOM 0 級事件

DOM 0 級事件是直接使用 HTML 屬性或 DOM 對象屬性來指定相應的事件處理函數(shù)。例如，click 是當鼠標點擊時會觸發(fā)的事件。我們可以在 HTML 標簽里直接寫 onclick 屬性或者在 JavaScript 中使用 onclick = function(){}。

直接將節(jié)點的onclick綁定為一個函數(shù)，點擊事件就只能執(zhí)行一個函數(shù)。但如果添加事件監(jiān)聽，就能同時執(zhí)行多個事件所綁定的函數(shù)。

// 直接綁定
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文檔</title>
  </head>
  <body>
    <input id="btn" type="button" value="按鈕" onclick="alert('歡迎來到藍橋云課')" />
    <script>
      const el = document.getElementById('btn')
      el.onclick = function () {
        alert('你好！藍橋')
      }
      el.onclick = function () {
        alert('嗨！藍橋')
      }	// 再次綁定就會被覆蓋
    </script>
  </body>
</html>

DOM 2 級事件

DOM 2 級事件可以綁定多個事件處理函數(shù)。所有的 DOM 節(jié)點都有兩個方法，分別是 addEvenetListener() 和 removeEventListener()。

語法格式：

target.addEvenetListener(type, listener) // 添加事件
target.removeEventListener(type, listener) // 移出事件

listener是一個函數(shù)，如果要移除他需要保證removeEventListener 中傳入的是同一個函數(shù)名。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文檔</title>
  </head>
  <body>
    <input id="btn" type="button" value="按鈕" />
    <script>
      const btn = document.getElementById('btn')
      btn.addEventListener('click', handler)
      function handler() {
        alert('已點擊')
        btn.removeEventListener('click', handler)
      }
    </script>
  </body>
</html>

執(zhí)行后的效果如下：

鼠標事件

常用的鼠標事件如下表所示：

事件	說明
`click`	鼠標點擊事件
`mousedown`	鼠標按下事件
`mouseup`	鼠標松開事件
`mouseover`	鼠標移入事件
`mouseout`	鼠標移出事件
`mousemove`	鼠標移動事件

click 事件

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文檔</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: #b8b5ff;
      }
    </style>
  </head>
  <body>
    <div id="item"></div>
    <script>
      const el = document.getElementById('item')
      // 鼠標點擊
      el.addEventListener('click', function () {
        el.style.background = '#ffefa1'
      })
    </script>
  </body>
</html>

mousedown、mouseup 事件

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文檔</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: #b8b5ff;
      }
    </style>
  </head>
  <body>
    <div id="item"></div>
    <script>
      const el = document.getElementById('item')
      // 鼠標按下
      el.addEventListener('mousedown', function () {
        el.style.background = '#ffefa1'
      })
      // 鼠標松開
      el.addEventListener('mouseup', function () {
        el.style.background = '#b8b5ff'
      })
    </script>
  </body>
</html>

mouseover、mouseout 事件

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文檔</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: #b8b5ff;
      }
    </style>
  </head>
  <body>
    <div id="item"></div>
    <script>
      const el = document.getElementById('item')
      // 鼠標移入
      el.addEventListener('mouseover', function () {
        el.style.background = '#ffefa1'
      })
      // 鼠標移出
      el.addEventListener('mouseout', function () {
        el.style.background = '#b8b5ff'
      })
    </script>
  </body>
</html>

鍵盤事件

常用的鍵盤事件有以下兩個：

事件	說明
`keydown`	鍵盤按下會觸發(fā)的事件
`keyup`	鍵盤松開會觸發(fā)的事件

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文檔</title>
  </head>
  <body>
    <input type="text" value="請輸入內容" id="phone" />
    <script>
      const el = document.getElementById('phone')
      // 鍵盤按下
      el.addEventListener('keydown', function () {
        el.style.color = '#00adb5'
      })
      // 鍵盤松開
      el.addEventListener('keyup', function () {
        el.style.color = '#000000'
      })
    </script>
  </body>
</html>

表單事件

在 JavaScript 中，常用表單事件如下表所示：

事件	說明
`focus`	表單元素聚焦時觸發(fā)的事件
`blur`	表單元素失焦時觸發(fā)的事件

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文檔</title>
  </head>
  <body>
    姓名：<input type="text" id="username" value="輸入你的名字" />
    <script>
      const el = document.getElementById('username')
      // 當聚焦到該輸入框時，把輸入框的內容置為空，并設置字體顏色為藍色
      el.addEventListener('focus', function () {
        if (el.value == '輸入你的名字') {
          el.value = ''
        }
        el.style.color = '#77acf1'
      })
      // 當失去焦點時，顯示輸入框的默認內容
      el.addEventListener('blur', function () {
        if (el.value == '') {
          el.value = '輸入你的名字'
        }
        el.style.color = '#000000'
      })
    </script>
  </body>
</html>

事件對象

事件函數(shù)默認能接受到一個可選參數(shù)：事件對象，通過事件對象可以得到更多關于該類型事件的信息。例如鼠標事件可以拿到鼠標的位置坐標，鍵盤事件能拿到對應按下的鍵。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文檔</title>
  </head>
  <body>
    <input id="btn" type="button" value="按鈕" />
    <script>
      const el = document.getElementById('btn')
      el.addEventListener('click', function (ev) {
        console.log(`這是一個 ${ev.type} 事件`) // 在控制臺打印事件類型
      })
    </script>
  </body>
</html>

鼠標事件對象

鼠標事件處理函數(shù)接收到的鼠標事件對象還包含一些其它屬性：

屬性	說明
`button`	觸發(fā)鼠標事件時按下的按鈕
`clientX`	鼠標指針在窗口可視區(qū)域中的 X 坐標
`clientY`	鼠標指針在窗口可視區(qū)域中的 Y 坐標
`pageX`	鼠標指針相對于整個頁面的 X 坐標（考慮滾動條）
`pageY`	鼠標指針相對于整個頁面的 Y 坐標（考慮滾動條）
`movementX`	鼠標指針相對于上次 `mousemove` 事件位置的 X 坐標
`movementY`	鼠標指針相對于上次 `mousemove` 事件位置的 Y 坐標

參考以下示例：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文檔</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: #b8b5ff;
      }
    </style>
  </head>
  <body>
    <div id="item"></div>
    <script>
      const el = document.getElementById('item')
      el.addEventListener('click', function (ev) {
        console.log('頁面中鼠標指針的 X 坐標：', ev.pageX)
        console.log('頁面中鼠標指針的 Y 坐標：', ev.pageY)
      })
    </script>
  </body>
</html>

鍵盤事件對象

鍵盤事件處理函數(shù)接收到的鍵盤事件對象包含一些按鍵信息相關的屬性：

屬性	說明
`code`	鍵盤上的按鍵的代碼值
`key`	按鍵產生的字符（考慮大小寫）
`shiftKey`	是否按下 Shift 鍵
`ctrlkey`	是否按下 Ctrl 鍵
`altkey`	是否按下 Alt 鍵

參考以下示例：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文檔</title>
  </head>
  <body>
    <input type="text" id="item" />
    <p id="msg"></p>
    <script>
      const el = document.getElementById('item')
      el.addEventListener('keydown', function (ev) {
        // 判斷是否按下 Ctrl 鍵
        if (ev.ctrlKey) {
          msg.innerHTML = '請不要按下 Ctrl 鍵'
          msg.style.color = 'red'
        } else {
          // 當沒有按下 Ctrl 鍵時，輸出按鍵產生的字符
          msg.innerHTML = '按鍵產生的字符：' + ev.key
          msg.style.color = 'black'
        }
      })
    </script>
  </body>
</html>

AJAX

AJAX 的英文全稱為 Asynchronous JavaScript And XML，其中 Asynchronous 是異步的意思。

何為異步呢？它是指通過 AJAX 向服務器請求數(shù)據(jù)，在不刷新整個頁面的情況下，更新頁面上的部分內容。

其工作原理圖如下所示：

使用AJAX請求的功能如果餐廳中的服務員，能在不阻塞主要流程的情況下，讓服務員幫你去做某件事情。如果這件事情你自己去做的話，就會阻塞你的事件進程了。

常用的三種AJAX:

XMLHttpRequest API
Fetch API
Axios

XMLHttpRequest API

為了通過 AJAX 異步請求數(shù)據(jù)，一種傳統(tǒng)的方法是使用 XMLHttpRequest API。

創(chuàng)建 AJAX 的基本步驟如下：

創(chuàng)建 XMLHttpRequest 對象

const httpRequest = new XMLHttpRequest()

向服務器發(fā)送請求

// 規(guī)定發(fā)送請求的一些要求
httpRequest.open(method, url, async)
// 將請求發(fā)送到服務器
httpRequest.send()

open() 方法中的參數(shù)說明如下：

method：請求的類型，常見的有 GET 和 POST。
url：請求的 URL 地址。
async（可選）：設置同步或者異步請求，其值為布爾類型，默認為 true。當為 true 時，使用異步請求；當為 false 時，使用同步請求。

獲取服務器響應狀態(tài)我們使用 HTTP 請求數(shù)據(jù)后，會反饋給我們相應的請求狀態(tài)。我們使用 onreadystatechange 去檢查響應的狀態(tài)，當 httpRequest.readyState 為 4 并且 httpRequest.status 等于 200 時，說明數(shù)據(jù)請求成功。

其使用如下：

// 檢查響應的狀態(tài)
httpRequest.onreadystatechange = function () {
  if (httpRequest.readyState === 4) {
    if (httpRequest.status == 200) {
      // 請求成功執(zhí)行的代碼
    } else {
      // 請求失敗執(zhí)行的代碼
    }
  }
}

新建一個 index.html 文件，在 <script> 標簽內寫入以下內容：

const xhr = new XMLHttpRequest()
// 規(guī)定發(fā)送請求的一些要求
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users', true)
// 將請求發(fā)送到服務器
xhr.send()
// 檢查響應的狀態(tài)
xhr.onreadystatechange = function () {
  console.log(xhr.readyState)
  console.log(xhr.status)
  if (xhr.readyState === 4) {
    if (xhr.status == 200) {
      // 請求成功執(zhí)行的代碼
      console.log('請求成功')
      console.log(JSON.parse(xhr.responseText))
    } else {
      // 請求失敗執(zhí)行的代碼
      console.log('請求失敗')
    }
  }
}

輸出結果如下：

在控制臺中輸出的 200 是 HTTP 的響應狀態(tài)碼，該狀態(tài)碼還有其他取值，可以閱讀 HTTP response status codes 了解更多。

而穿插在 200 之后的數(shù)字 2、3、4 是 readyState 屬性的值，它的取值有以下幾種：

0 代表未初始化請求。
1 代表已與服務器建立連接。
2 代表請求被接受。
3 代表請求中。
4 代表請求完成。

Fetch API

Fetch API 提供了用于通過網(wǎng)絡獲取資源的接口，它是 XMLHttpRequest API 的更強大、更靈活的替代品。其使用方式如下：

const response = await fetch(url)

其中，fetch() 是一個全局函數(shù)，它接收要請求的 URL 作為參數(shù)，并返回一個 Promise 對象。

該異步操作的結果是一個 Response 對象，我們可以使用 await 關鍵字獲取。它提供了多種方法來解析不同格式的正文內容：

arrayBuffer()：二進制數(shù)據(jù)。
blob()：二進制數(shù)據(jù)。
formData()：HTML 表單數(shù)據(jù)。
json()：JSON 格式數(shù)據(jù)。
text()：純文本數(shù)據(jù)。

下面是一個基本的使用示例：

async function getData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users')
  if (!response.ok) {
    // 請求失敗執(zhí)行的代碼
    console.log('請求失敗')
  } else {
    // 請求成功執(zhí)行的代碼
    console.log('請求成功')
    const json = await response.json()
    console.log(json)
  }
}
getData()

默認情況下，fetch() 發(fā)出 GET 請求，但我們可以使用 method 選項來使用不同的請求方式：

async function getData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify({ title: 'foo', body: 'bar', userId: 1 }),
    headers: { 'Content-type': 'application/json; charset=UTF-8' },
  })

  if (!response.ok) {
    // 請求失敗執(zhí)行的代碼
    console.log('請求失敗')
  } else {
    // 請求成功執(zhí)行的代碼
    console.log('請求成功')
    const json = await response.json()
    console.log(json)
  }
}
getData()

在上面的代碼中：

method 選項用于設置請求方式。
body 選項用于設置發(fā)送到服務器的內容。
headers 選項用于設置 HTTP 請求頭。

Axios

一個非常主流的AJAX的封裝插件—— Axios。

Axios 是一個基于 Promise 語法的、用于瀏覽器和 Node.js 的 HTTP 庫。簡單的理解就是對 AJAX 的封裝，且具有易用、簡潔、高效等特點。

它本身具備以下功能：

可以從瀏覽器中創(chuàng)建 XMLHttpRequest。
能從 Node.js 創(chuàng)建 HTTP 請求。
支持 Promise API。
能夠攔截請求和響應。
可以轉換請求和響應數(shù)據(jù)。
可以取消請求。
可以自動轉換 JSON 數(shù)據(jù)。
在客戶端支持防止 CSRF/XSRF 攻擊。

為了使用 Axios，我們需要使用 <script> 標簽進行引入：

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

新建一個 test.json 文件，并寫入以下數(shù)據(jù)，作為接下來使用 Axios 請求的數(shù)據(jù)文件：

{
  "msg": "Hello Axios!"
}

新建一個 index.html 文件，寫入以下內容：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文檔</title>
    <!-- 引入 Axios 的 CDN -->
    <script src="https://unpkg.com/axios@1.7.7/dist/axios.min.js"></script>
  </head>
  <body>
    <script>
      axios.get('./test.json').then((res) => {
        console.log(res)
      })
    </script>
  </body>
</html>

在上面代碼中，我們使用 Axios 發(fā)送一個簡單的 AJAX 請求，用于獲取 test.json 中的數(shù)據(jù)，并輸出在控制臺。

可以看到，通過 Axios 獲取到的數(shù)據(jù)實際上是一個對象，真正需要的數(shù)據(jù)是該對象的 data 屬性值。

上面這個例子只是 Axios 眾多使用方式中的一種，它主要是用于執(zhí)行 GET 請求。

下面我們看幾個它比較常用的使用方式：

執(zhí)行 GET 數(shù)據(jù)請求：

axios
  .get('url', {
    params: {
      id: '接口配置參數(shù)（相當于url?id=xxxx）',
    },
  })
  .then(function (res) {
    console.log(res) // 處理成功的函數(shù) 相當于 success
  })
  .catch(function (error) {
    console.log(error) // 錯誤處理 相當于 error
  })

執(zhí)行 POST 數(shù)據(jù)請求并發(fā)送數(shù)據(jù)給后端：

axios
  .post(
    'url',
    { data: {} },
    {
      headers: 'xxxx', // 頭部配置
    }
  )
  .then(function (res) {
    console.log(res) // 處理成功的函數(shù) 相當于 success
  })
  .catch(function (error) {
    console.log(error) // 錯誤處理 相當于 error
  })

通用方式（適用于任何請求方式）：

//-------- GET --------//
axios({
  method: 'get',
  url: 'xxx',
  cache: false,
  params: {
    id: 123,
  },
  headers: 'xxx',
})
//-------- POST --------//
axios({
  method: 'post',
  url: 'xxx',
  data: {
    firstName: 'Tom',
    lastName: 'Sun',
  },
})

其中需要注意的是，GET 和 POST 請求中向后端傳遞參數(shù)的配置項名字不同：GET 請求需要使用 params，POST 請求需要使用 data 發(fā)送數(shù)據(jù)。

作為一個獨立的強大的 HTTP 庫，Axios 的功能遠不止這些，可以通過 Axios 的官網(wǎng)學習。

總結

到此這篇關于JavaScript擴展DOM、BOM、AJAX、事件、定時器的文章就介紹到這了,更多相關js擴展DOM、BOM、AJAX、事件、定時器內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

js操作IE瀏覽器彈出瀏覽文件夾可以返回目錄路徑
這篇文章主要介紹了js操作IE瀏覽器彈出瀏覽文件夾并可以返回目錄路徑,需要的朋友可以參考下
2014-07-07
TypeScript環(huán)境搭建的實現(xiàn)步驟
本文主要介紹了TypeScript環(huán)境搭建的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-01-01
babel7按需加載polyfill示例詳解
這篇文章主要為大家介紹了babel7按需加載polyfill示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-02-02
淺談Javascript事件處理程序的幾種方式
事件就是用戶或瀏覽器自身執(zhí)行的某種動作。比如說click,mouseover，都是事件的名字。而相應某個事件的函數(shù)就叫事件處理程序（或事件偵聽器）。為事件指定處理程序的方式有好幾種
2012-06-06
關于JS數(shù)據(jù)類型檢測的多種方式總結
Javascript中檢查數(shù)據(jù)類型一直是老生常談的問題,類型判斷在web開發(fā)中也有著非常廣泛的應用,所以下面這篇文章主要給大家介紹了關于JS數(shù)據(jù)類型檢測的那些事,需要的朋友可以參考下
2021-09-09
JavaScript中???、??=、?.和?||的區(qū)別淺析
在?JS?中,???運算符被稱為非空運算符,下面這篇文章主要給大家介紹了關于JavaScript中???、??=、?.和?||區(qū)別的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-08-08
element?UI中在?el-select?與?el-tree?結合組件實現(xiàn)過程
項目上實現(xiàn)某個功能，使用到了?el-select?和?el-tree?組合實現(xiàn)，記錄下兩者結合的實現(xiàn)過程，對?el-select?與?el-tree?結合組件實現(xiàn)過程感興趣的朋友跟隨小編一起看看吧
2023-02-02
JavaScript在IE中“意外地調用了方法或屬性訪問”
FF是正常的，IE報“意外地調用了方法或屬性訪問”。
2008-11-11
Javascript中字符串和數(shù)字的操作方法整理
字符串和數(shù)字的操作在js中非常頻繁，也非常重要。以往看完書之后都能記得非常清楚，但稍微隔一段時間不用，便會忘得差不多，記性不好是硬傷啊。下面這篇文章就對字符串和數(shù)字的一些常用操作做個整理，一者加深印象，二者方便今后溫習查閱。需要的朋友們可以參考借鑒。
2017-01-01
使用控制臺破解百小度一個月只準改一次名字
這篇文章主要介紹了使用控制臺破解百小度一個月只準改一次名字的方法和代碼，有需要的小伙伴可以參考下。
2015-08-08

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript擴展DOM、BOM、AJAX、事件、定時器舉例詳解

目錄