使用JavaScript实现页面局部更新的方法总结
作者：Guava205
在JavaScript中,Ajax（Asynchronous JavaScript and XML）是一种用于在后台与服务器进行异步通信的技术,本文给大家介绍了使用JavaScript实现页面局部更新的三种方法,文中通过代码示例给大家介绍的非常详细,需要的朋友可以参考下
在 JavaScript 中，Ajax（Asynchronous JavaScript and XML）是一种用于在后台与服务器进行异步通信的技术。它允许在不刷新整个页面的情况下，通过发送 HTTP 请求和接收服务器返回的数据，实现局部更新页面内容的功能。
通过 Ajax，可以实现以下功能：
- 异步加载数据：可以使用 Ajax 请求从服务器获取数据，然后在页面上进行动态展示，而无需刷新整个页面。这在处理大量数据或需要频繁更新数据的场景中非常有用。
- 表单提交：可以使用 Ajax 将表单数据以异步方式发送到服务器，然后根据服务器返回的响应进行相应的处理，而无需页面刷新。
- 动态内容更新：可以使用 Ajax 获取最新的数据，并将其插入到页面中的特定位置，从而实现动态内容的更新。
在 JavaScript 中，可以通过原生的 XMLHttpRequest 对象来实现 Ajax 请求，也可以使用更高级的封装库（如 jQuery 的 $.ajax() 方法、axios、fetch 等）来简化 Ajax 请求的操作。这些封装库提供了更方便的方法和更好的跨浏览器兼容性。
使用原生 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()。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() 方法，在 .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是一种现代的网络请求API，用于替代传统的XMLHttpRequest对象，相较于传统的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>
实现过程如下：
- 首先，通过let btn = document.getElementById('btn')获取id为"btn"的按钮元素。
- 然后，通过btn.addEventListener('click',() => { ... })给按钮添加了一个点击事件的监听器。也就是说，当按钮被点击时，会执行后面的箭头函数中的代码。
- 在点击事件的处理函数中，使用Fetch API发送了一个GET请求到指定URL，即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页面局部更新的资料请关注脚本之家其它相关文章！