JavaScript 页面局部更新教程：XMLHttpRequest、jQuery 与 Fetch API 对比

在 JavaScript 开发中，Ajax（Asynchronous JavaScript and XML）是一项用于在后台与服务器进行异步通信的关键技术。它允许网页在不刷新整个页面的前提下，通过发送 HTTP 请求并接收服务器返回的数据，从而实现页面内容的局部更新。

借助 Ajax 技术，开发者可以实现多种交互功能：

异步数据加载：通过 Ajax 请求从服务器获取数据，并在页面上动态展示，无需刷新整个页面。这种机制在处理海量数据或需要高频更新数据的场景中尤为实用。
表单异步提交：利用 Ajax 将表单数据以异步方式发送至服务器，并根据服务器返回的响应结果进行相应处理，避免了传统提交导致的页面刷新。
动态内容渲染：通过 Ajax 获取最新数据，并将其插入到页面的特定位置，从而实现内容的动态更新与展示。

在 JavaScript 中，开发者既可以使用原生的 XMLHttpRequest 对象来构建 Ajax 请求，也可以借助更高级的封装库（如 jQuery 的 $.ajax() 方法、axios 或 Fetch API 等）来简化操作。这些封装库提供了更便捷的方法接口，并具备更好的跨浏览器兼容性。

使用原生 XMLHttpRequest 对象发送 Ajax 请求

以下代码展示了如何使用原生 XMLHttpRequest 对象发起 Ajax 请求：

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

<script>
    let btn = document.getElementById('btn')
    btn.addEventListener('click',() =>{
        //发送一个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)); //响应体
                const result = JSON.parse(xhr.responseText).data
                for(let key in result){
                    // result[key].name
                    const li = document.createElement('li') //动态创建DOM结构
                    li.innerText = result[key].name
                    document.getElementById('ul').appendChild(li)
                }
            }
        }
        xhr.send()
    })
</script>

首先，通过 let btn = document.getElementById('btn') 获取 ID 为 'btn' 的按钮元素。
接着，利用 btn.addEventListener('click', () => { ... }) 为该按钮绑定点击事件监听器。这意味着当用户点击按钮时，将执行箭头函数内的代码逻辑。
在点击事件的处理函数内部，首先实例化一个新的 XMLHttpRequest 对象，即 let xhr = new XMLHttpRequest()。该对象用于在后台与服务器交换数据，支持在不重新加载整个页面的情况下更新页面局部内容。
调用 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 通信，或需通过 CORS（跨域资源共享）机制处理跨域请求。最后一个参数设为 true 表示启用异步请求，即页面在等待服务器响应期间可继续执行其他脚本，不会被阻塞。
随后，通过 xhr.onreadystatechange 设置回调函数，用于监听 XMLHttpRequest 对象的状态变化。每当状态发生改变时，该回调函数将被触发执行。
在回调函数内部，首先校验 XMLHttpRequest 对象的状态及 HTTP 状态码是否符合预期，即判断 if (xhr.readyState === 4 && xhr.status === 200)。若条件满足，表明请求已完成且成功返回，此时可处理服务器返回的数据。
解析服务器返回的响应体，将其转换为 JSON 格式：const result = JSON.parse(xhr.responseText).data。此处假设服务器返回的是 JSON 格式数据，通过 JSON.parse 方法将其解析为 JavaScript 对象。
遍历解析后的结果，动态创建 li 元素，并将歌曲名称作为 li 元素的文本内容。该部分代码通过 for...in 循环遍历 result 对象的属性，为每首歌曲创建一个 li 元素，随后将其追加到无序列表中。
最后，调用 xhr.send() 方法发送 HTTP 请求。这将触发之前设置的 onreadystatechange 回调函数，从而实现异步请求的处理及页面数据的更新。

当用户点击按钮时，页面将执行 JavaScript 代码，通过 Ajax 技术向指定 URL 发送 GET 请求，获取服务器返回的数据，进而实现在页面上动态显示这些数据的功能。

使用 jQuery 的 $.ajax() 方法发送 AJAX 请求

以下代码示例展示了如何使用 jQuery 的 $.ajax() 方法发起 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 服务提供的链接。
随后，在 script 标签内定义一个 btn 变量，用于获取 ID 为 'btn' 的 HTML 元素。
接着，为 btn 元素添加点击事件监听器，当按钮被点击时执行相应的回调函数。
在回调函数内部，调用 jQuery 提供的 .ajax() 方法。在 .ajax() 方法中，首先指定请求 URL 为 http://192.168.31.26:3000/top/song?type=7，并指定使用 GET 方法。
接着指定 dataType 为 JSON，表示期望从服务器返回的数据类型为 JSON 格式。
请求成功后，将执行 success 回调函数，该函数接收一个参数 res，代表从服务器返回的响应结果。在此示例中，使用 console.log() 方法将 res 输出至控制台。

使用 Fetch API 进行网络请求

Fetch API 是一种现代网络请求接口，旨在替代传统的 XMLHttpRequest 对象。相较于传统 Ajax，Fetch API 更加简洁且易于使用。

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

其实现过程如下：

首先，通过 let btn = document.getElementById('btn') 获取 ID 为 'btn' 的按钮元素。
接着，通过 btn.addEventListener('click', () => { ... }) 为按钮添加点击事件监听器。即当按钮被点击时，执行箭头函数内的代码。
在点击事件的处理函数中，使用 Fetch API 向指定 URL 发送 GET 请求，即 fetch('http://192.168.31.26:3000/top/song?type=7')。
Fetch 函数返回一个 Promise 对象，可通过 .then() 方法处理请求成功后的响应。在此代码中，使用第一个 .then() 方法对返回的 Response 对象进行处理。
在第一个 .then() 方法中，使用箭头函数 (data) => { return data.json() } 处理响应数据。通过调用 data.json() 方法，将 Response 对象的响应体解析为 JSON 格式，并返回一个新的 Promise 对象。
接下来，使用第二个 .then() 方法处理解析后的 JSON 数据。在此示例中，使用箭头函数 (res) => { console.log(res); } 将解析后的数据打印至控制台。

这三种方法可根据实际开发需求进行选择。

以上即为使用 JavaScript 实现页面局部更新的方法总结，更多关于 JavaScript 页面局部更新的资料请关注本站其它相关文章！

JavaScript 实现页面局部更新的三种主流方案：原生 XMLHttpRequest、jQuery Ajax 与 Fetch API

使用原生 XMLHttpRequest 对象发送 Ajax 请求

使用 jQuery 的 $.ajax() 方法发送 AJAX 请求

使用 Fetch API 进行网络请求

实用工具推荐