作者：Vincy。最后修改于2022年9月27日。
这是一个纯JavaScript解决方案，无需jQuery或任何其他第三方插件即可使用AJAX。
AJAX是一种从客户端脚本向服务器异步发送请求的方式。一般来说，用服务器的响应来更新UI，而不用重新加载页面。
我介绍了两种用JavaScript AJAX调用后端（PHP）的不同方法。
- 通过XMLHTTPRequest。
- 使用JavaScriptfetchprototype。
本教程创建了两种方法的简单例子。对于AJAX编程的初学者来说，这将是一个简单的开始。它只是通过JavaScript AJAX读取服务器上的.txt文件的内容。
如果你想搜索使用jQuery AJAX的代码，那么我们也有例子在里面。
通过XMLHTTPRequest的AJAX调用
这个例子使用 *XMLHttpRequest*来向服务器发送一个AJAX请求。
下面的脚本有以下的AJAX生命周期，以从服务器上获得响应。
- 它实例化了
XMLHttpRequest类。 - 它定义了一个回调函数来处理
onreadystatechange事件。 - 它通过设置请求方法、服务器端点等准备AJAX请求。
- 用
XMLHttpRequest实例的引用调用send()。
在onreadystatechange 事件中，它可以从服务器上读取响应。这将检查来自服务器的HTTP响应代码，并在不刷新页面的情况下更新用户界面。
在AJAX请求处理过程中，它显示一个加载器图标，直到用户界面被AJAX响应数据所更新。
ajax-xhr.php
<!DOCTYPE html>
<html>
<head>
<title>How to make an AJAX Call in JavaScript with Example</title>
<link rel='stylesheet' href='style.css' type='text/css' />
<link rel='stylesheet' href='form.css' type='text/css' />
<style>
#loader-icon {
display: none;
}
</style>
</head>
<body>
<div class="phppot-container">
<h1>How to make an AJAX Call in JavaScript</h1>
<p>This example uses plain JavaScript to make an AJAX call.</p>
<p>It uses good old JavaScript's XMLHttpRequest. No dependency
or libraries!</p>
<div class="row">
<button onclick="loadDocument()">AJAX Call</button>
<div id="loader-icon">
<img src="loader.gif" />
</div>
</div>
<div id='ajax-example'></div>
<script>
function loadDocument() {
document.getElementById("loader-icon").style.display = 'inline-block';
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = function() {
if (xmlHttpRequest.readyState == XMLHttpRequest.DONE) {
document.getElementById("loader-icon").style.display = 'none';
if (xmlHttpRequest.status == 200) {
// on success get the response text and
// insert it into the ajax-example DIV id.
document.getElementById("ajax-example").innerHTML = xmlHttpRequest.responseText;
}
else if (xmlHttpRequest.status == 400) {
// unable to load the document
alert('Status 400 error - unable to load the document.');
}
else {
alert('Unexpected error!');
}
}
};
xmlHttpRequest.open("GET", "ajax-example.txt", true);
xmlHttpRequest.send();
}
</script>
</body>
</html>
使用JavaScriptfetch原型
这个例子通过发送服务器端点的URL作为参数来调用JavaScript*fetch()*方法。
该方法将服务器响应作为一个对象返回。这个响应对象将包含服务器返回的状态和响应数据。
就像第一个方法一样，它检查状态代码，如果 "*response.status "*是200。如果是，它就用服务器的响应来更新用户界面，而不需要重新加载页面。
ajax-fetch.php
<!DOCTYPE html>
<html>
<head>
<title>How to make an AJAX Call in JavaScript using Fetch API with
Example</title>
<link rel='stylesheet' href='style.css' type='text/css' />
<link rel='stylesheet' href='form.css' type='text/css' />
<style>
#loader-icon {
display: none;
}
</style>
</head>
<body>
<div class="phppot-container">
<h1>How to make an AJAX Call in JavaScript using Fetch</h1>
<p>This example uses core JavaScript's Fetch API to make an AJAX
call.</p>
<p>JavaScript's Fetch API is a good alternative for
XMLHttpRequest. No dependency or libraries! It has wide
support with all major browsers.</p>
<div class="row">
<button onclick="fetchDocument()">AJAX Call with Fetch</button>
<div id="loader-icon">
<img src="loader.gif" />
</div>
</div>
<div id='ajax-example'></div>
<script>
async function fetchDocument() {
let response = await fetch('ajax-example.txt');
document.getElementById("loader-icon").style.display = 'inline-block';
console.log(response.status);
console.log(response.statusText);
if (response.status === 200) {
document.getElementById("loader-icon").style.display = 'none';
let data = await response.text();
document.getElementById("ajax-example").innerHTML = data;
}
}
</script>
</body>
</html>
在一个应用程序中使用AJAX的实例场景
AJAX是一个强大的工具。它必须在需要的地方以有效的方式使用。
以下是在一个应用程序中使用AJAX的完美示例场景。
- 用最近的消息来更新聊天窗口。
- 在社交媒体网站上显示最近的通知。
- 更新记分牌。
- 在滚动中加载最近的事件，而无需重新加载页面。
在之前的文章中，我们已经看到了如何使用jQuery AJAX脚本不断将事件发布到日历中。
下载
