Ajax基本框架搭配koa2的笔记
2021-05-11 本文已影响0人
似朝朝我心
ajax可以做什么？
ajax可以实现局部刷新(对部分网页内容进行更新)和异步操作(ajax在http响应没有结束的时候，可以继续进行后续操作，从而提高用户体验)
ajax的需求：下拉刷新列表，上拉加载更多列表，检验用户名是否被注册
如何使用ajax?
(1)首先创建XMLHttpRequest实例
let xhr = new XMLHttpRequest();
Ajax通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的json数据后，再进行处理，XMLHttpRequest对象是Ajax的主要接口，用于浏览器和服务器之间的通信。
(2)监听请求是否成功完成。
xhr实例下的onload事件，用来监听请求是否已经成功完成，onload事件一旦触发，则代表请求完成。
xhr.onload = function(){
console.log('请求已经完成')
}
(3)发出HTTP请求。
xhr.open('GET','http://localhost/list',true) //三个参数：请求方式、请求的URL、是否开启异步（默认可省为异步，false为同步）
xhr.send()
xhr实例创建成功后，使用open()方法连接请求和send()方法发出HTTP请求。
什么是koa?
koa是node平台的下一代web框架。
koa安装：npm install -g koa-generator
koa项目创建：
（koa项目分成1.0版本和2.0版本，就像vue的脚手架一样，分成2.0和3.0）
koa2 [项目名]
cd [项目名]
npm i 安装依赖
npm run dev 启动koa框架
http://localhost:3000/ 访问
koa框架的路径是可以通过浏览器直接访问的，public目录是我们的访问资源,非常方便
koa框架自带了路由
使用koa框架发送ajax实例
GET方式
HTML页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
let xhr = new XMLHttpRequest()
xhr.onload = function(){
console.log('向服务器请求已经完成')
}
xhr.open('GET','/list',true)
xhr.send()
</script>
</body>
</html>
路由配置：/routes/index.js
router.get('/list', async (ctx ,next) => {
ctx.body = {
title: 'koa2 json'
}
})
然后npm run dev重启下
POST方式：
<body>
<p>测试</p>
<script type="text/javascript">
let xhr = new XMLHttpRequest()
xhr.onload = function(){
console.log('向服务器请求已经完成')
}
xhr.open('POST','/list2',true)
xhr.send()
</script>
</body>
router.post('/list2', async (ctx ,next) => {
ctx.body = 'list2'
})
异步案例展示
异步就是让你排队的时候不用等
同步案例
同步就是让你耐心等，一个个来排队等。
