随着网站越来越复杂并且需要更高的用户体验，AJAX（Asynchronous JavaScript and XML）技术已经成为网站前端开发必不可少的技能之一。它允许您通过JavaScript向服务器发送请求，同时不会使整个页面重新加载。这使得网站更快，更平滑，并且用户不会感到任何中断的感觉。本文将介绍如何在JavaScript中使用AJAX并保持页面不刷新。
在Javascript中使用AJAX需要使用XMLHttpRequest对象，因为它是执行异步请求的核心。XMLHttpRequest对象是一个内置的JavaScript对象，通常简称为XHR。它提供了通过HTTP协议进行异步请求的API，使得我们可以在不刷新整个页面的情况下获取服务器响应，处理请求和更新网页。
下面是一个简单的使用XHR进行请求的示例：
let request = new XMLHttpRequest();
request.open('GET', '/api/data', true);
request.onreadystatechange = function() {
if(request.readyState === 4 && request.status === 200) {
let response = JSON.parse(request.responseText);
// 处理响应并更新页面
}
};
request.send();在上面的代码中，我们创建了一个XMLHttpRequest对象实例，并使用open()方法打开了一个GET请求。开启GET请求后，我们给onreadystatechange事件设置了一个处理函数，它会在XHR对象的readyState属性改变时被调用，并检查服务器响应的状态码是否为200。如果一切顺利，我们解析响应文本（通常是JSON格式）并在页面上更新相关的数据。
如果您使用jQuery的话，那么它会在底层抽象出更加简化的API来使用AJAX。下面是一个完整的jQuery AJAX的示例：
$.ajax({
url: '/api/data',
type: 'GET',
dataType: 'json',
success: function(data) {
// 成功后更新页面
}
});在上面的代码中，我们使用jQuery的$.ajax()方法发送了一个GET请求，并在成功时执行了一个处理函数。与使用XMLHttpRequest对象类似，我们可以在success函数中更新页面内容。
一旦您的AJAX请求成功返回响应，您可能想要使用JavaScript来更新页面上的内容以反映新的数据。以下是一个简单的例子：
function updatePage(response) {
let div = document.getElementById('data-display');
let html = '';
response.forEach(function(item) {
html += '<div>' + item.name + '</div>';
});
div.innerHTML = html;
}在上面的代码中，我们定义了一个updatePage()函数来更新页面内容。它首先找到ID为“data-display”的div元素，并在内部构建一个HTML字符串，然后将该字符串设置为该元素的innerHTML。
由于AJAX是异步执行的，用户可能会不断地启动多个相同或不同的请求，这将使这些请求大量交错，而导致并发问题和服务器负载过大。因此，在发送AJAX请求时，我们应该注意避免重复请求。
一种避免重复请求的方法是使用标记（或标志）变量来检查之前的请求是否已经完成。例如：
let requesting = false;
function makeRequest() {
if(requesting) {
return;
}
requesting = true;
$.ajax({
url: '/api/data',
type: 'GET',
dataType: 'json',
success: function(data) {
updatePage(data);
},
complete: function() {
requesting = false;
}
});
}在上述代码中，我们使用变量“requesting”来标识一个请求是否已经发出。为了避免多次请求，我们在开始发送请求之前首先检查该变量的状态。如果变量为true，则返回并不再发送新的请求。如果请求成功或失败，我们在complete回调函数中将变量重新设置为false，以便允许新的请求。
AJAX最常用的场景之一是通过动态表单提交数据，并在不刷新整个页面的情况下获取服务器响应。以下是一个使用jQuery实现动态表单的例子：
<form id="my-form">
<input type="text" id="name" name="name" placeholder="Your name">
<button type="submit">Submit</button>
</form>
<div id="result"></div>
<script type="text/javascript">
$("#my-form").submit(function(e) {
e.preventDefault();
let $form = $(this);
let url = $form.attr('action');
let formData = $form.serialize();
$.ajax({
type: "POST",
url: url,
data: formData,
dataType: 'json',
success: function(response) {
$('#result').html("Thank you, " + response.name + "!");
}
});
});
</script>在上面的代码中，我们定义了一个表单，并为其绑定了一个submit事件。当用户提交表单时，我们使用serialize()方法来收集表单数据，并将其作为AJAX请求的数据发送到服务器。如果服务器成功处理并返回JSON响应，则我们在页面上使用response中的数据更新一个ID为“result”的div元素。
结论
正如您所看到的，AJAX使得向服务器发送和接收数据变得更容易并且更加自如。本文介绍了如何在Javascript中使用AJAX来发送异步请求，并在不刷新整个页面的情况下更新内容。最后我们讨论了如何避免重复请求以及实现动态表单提交。AJAX是非常有用的技术，它可以使您的网站更快、更流畅，并且将大大提高用户体验。
以上是如何在JavaScript中使用AJAX并保持页面不刷新的详细内容。更多信息请关注PHP中文网其他相关文章！
