AJAX发送GET请求

需求：点击按钮发送ajax请求，将服务端返回的响应体放在div中

<button>点击发送请求</button><div id="result"></div>

#result {width: 200px;height: 100px;border: 1px solid #ccc;}

// server.js// 1. 引入expressconst express = require('express');// 2. 创建应用对象const app = express();// 3. 创建路由规则// request是对请求报文的封装// response是对响应报文的封装app.get('/server', (request, response) => {// 设置响应头 设置允许跨域response.setHeader('Access-Control-Allow-Origin', '*');// 设置响应体response.send('hello ajax');});// 4. 监听端口启动服务app.listen(8000, () => {console.log("服务已启动,8000端口监听中......");})

readystate是xhr对象中的属性 表示状态 0 1 2 3 4

0 未初始化 最开始就是01 表示open方法调用完毕2 表示send方法调用完毕3 表示服务端返回来部分结果4 表示服务端返回了所有的结果

const btn = document.getElementsByTagName('button')[0];const result = document.getElementById("result");btn.onclick = function () {// 1. 创建对象const xhr = new XMLHttpRequest();// 2. 初始化 设置请求的方法和urlxhr.open('GET', 'http://127.0.0.1:8000/server');// 3. 发送xhr.send();// 4. 事件绑定 处理服务端返回的结果// readystate 是xhr对象中的属性 表示状态 0 1 2 3 4xhr.onreadystatechange = function () {// 判断 4表示服务端返回了所有的结果if (xhr.readyState === 4) {// 响应状态码 2xx都表示成功if (xhr.status >= 200 && xhr.status < 300) {// 处理结果// 1. 响应行console.log(xhr.status); // 状态码console.log(xhr.statusText); // 状态字符串console.log(xhr.getAllResponseHeaders()); // 所有响应头console.log(xhr.response); // 响应体result.innerHTML = xhr.response;}}}}

控制台报错的重启一下vscode

AJAX设置请求参数

在发送请求的时候在url后面拼接

xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');

如果觉得《AJAX发送GET请求 AJAX设置请求参数》对你有帮助，请点赞、收藏，并留下你的观点哦！