在 JavaScript 中，Ajax（Asynchronous JavaScript and XML）是一種用于在后臺(tái)與服務(wù)器進(jìn)行異步通信的技術(shù)。它允許在不刷新整個(gè)頁(yè)面的情況下，通過(guò)發(fā)送 HTTP 請(qǐng)求和接收服務(wù)器返回的數(shù)據(jù)，實(shí)現(xiàn)局部更新頁(yè)面內(nèi)容的功能。

通過(guò) Ajax，可以實(shí)現(xiàn)以下功能：

• 異步加載數(shù)據(jù)：可以使用 Ajax 請(qǐng)求從服務(wù)器獲取數(shù)據(jù)，然后在頁(yè)面上進(jìn)行動(dòng)態(tài)展示，而無(wú)需刷新整個(gè)頁(yè)面。這在處理大量數(shù)據(jù)或需要頻繁更新數(shù)據(jù)的場(chǎng)景中非常有用。
• 表單提交：可以使用 Ajax 將表單數(shù)據(jù)以異步方式發(fā)送到服務(wù)器，然后根據(jù)服務(wù)器返回的響應(yīng)進(jìn)行相應(yīng)的處理，而無(wú)需頁(yè)面刷新。
• 動(dòng)態(tài)內(nèi)容更新：可以使用 Ajax 獲取最新的數(shù)據(jù)，并將其插入到頁(yè)面中的特定位置，從而實(shí)現(xiàn)動(dòng)態(tài)內(nèi)容的更新。

在 JavaScript 中，可以通過(guò)原生的 XMLHttpRequest 對(duì)象來(lái)實(shí)現(xiàn) Ajax 請(qǐng)求，也可以使用更高級(jí)的封裝庫(kù)（如 jQuery 的 $.ajax() 方法、axios、fetch 等）來(lái)簡(jiǎn)化 Ajax 請(qǐng)求的操作。這些封裝庫(kù)提供了更方便的方法和更好的跨瀏覽器兼容性。

使用原生 XMLHttpRequest 對(duì)象發(fā)送 Ajax 請(qǐng)求

以下是一個(gè)使用原生 XMLHttpRequest 對(duì)象發(fā)送 Ajax 請(qǐng)求的示例：

<button id = "btn">獲取新歌</button>
<ul id='ul'>
   
</ul>

<script>
    let btn = document.getElementById('btn')
    btn.addEventListener('click',() =>{
        //發(fā)送一個(gè)http請(qǐng)求
        let xhr = new XMLHttpRequest()
        xhr.open('GET','http://192.168.31.26:3000/top/song?type=7',true)
        xhr.onreadystatechange = () =>{
            if(xhr.readyState === 4 && xhr.status === 200){
                // console.log(JSON.parse(xhr.responseText)); //響應(yīng)體
                const result = JSON.parse(xhr.responseText).data
                for(let key in result){
                    // result[key].name
                    const li = document.createElement('li') //動(dòng)態(tài)創(chuàng)建DOM結(jié)構(gòu)
                    li.innerText = result[key].name
                    document.getElementById('ul').appendChild(li)
                }
            }
        }
        xhr.send()
    })
</script>

• 首先，通過(guò)let btn = document.getElementById('btn')獲取id為"btn"的按鈕元素。
• 然后，通過(guò)btn.addEventListener('click',() => { ... })給按鈕添加了一個(gè)點(diǎn)擊事件的監(jiān)聽(tīng)器。也就是說(shuō)，當(dāng)按鈕被點(diǎn)擊時(shí)，會(huì)執(zhí)行后面的箭頭函數(shù)中的代碼。
• 在點(diǎn)擊事件的處理函數(shù)中，首先創(chuàng)建了一個(gè)新的XMLHttpRequest對(duì)象，即let xhr = new XMLHttpRequest()。XMLHttpRequest對(duì)象用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)，可以在不重新加載整個(gè)頁(yè)面的情況下更新頁(yè)面的部分內(nèi)容。
• 調(diào)用xhr.open('GET',''http://192.168.31.26:3000/top/song?type=7' ',true)方法初始化一個(gè)新的請(qǐng)求。這里指定了請(qǐng)求的方式為GET，請(qǐng)求的URL為（'http://192.168.31.26:3000/top/song?type=7' ） ，這里我們要注意，由于瀏覽器的安全策略限制，Ajax 請(qǐng)求只能與同源的 URL 進(jìn)行通信，或者使用 CORS（跨域資源共享）進(jìn)行跨域請(qǐng)求。最后一個(gè)參數(shù)指定為true表示使用異步請(qǐng)求。這意味著頁(yè)面會(huì)在等待服務(wù)器響應(yīng)的同時(shí)繼續(xù)執(zhí)行其他腳本，而不會(huì)被阻塞。
• 接下來(lái)通過(guò)xhr.onreadystatechange方法設(shè)置一個(gè)回調(diào)函數(shù)，用于監(jiān)聽(tīng)XMLHttpRequest對(duì)象的狀態(tài)變化。當(dāng)狀態(tài)發(fā)生變化時(shí)，該回調(diào)函數(shù)會(huì)被調(diào)用。
• 在回調(diào)函數(shù)中，首先檢查了XMLHttpRequest對(duì)象的狀態(tài)和HTTP狀態(tài)碼是否符合預(yù)期，即if(xhr.readyState === 4 && xhr.status === 200)。如果滿足條件，表示請(qǐng)求已經(jīng)完成且成功返回，可以處理服務(wù)器返回的數(shù)據(jù)。
• 解析服務(wù)器返回的響應(yīng)體，將其轉(zhuǎn)換為JSON格式：const result = JSON.parse(xhr.responseText).data。這里假設(shè)服務(wù)器返回的是JSON格式的數(shù)據(jù)，通過(guò)JSON.parse方法將其解析為JavaScript對(duì)象。
• 遍歷解析后的結(jié)果，動(dòng)態(tài)創(chuàng)建li元素，并將歌曲名稱作為li元素的文本內(nèi)容。這部分代碼通過(guò)for...in循環(huán)遍歷result對(duì)象的屬性，并為每個(gè)歌曲創(chuàng)建一個(gè)li元素，然后將其添加到無(wú)序列表中。
• 最后，調(diào)用xhr.send()方法發(fā)送HTTP請(qǐng)求。這會(huì)觸發(fā)之前設(shè)置的onreadystatechange回調(diào)函數(shù)，從而實(shí)現(xiàn)異步請(qǐng)求的處理和數(shù)據(jù)更新。

當(dāng)用戶點(diǎn)擊按鈕時(shí)，頁(yè)面會(huì)執(zhí)行JavaScript代碼，通過(guò)Ajax技術(shù)向指定URL發(fā)送GET請(qǐng)求，獲取服務(wù)器返回的數(shù)據(jù)，實(shí)現(xiàn)在頁(yè)面上動(dòng)態(tài)顯示這些數(shù)據(jù)的功能。

使用 jQuery 的 $.ajax() 方法發(fā)送 AJAX 請(qǐng)求

這段代碼是一個(gè)使用 jQuery 的 $.ajax() 方法發(fā)送 AJAX 請(qǐng)求的示例：

<button id = "btn">獲取新歌</button>
<ul id='ul'>
   
</ul>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
    let btn = document.getElementById('btn')
    btn.addEventListener('click',() =>{
        $.ajax({
            url:'http://192.168.31.26:3000/top/song?type=7',
            method:'GET',
            dataType:'JSON',
            success: (res) =>{
                console.log(res);
            }
            
        })
    })
</script>

• 首先我們引入了 jQuery 庫(kù)文件，這里使用了公共 CDN 服務(wù)提供的鏈接。
• 之后我們?cè)趕cript標(biāo)簽里定義了一個(gè) btn 變量，用來(lái)獲取一個(gè) ID 名稱為 btn 的 HTML 元素。
• 然后給 btn 元素添加了一個(gè)點(diǎn)擊事件監(jiān)聽(tīng)器，當(dāng)按鈕被點(diǎn)擊時(shí)會(huì)執(zhí)行回調(diào)函數(shù)。
• 在回調(diào)函數(shù)中，使用了 jQuery 提供的 .ajax()方法，在.ajax() 方法，在 .ajax()方法，在.ajax() 方法中，首先指定了請(qǐng)求 URL，即 http://192.168.31.26:3000/top/song?type=7 ，這里使用了 GET 方法。
• 然后指定了 dataType 為 JSON，表示期望從服務(wù)器返回的數(shù)據(jù)類型為 JSON 格式。
• 在請(qǐng)求成功后，會(huì)執(zhí)行 success 回調(diào)函數(shù)，該函數(shù)會(huì)接收一個(gè)參數(shù) res，表示從服務(wù)器返回的響應(yīng)結(jié)果。在這個(gè)示例中，使用了 console.log() 方法將 res 輸出到控制臺(tái)中。

使用Fetch API進(jìn)行網(wǎng)絡(luò)請(qǐng)求

Fetch API是一種現(xiàn)代的網(wǎng)絡(luò)請(qǐng)求API，用于替代傳統(tǒng)的XMLHttpRequest對(duì)象，相較于傳統(tǒng)的Ajax更加簡(jiǎn)潔和易用。

<button id = "btn">獲取新歌</button>
<ul id='ul'>
   
</ul>

<script>
    let btn = document.getElementById('btn')
    btn.addEventListener('click',() =>{
        fetch('http://192.168.31.26:3000/top/song?type=7')
        .then((data) => {
            return data.json()
        })
        .then((res) =>{
            console.log(res);
        })
    })
</script>

實(shí)現(xiàn)過(guò)程如下：

• 首先，通過(guò)let btn = document.getElementById('btn')獲取id為"btn"的按鈕元素。
• 然后，通過(guò)btn.addEventListener('click',() => { ... })給按鈕添加了一個(gè)點(diǎn)擊事件的監(jiān)聽(tīng)器。也就是說(shuō)，當(dāng)按鈕被點(diǎn)擊時(shí)，會(huì)執(zhí)行后面的箭頭函數(shù)中的代碼。
• 在點(diǎn)擊事件的處理函數(shù)中，使用Fetch API發(fā)送了一個(gè)GET請(qǐng)求到指定URL，即fetch('http://192.168.31.26:3000/top/song?type=7')。
• Fetch函數(shù)返回一個(gè)Promise對(duì)象，可以通過(guò).then()方法處理請(qǐng)求成功后的響應(yīng)。在這段代碼中，使用第一個(gè).then()方法對(duì)返回的Response對(duì)象進(jìn)行處理。
• 在第一個(gè).then()方法中，使用箭頭函數(shù)(data) => { return data.json() }對(duì)響應(yīng)的數(shù)據(jù)進(jìn)行處理。通過(guò)調(diào)用data.json()方法，將Response對(duì)象的響應(yīng)體解析為JSON格式，返回一個(gè)新的Promise對(duì)象。
• 接下來(lái)，使用第二個(gè).then()方法處理解析后的JSON數(shù)據(jù)。在這段代碼中，使用箭頭函數(shù)(res) => { console.log(res); }來(lái)打印解析后的數(shù)據(jù)到控制臺(tái)。

這三種方法可以根據(jù)自己實(shí)際需要去選擇。

以上就是使用JavaScript實(shí)現(xiàn)頁(yè)面局部更新的方法總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于JavaScript頁(yè)面局部更新的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論