搭建Web服务环境
之前讲过 Express 快速启动Web服务，这里把代码重写一下；
新建 server.js 服务文件：简短4步创建简单Web服务；
const express = require('express')
const app = express()
app.get('/server',(request,response)=>{
// 设置响应头，允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
// 设置响应体，内容
response.send('Hello Ajax')
})
app.listen('8000',()=>{
console.log('Web服务已经启动，端口8000监听中...');
})
启动服务：需在 server.js 目录执行 node 命令；
> node server.js
看到服务已启动字样，代表 Web 服务已经搭建好了；
浏览器访问：localhost:8000/server 或 127.0.0.1:8000/server 查看：
响应体的返回是正常的，再看下响应头的返回：
Response Headers 响应头中的 Access-Content-Allow-Origin 为 * ；
创建 Ajax 的GET请求
需求：点击按钮，把服务器响应的内容输出在div里；
新建页面： ajax.html ，写点结构和样式；
<!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 {
margin-top: 10px;
width: 200px;
height: 100px;
border: 1px solid #FF847C;
}
</style>
</head>
<body>
<button>点击按钮获取数据</button>
<div id="result">
<!-- 显示在这里 -->
</div>
</body>
</html>
预览下效果：
需求是点击按钮将服务器的响应体显示在 div 中；
在这个文件中写下 AJAX 的GET请求的 JS部分：
// 获取button按钮
const btn = document.getElementsByTagName('button')[0]
// 获取div容器
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 状态，只有4表示返回所有结果
if (xhr.readyState === 4) {
// 判断响应码 200，400，500 等；
// 2XX的响应码都表示成功
if (xhr.status >= 200 && xhr.status < 300) {
// 结果包括4个部分：行，头，空行，体
console.log(xhr.status); // 响应行状态码
console.log(xhr.statusText); // 响应行状态码字符串
console.log(xhr.getAllResponseHeaders()) // 所有响应头
console.log(xhr.response); // 响应体
// 响应体显示在容器里
result.innerHTML = xhr.response
}
}
}
}
提示1：每行代码都有注释，不需要语法解释了；
提示2：onreadystatechage 是响应状态改变事件，即当 readystate 改变就触发；
on 是当...的时候
readystate 是 xhr 的属性，表示响应状态有5个值： 0，1，2，3，4
change 改变
readystate：存有XMLHttpRequest的状态从0到4发生变化。
0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成，且响应已就绪
要判断是 readystate === 4 时，表示都就绪了；
提示3：xhr.status 是表示HTTP请求响应的状态码，[200-300) 之间表示状态码为成功；不包括300；
200 服务器响应正常
400 无法找到请求资源
403 没有权限访问
404 访问的资源不存在
500 服务器内部错误
提示4：返回的结果包含的4个部分：响应行、响应头、空行、响应体；
响应行： 是形如这样的 “HTTP/1.1 200 OK”
xhr.status ：是状态码，这里是200；
xhr.statusText : 是状态码字符串，这里是 OK；
响应头： xhr.getAllResponseHeaders() ，只会显示一部分响应头；
响应体： xhr.response
提示5：把响应体的内容赋值给 result.innerHTML 渲染到页面上；
控制台结果：
响应行：状态码 和 状态码字符串 显示正常；
响应头：只显示了内容长度和内容类型；
响应体：就是在Web服务器中设置的响应体内容；
页面效果：没有问题；
交互信息：
响应行和响应头：
响应体：
GET请求传参
一般使用搜索都在URL后加上“?”来传参；
参数的形式写成: ?参数名=参数值&参数名=参数值
在AJAX里GET请求传递参数也是在URL后追加 ?a=1&b=2&c=3 这种形式；
xhr.open('GET', 'http://127.0.0.1:8000/server?a=1&b=2&c=3')
还以上面GET请求为例，改下这段 xhr.open() ，看下效果：
