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

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

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

在 JavaScript 中，可以通過原生的 XMLHttpRequest 對象來實現(xiàn) Ajax 請求，也可以使用更高級的封裝庫（如 jQuery 的 $.ajax() 方法、axios、fetch 等）來簡化 Ajax 請求的操作。這些封裝庫提供了更方便的方法和更好的跨瀏覽器兼容性。

使用原生 XMLHttpRequest 對象發(fā)送 Ajax 請求

以下是一個使用原生 XMLHttpRequest 對象發(fā)送 Ajax 請求的示例：

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

<script>
    let btn = document.getElementById('btn')
    btn.addEventListener('click',() =>{
        //發(fā)送一個http請求
        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') //動態(tài)創(chuàng)建DOM結(jié)構(gòu)
                    li.innerText = result[key].name
                    document.getElementById('ul').appendChild(li)
                }
            }
        }
        xhr.send()
    })
</script>

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

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

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

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

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

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

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

<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>

實現(xiàn)過程如下：

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

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

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

最新評論