原生AJAX调用接口分为一下四步： 1.创建对象 2.初始化 设置请求方法和url 3.发送 4. 绑定事件 处理服务端返回的结果 代码展示如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX GET 请求</title>
<style>
#result {
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<button type="button">点我发送请求</button>
<div id="result"></div>
<script>
const btn = document.querySelector('button');
const result = document.getElementById('result');
btn.onclick = function () {
// 1.创建对象
const xhr = new XMLHttpRequest(); // readystate 为0 表示未初始化
// 2.初始化 设置请求方法和url
xhr.open('GET', 'http://127.0.0.1:8000/serve?a=100&b=200&c=300'); //readystate 为1 表示open 方法已经调用完毕 ?a=100&b=200$c=300表示在AJAX中设施请求参数，多个参数用&隔开
//
// 3. 发送
xhr.send(); // readystate 为2 send 方法已经调用完毕
// readystate 为3 表示服务端返回了部分结果
// readystate 为4 表示服务端返回了所有结果
// 4. 绑定事件 处理服务端返回的结果
// readystate 是xhr对象的属性 表示状态 有0，1，2，3，4 五个值
// change 改变 readystate状态值每改变一次触发一次事件，总共触发4次
xhr.onreadystatechange = function () {
// 判断(服务端返回所有结果后再去处理)
if (xhr.readyState === 4) {
// 判断响应状态码 200 404 403
// 2xx 以2开头的都算成功
if (xhr.status >= 200 && xhr.status < 300) {
// 满足所有条件后开始处理结果
// console.log(xhr.status); // 响应行里的响应状态码
// console.log(xhr.statusText); //响应行里的响应字符串
// console.log(xhr.getAllResponseHeaders()); // 所有响应头
// console.log(xhr.response); // 响应体
result.innerHTML = xhr.response;
}
}
}
}
</script>
</body>
</html>
服务端代码如下：
// 1. 引入expres
const { request, response } = require('express');
const express = require('express');
// 2. 创建应用对象
const app = express();
//3. 创建路由规则
// request是对请求报文的封装
// response是对响应报文的封装
app.get('/serve', (request, response) => {
// 设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
// 设置响应体
response.send('HELLO AJAX');
});
// 4.监听端口启动服务
app.listen(8000,()=>{
console.log('服务已启动， 8000 端口监听中.......');
});
作者此处简单的使用了express框架，需要安装node.js环境，在此不做多余的阐述，想了解的朋友请自行百度
