1.大致效果：
2.服务器端 server.js
// 1. 引入express const express = require('express'); // 2. 创建应用对象 const app = express(); // 3. 创建路由规则 app.get('/server', (request, response) => { // 设置响应头 设置允许跨域 response.setHeader('Access-Control-Allow-Origin', '*'); // 设置响应体 response.send("Hello Ajax"); }); // 4. 监听服务 app.listen(8000, () => { console.log("服务已经启动, 8000 端口监听中..."); })
3.启动服务
前端页面：
<!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: 100px; border: solid 1px #90b; } </style> </head> <body> <button>点击发送请求</button> <div id="result"></div> <script> //获取button元素 const btn = document.getElementsByTagName('button')[0]; const result = document.getElementById('result'); //绑定事件 btn.onclick = function(){ // 1. 创建对象 const xhr = new XMLHttpRequest(); // 2. 初始化 设置请求方法和url xhr.open('GET', 'http://127.0.0.1:8000/server') // 3. 发送 xhr.send(); // 4. 事件绑定 处理服务端返回的结果 xhr.onreadystatechange = function(){ // readyState 是 xhr 对象中的属性, 表示状态 0 1 2 3 4 //判断 (服务端返回了所有的结果) if(xhr.readyState === 4){ //判断响应状态码 200 404 403 401 500 if(xhr.status >= 200 && xhr.status < 300){ // 处理结果 行 头 空行 体 // 响应 console.log('状态码', xhr.status); // 状态码 console.log('状态字符串', xhr.statusText); // 状态字符串 console.log('所有响应头', xhr.getAllResponseHeaders()); // 所有响应头 console.log('响应体', xhr.response); // 响应体 //设置 result 的文本 result.innerHTML=xhr.response; }else{ } } } } </script> </body> </html>
GET 请求设置请求参数：
设置url参数
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
