搭建Web服务环境
之前讲过 Express 快速启动Web服务，这里把代码重写一下；
需要复习的同学请看：
AJAX(笔记03) - 原生AJAX - Node.js 和 Express 的简介、安装
Express 简介、安装、使用和案例
新建 server.js 服务文件；
const express = require('express')
const app = express()
app.get('/json-server', (request, response) => {
response.setHeader('Access-Control-Allow-Origin', '*')
let data = {name:"jacky"}
let str = JSON.stringify(data)
response.send(str)
})
app.listen('8000', () => {
console.log('Web服务已经启动，端口8000监听中... ...');
})
提示：新建 json-server 路由，这次响应一个对象数据，发送前将对象数据转化成字符串形式；
启动服务：需在 server.js 目录执行 node 命令；
> node server.js
看到服务已启动字样，代表 Web 服务已经搭建好了；
创建 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 服务器响应JSON数据</title>
<style>
#result {
width: 200px;
height: 100px;
border: 1px solid #358;
}
</style>
</head>
<body>
<button>点击按钮获取JSON数据</button>
<div id="result">
</div>
预览下效果：
需求是点击按钮将服务器的响应体显示在 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：每行代码都有注释，不需要语法解释了；