Ajax中GET與POST請(qǐng)求操作方法梳理介紹

更新時(shí)間：2022年11月07日 15:01:59 作者：亦世凡華、

Ajax全稱是Asynchronous Javascript And XML（異步JavaScript和XML），在網(wǎng)頁(yè)中，利用XMLHttpRequest對(duì)象和服務(wù)器進(jìn)行數(shù)據(jù)交互的方式，這篇文章主要介紹了Ajax中GET與POST請(qǐng)求操作

Ajax簡(jiǎn)介

Ajax全稱 Asynchronous JavaScript And XML，意思就是異步的JS 和 XML，通過(guò)Ajax可以在瀏覽器中向服務(wù)器發(fā)送異步請(qǐng)求。

作用：獲取服務(wù)器數(shù)據(jù)。

效果：在不刷新整個(gè)頁(yè)面的情況下，通過(guò)一個(gè)url地址獲取服務(wù)器的數(shù)據(jù)，然后進(jìn)行頁(yè)面的局部刷新。

Ajax不是新的編程語(yǔ)言，而是一種將現(xiàn)有的標(biāo)準(zhǔn)組合在一起使用的新方式。

思想：用戶看，我就加載，用戶不看，我就不加載。

應(yīng)用場(chǎng)景：評(píng)論加載更多、用戶名登錄驗(yàn)證、搜索框搜索數(shù)據(jù)提示......

Ajax特點(diǎn)

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

1）可以無(wú)需刷新頁(yè)面而與服務(wù)器端進(jìn)行通信

2）允許根據(jù)用戶事件來(lái)更新部分頁(yè)面內(nèi)容

Ajax缺點(diǎn)：

1）沒(méi)有瀏覽歷史，不能回退

2）存在跨域問(wèn)題(同源)

3）SEO（搜索引擎優(yōu)化）不友好

Ajax GET請(qǐng)求的基本操作

Ajax簡(jiǎn)單來(lái)說(shuō)，就是一個(gè)異步的 JavaScript 請(qǐng)求，用來(lái)獲取后臺(tái)服務(wù)端的數(shù)據(jù)，而并不是整個(gè)頁(yè)面的跳轉(zhuǎn)。在元素 JS 中來(lái)實(shí)現(xiàn) Ajax 主要的類就是 XMLHttpRequest，其基本操作過(guò)程如下：

因?yàn)槲覀傾jax需要給服務(wù)端發(fā)送請(qǐng)求，所以下面的案例需要借助express框架，當(dāng)然我們也需要下載node環(huán)境，因?yàn)槲覀円残枰猲ode語(yǔ)法，nodeJs的話后期會(huì)開設(shè)專欄講解，案例涉及的語(yǔ)法大家權(quán)當(dāng)是提前了解了。當(dāng)然會(huì)的人可以忽略。

我們使用框架肯定要初始化包的，命令如下：(警告：我們進(jìn)行安裝包的過(guò)程，強(qiáng)烈要求路徑是英文，中文路徑會(huì)出現(xiàn)各種各樣的問(wèn)題)

npm init --yes

下面開始安裝express框架，命令如下：

npm i express

安裝完成之后，我們啟用express框架，監(jiān)聽端口啟動(dòng)服務(wù)。可以訪問(wèn)自己設(shè)置的端口號(hào)以及文件路徑，即 127.0.0.1:8000/index 來(lái)判斷服務(wù)是否啟動(dòng)成功。

//在自己的js文件中編寫
// 1.引入express
const { response } = require('express')
const express = require('express')
// 2.創(chuàng)建應(yīng)用對(duì)象
const app = express()
// 3.創(chuàng)建路由規(guī)則
// request是對(duì)請(qǐng)求報(bào)文的封裝
// response是對(duì)響應(yīng)報(bào)文的封裝
app.get('/index',(request,response)=>{
    // 設(shè)置響應(yīng)頭
    response.setHeader('Access-Control-Allow-Origin','*')
    // 設(shè)置響應(yīng)體
    response.send('hello Ajax')
})
// 4.監(jiān)聽端口啟動(dòng)服務(wù)
app.listen(8000,()=>{
    console.log('服務(wù)已經(jīng)啟動(dòng),8080端口監(jiān)聽中....');
})

現(xiàn)在我們進(jìn)行 Ajax 請(qǐng)求操作：通過(guò)Ajax的url請(qǐng)求操作來(lái)獲取響應(yīng)頭內(nèi)容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid #008c8c;
        }
    </style>
</head>
<body>
    <button>點(diǎn)擊發(fā)送請(qǐng)求</button>
    <div id="result"></div>
    <script>
        // 獲取 button 元素
        const btn = document.querySelector('button')
        const result = document.getElementById('result')
        // 綁定事件
        btn.addEventListener('click',function(){
            // 進(jìn)行 Ajax 請(qǐng)求操作的四個(gè)步驟
            // 1.創(chuàng)建對(duì)象 (定義的 xhr 后面單詞的縮寫,當(dāng)然也可以自己定義)
            const xhr = new XMLHttpRequest()
            // 2. 初始化 設(shè)置請(qǐng)求的方法和url
            xhr.open('GET','http://127.0.0.1:8000/index')
            // 3.發(fā)送
            xhr.send()
            // 4.事件綁定 處理服務(wù)端返回的結(jié)果
            /* 
             * 這里對(duì)onreadystatechange這個(gè)方法進(jìn)行一定的講解
             * on 相當(dāng)于 when 表示 當(dāng)....時(shí)候
             * readystate 是xhr對(duì)象中的屬性,其能表示以下五個(gè)狀態(tài):
               0(未初始化) 1(open方法已經(jīng)調(diào)用完畢) 2(send方法已經(jīng)調(diào)用完畢) 3(服務(wù)端返回的部分結(jié)果) 4(服務(wù)端返回的所以結(jié)果) 
             * change 改變
            */
            xhr.onreadystatechange = function(){
                // 判斷 (服務(wù)端返回了所有的結(jié)果)
                if(xhr.readyState === 4){
                    // 判斷響應(yīng)狀態(tài)碼 (當(dāng)時(shí)是選擇成功的狀態(tài)碼) 狀態(tài)碼有:200 401 404 500 當(dāng)然狀態(tài)碼只要是 2xx 即二百多都是表示成功
                    if(xhr.status >= 200 && xhr.status < 300){
                        // 處理結(jié)果 將響應(yīng)體的內(nèi)容打印到我們的div邊框當(dāng)中
                        result.innerHTML = xhr.response
                    }
                }
            }
        })
    </script>
</body>
</html>

當(dāng)我們有需求要為Ajax設(shè)置url參數(shù)時(shí)，我們可以直接在Ajax的初始化步驟上設(shè)置url參數(shù)即可：

Ajax GET請(qǐng)求的緩存問(wèn)題

對(duì)于低版本的IE瀏覽器來(lái)說(shuō)，Ajax的get請(qǐng)求可能會(huì)走緩存，存在緩存問(wèn)題，對(duì)于現(xiàn)代的瀏覽器來(lái)說(shuō)，大部分瀏覽器都已經(jīng)不存在Ajax get緩存問(wèn)題了。

Ajax GET請(qǐng)求緩存問(wèn)題：

1）在HTTP協(xié)議中規(guī)定get請(qǐng)求會(huì)被緩存起來(lái)

2）發(fā)送Ajax GET請(qǐng)求時(shí)，在同一個(gè)瀏覽器上，前后發(fā)送的Ajax請(qǐng)求路徑一樣的話，對(duì)于低版本的IE來(lái)說(shuō)，第二次的Ajax請(qǐng)求會(huì)走緩存，不走服務(wù)器。POST請(qǐng)求在HTTP協(xié)議中規(guī)定是：POST請(qǐng)求不會(huì)被瀏覽器緩存。

GET請(qǐng)求緩存的優(yōu)缺點(diǎn)：

優(yōu)點(diǎn)：直接從瀏覽器緩存中獲取資源，不需要從服務(wù)器上重新加載資源，速度較快，用戶體驗(yàn)好。

缺點(diǎn)：無(wú)法實(shí)時(shí)獲取最新的服務(wù)器資源。

瀏覽器走緩存的時(shí)機(jī)：

1）第一個(gè)GET請(qǐng)求

2）請(qǐng)求路徑已經(jīng)被瀏覽器緩存過(guò)，第二次發(fā)送請(qǐng)求的時(shí)候這個(gè)路徑?jīng)]有變化，會(huì)走瀏覽器緩存

解決Ajax GET請(qǐng)求緩存問(wèn)題：

1）可以在請(qǐng)求路徑的url后面加一個(gè)時(shí)間戳，這個(gè)時(shí)間戳隨時(shí)變化，所以每一次發(fā)送請(qǐng)求路徑都是不一樣的，這樣就不會(huì)走瀏覽器緩存問(wèn)題。

2）可以采用時(shí)間戳："url?t=" + new Date().getTime()

3）通過(guò)隨機(jī)數(shù)："url?t=" Math.random()

4）隨機(jī)數(shù) + 時(shí)間戳也是可以的

在chrome瀏覽器修改數(shù)據(jù)在啟動(dòng)服務(wù)時(shí)，會(huì)實(shí)時(shí)更新數(shù)據(jù)，但是在IE瀏覽器中，會(huì)走本地緩存不會(huì)更新實(shí)時(shí)數(shù)據(jù)的。

Ajax POST請(qǐng)求的基本操作

和上文的get請(qǐng)求基本一致，我們只需要改動(dòng)幾個(gè)地方的內(nèi)容即可。如下圖所示，當(dāng)我們要進(jìn)行Ajax的POST請(qǐng)求時(shí)，我們只需要將初始化改為POST即可。

當(dāng)然，我們進(jìn)行 Ajax POST請(qǐng)求時(shí)，我們的express框架創(chuàng)建的路由規(guī)則也是要加上 post 規(guī)則的

那么如何給POST請(qǐng)求設(shè)置參數(shù)呢？因?yàn)閭鲄⒎绞讲煌援?dāng)然不是和GET請(qǐng)求相同，而是在Ajax請(qǐng)求數(shù)據(jù)的第三步發(fā)送 send 請(qǐng)求時(shí)傳遞數(shù)據(jù)，請(qǐng)看如下：

Ajax 設(shè)置請(qǐng)求頭信息

Ajax設(shè)置請(qǐng)求頭信息可以自己規(guī)定，即在進(jìn)行Ajax請(qǐng)求的第二步操作時(shí)設(shè)置請(qǐng)求頭即可，如果想自己規(guī)定一些請(qǐng)求頭的名稱，需要自己在設(shè)置路由規(guī)則時(shí)設(shè)置響應(yīng)頭的標(biāo)準(zhǔn)內(nèi)容，具體操作如下：

nodemon工具安裝

nodemon是一種工具，可在檢測(cè)到目錄中的文件更改時(shí)通過(guò)自動(dòng)重新啟動(dòng)節(jié)點(diǎn)應(yīng)用程序來(lái)幫助開發(fā)基于 node.js 的應(yīng)用程序，所以說(shuō)使用該工具還是需要先安裝node.js的。

那我就假設(shè)你已經(jīng)安裝了node.js了，安裝nodemon命令如下：

npm install -g nodemon

安裝完成之后，我們對(duì)服務(wù)就不需要在修改之后再重啟了，只執(zhí)行以下命令即可。

nodemon index.js

執(zhí)行上面的命令可能會(huì)出現(xiàn)系統(tǒng)不允許的報(bào)錯(cuò)信息，在命令前面加上 npx 即可。成功畫面如下圖這樣一來(lái)我們就免去了修改代碼時(shí)來(lái)回重啟服務(wù)的繁瑣。

基于JSON的數(shù)據(jù)交換

在實(shí)際工作當(dāng)中，我們向服務(wù)端發(fā)送請(qǐng)求，服務(wù)端返回的結(jié)果絕大多數(shù)情況都是一個(gè)JSON格式的數(shù)據(jù)。當(dāng)然如果我們想設(shè)置響應(yīng)體時(shí)，需要將對(duì)象通過(guò)JSON轉(zhuǎn)換為字符串。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid #008c8c;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById('result')
        // 綁定鍵盤按下事件
        window.onkeydown = function(){
            // 發(fā)送 Ajax 請(qǐng)求
            const xhr = new XMLHttpRequest()
            // 設(shè)置響應(yīng)體的類型
            xhr.responseType = 'json'
            // 初始化
            xhr.open('GET','http://127.0.0.1:8000/json-index')
            // 發(fā)送
            xhr.send()
            // 事件綁定
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status <300){
                        // 處理
                        // 手動(dòng)對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)化
                        // let data = JSON.parse(xhr.response)
                        // console.log(data);
                        // result.innerHTML = data.name
                        // 自動(dòng)轉(zhuǎn)換
                        console.log(xhr.response);
                        result.innerHTML = xhr.response.name
                    }
                }
            }
        }
    </script>
</body>
</html>

// 1.引入express
const { response } = require('express')
const express = require('express')
// 2.創(chuàng)建應(yīng)用對(duì)象
const app = express()
// 3.get創(chuàng)建路由規(guī)則
app.get('/index',(request,response)=>{
    // 設(shè)置響應(yīng)頭
    response.setHeader('Access-Control-Allow-Origin','*')
    // 設(shè)置響應(yīng)體
    response.send('hello Ajax')
})
// 3.post創(chuàng)建路由規(guī)則
app.all('/json-index',(request,response)=>{
    // 設(shè)置響應(yīng)頭
    response.setHeader('Access-Control-Allow-Origin','*')
    // 設(shè)置響應(yīng)體，可以自己規(guī)定響應(yīng)體
    response.setHeader('Access-Control-Allow-Headers','*')
    // 響應(yīng)一個(gè)數(shù)據(jù)
    const data = {
        name:'張三'
    }
    // 將對(duì)象進(jìn)行字符串轉(zhuǎn)換
    let str = JSON.stringify(data)
    // 設(shè)置響應(yīng)體
    response.send(str)
})
// 4.監(jiān)聽端口啟動(dòng)服務(wù)
app.listen(8000,()=>{
    console.log('服務(wù)已經(jīng)啟動(dòng),8080端口監(jiān)聽中....');
})