var xhr = new XMLHttpRequest();//创建 XMLHttpRequest 对象
xhr.open('GET', 'https://api.example.com/data', true);//指定请求的类型和 URL:
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
//设置回调函数
xhr.send();//发送请求
<!DOCTYPE html>
<html>
<head>
<title>AJAX 示例</title>
<script>
function loadData() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
document.getElementById('result').innerText = JSON.stringify(data, null, 2);
}
};
xhr.send();
}
</script>
</head>
<body>
<button onclick="loadData()">加载数据</button>
<pre id="result"></pre>
</body>
</html>
AJAX,全称为 Asynchronous JavaScript and XML,是一种用于在网页无需刷新整个页面的情况下,与服务器交换数据的技术。它可以让网页更加动态和交互性更强。AJAX 使用 JavaScript 来执行异步 HTTP 请求,这些请求可以返回数据格式如 XML、JSON、HTML 或纯文本。
AJAX 其实不是一个插件,而是一种技术,它的名字代表着 "Asynchronous JavaScript and XML"。这是一个术语,指的是一组 web 开发技术,它们被用来在无需刷新整个页面的情况下,通过异步方式与服务器交换数据。
AJAX 的核心在于使用 JavaScript 来创建异步 HTTP 请求,并处理服务器的响应。它可以与多种数据格式进行交互,包括 XML、JSON、HTML 和纯文本。
尽管你可能会在一些库和框架中看到 AJAX 功能(比如 jQuery 的 $.ajax()
方法),但这些只是为了更方便地使用 AJAX 技术而提供的封装。底层还是依靠原生的 JavaScript 技术,例如 XMLHttpRequest
或 fetch
。