1.前言
在自学CSS的时候发现form这个表单标签 form，每次提交，都会刷新页面 ，数据重复请求，页面出现闪动，这样会增加后台的压力。学到后面发现ajax这个东西，页面不用刷新，就可以刷新界面数据 ，实时进行数据交互(异步的)，然后自己无聊手动搭建一个后台模拟下ajax的数据交互。
2 .准备工作
首先在node.js官网上下载并安装好node.js
安装完毕后 直接win+R 打开cmd
输入node -v即可出现node.js的版本
然后在电脑属性的环境变量path中添加npm的地址
接下来就是开启本地服务器了
有两种方法
方法一
1.输入命令行npm install anywhere -g 这里是全局变量
2.找到并进入要启动本地服务器的静态文件夹，执行命令：anywhere 它就会自动弹出你的项目页面
显示在8000端口
方法二
安装Visual Studio Code
然后在里面安装插件Live Server
然后在vscode编辑器的右下角有就会出现一个Go live 按钮，点击即可自动启动本地服务器
启动中…
自动弹出在本地的5500端口
3.模拟思路
众所周知
ajax 是一种创建交互式网页应用的一门 网页开发技术
ajax 也是一个对象 毕竟js万物皆对象
所以在模拟之前 我们要套入一个生活中买东西的实例
1 产生买东西的念头 (生成一个ajax对象 创建ajax实例)
let xhr = new XMLHttpRequest()
2 怎么买 买的方式(获取数据的方式)
xhr.open(method,url,bool) (里面有三个参数)
method =>请求方式
(以下这两种获取方式都不安全 都需要进行处理)
get 拿数据 =>查找 //默认方式
输送的数据会在 url的后面拼接
post 提交数据 => 增加
提交的数据在network内可以监控 显示
url =>请求后台地址 （ 存在跨域问题 ）
(一个服务器相当于一栋大楼，每一层都是不同的域名，
不同的楼层不能互相访问，
每一层的房间都是不同的数据接口(端口)，
不同的端口也不能互相访问）
bool => 同步异步 默认异步 true
3.进行下单 得把你的客户信息发送出去
xhr.send("wd=卡比&age=18") (比如姓名和年龄)
4.检测物流 (目的 拿快递 拿数据)能拿到快递的前提是
客户不出现问题以及物流不出现问题
自身原因
xhr.readyState的4个状态：
1.服务已建立
2.请求已接收
3.请求处理中
4.请求已完成
只有到达状态4 才会成功
物流追踪系统 实时更新状态改变de方法
xhr.onreadystatechange = function(){}
物流原因(成功) => 本身指向服务器 服务器存在http状态码
举下大家最熟悉的状态码： 404 not found
（2开头 全部成功 304也是ok的）
1 开头 =>消息
2 成功
3 重定向 304也是成功的
4......手动百度 http状态码
http状态码:
5.拿快递 在快递柜里面拿到东西(获取数据)
xhr.response => 后台返回数据
4.node需要安装的包
补充！！需要安装的node.js 所需包
可以找到并进入要启动本地服务器的静态文件夹中使用PowerShell
或者
在Vscode中新建终端
1.node初始化一些操作 即初始化一个项目
在终端输入 npm init
其实就是新建一个package.json的文件来存放依赖
即：
2.需要安装koa模块
在终端输入命令 npm i -S koa
安装完毕后会显示node_modules这个文件
然后把跨域的模块引入进来 （解决跨域问题）
在终端输入命令 npm i -S @koa/cors@2
成功后会显示@koa这个文件
一切准备就绪
5.源代码
html的代码：
<script>
//下面四行可忽略不看
//后台数据传输普遍写法
//let json = JSON.stringify({name:123})//返回的就是JSON格式的一个对象
//let obj = JSON.parse(json) //把一个JSON转为一个普通对象
//console.log(obj);
//创建ajax实例
let xhr = new XMLHttpRequest()//生成一个ajax对象
console.log(xhr);
// 设置 与后台交互的方式 后台的接口方式
xhr.open ('GET','http://127.0.0.1:5500/')
//第一个参数是获取数据的方式 第二个参数是后台地址
//xhr.setRequestHeader("Content-Type:","text/html; charset=utf-8")
//上面的方法是 post获取方法 需要设置请求头
xhr.send("wd=卡比&age=1")// 传输两条数据 服务建立
xhr.onreadystatechange = function(){
if(xhr.readyState ===4){//个人成功了
//200 ~299 304
if(xhr.status){//服务器也要成功
if(xhr.status >=200 && xhr.status<300||xhr.status ===304){
//都成功 可以拿快递了
console.log(xhr);
console.log(xhr.response);//快递柜
}
}
}
}
</script>
.js的代码
let Koa = require("koa")//把koa这个模块请求出来
let cors = require("@koa/cors")//解决跨域问题
let app = new Koa()
app.use(cors())//允许跨域 实行后才能跨域访问5500端口
app.use(async data =>{
data.body = "<p style='color:red'>我是从后台返回的数据</p>"
})
app.listen(5500)
console.log("程序已经启动，运行在5500端口");
运行结果展示
6.总结
虽然整篇文章没什么技术含量，跟在学校写的报告没什么两样，不过这是我自学的，也是我写的第一篇文章，只是为了让自己记住这些知识所写的。我发现写文章比打游戏更能缓解焦虑。
