目录

1.重点掌握及知识要点

2.登录简单回顾

3.利用ajax来解决验证用户名问题

3.1ajax的基本使用

3.2案例实现通过ajax异步无刷新验证用户名

4.针对ajax的详细解释

4.1get注意点

4.1.1get传参的两种方式&＃xff1a;queryString和/get/id

4.1.2queryString传参方式

4.1.3/get/id传参方式

4.2post传参方式

4.2.1post传参方式注意点

4.2.2post传参方式设置http正文头格式

4.2.3onload()方法中获取返还头部信息

4.2.4完整案例

4.3同步及异步ajax

4.4onload()

5.onreadystatechange——了解

5.1onreadystatechange

5.2readyState

5.3status常用状态码

5.4onreadystatechange示例&＃xff1a; 

5.5onload实现onreadystatechange功能

6.返还数据类型&＃xff08;XML,Json&＃xff09; 

6.1获取原始数据xhr.response

6.2返还数据为json时xhr.responseText

6.3返还数据为json时&＃xff0c;xhr.responseXML来获取 

7.利用FormData对象来实现文件上传

7.1 创建FormData对象

7.2 监控上传进度——upload 事件

7.2.1upload事件下的各种事件——事件钩子

7.2.2监控文件上传进度示例

8.回顾

1.重点掌握及知识要点

## 重点掌握

1. 理解ajax基本使用
2. 会使用XMLHttpRequest对象实现数据交互
3. 了解onreadystatechange服务器响应信息(状态码)
4. 会使用FormData对象上传文件
5. 了解upload事件对象&＃xff08;XMLHttpRequest下的事件对象&＃xff09;

## 知识要点

1. ajax使用
2. XMLHttpRequest对象
3. FormData对象
4. upload 事件对象

2.登录简单回顾

1. 提出ajax验证用户名需求&＃xff1b;
2. 验证错误后&＃xff0c;如果通过跳转解决很麻烦&＃xff1b;
3. 各种跳转用户体验差

3.利用ajax来解决验证用户名问题

ajax是&＃xff1a; Ajax即“Asynchronous Javascript And XML”&＃xff08;异步 Javascript 和 XML&＃xff09;

3.1ajax的基本使用

• 新建XMLHttpRequest对象&＃xff1b;

 let xhr &＃61; new XMLHttpRequest();

• 配置请求参数

 xhr.open("get","/checkUser",true); //true是异步&＃xff0c;false是同步

• 接收返还值

  xhr.onload &＃61; function(){let res &＃61; JSON.parse(xhr.responseText);}

• 发送服务器请求

xhr.send();

3.2案例实现通过ajax异步无刷新验证用户名

注意&＃xff1a;

1. 通过 XMLHttpRequest对象中open()方法发起请求。xhr.open("get","/checkUser?username&＃61;"&＃43;this.value,true); //true表示异步发送请求&＃xff0c;false同步发送请求&＃xff0c;默认为false&＃xff0c;所以必须设置为true。
2. 通过 XMLHttpRequest对象中onload()方法获取返还数据。注意返回数据是从XMLHttpRequest对象中获得的&＃xff0c;xhr.responseText&＃xff08;获取json数据&＃xff09;和xhr.response&＃xff08;获取原始数据&＃xff09;&＃xff0c;xhr.responseXML&＃xff08;获取XML数据&＃xff09;都可以获取返还数据
3. 获取到的数据是JSON格式的&＃xff0c;需要将其转为对象。JSON.parse(xhr.responseText).msg
4. 后台接收queryString参数通过cxt.query接收&＃xff1b;如果是post普通数据传参只需引入koa-body模块&＃xff0c;后台通过ctx.request.body接收&＃xff1b;如果是post传参且上传文件需引入koa-bodyparser &＃xff0c;然后通过ctx.request.body接收

 login.css:

.loginContainer{margin: 0 auto;width: 600px;text-align: center;padding-top: 20px;padding-bottom: 50px;border: 1px solid;
}
.loginContainer input{margin-bottom: 20px;
}
.loginStyle{width: 160px;height: 40px;background: rgb(50,203,77);color: white;font-size: 17px;
}
.inputStyle{width: 200px;height: 30px;padding: 5px;outline: none;
}.inputStyle:focus{border: 1px solid rgb(50,203,77);
}
form{position: relative;
}
.exchange{position: absolute;top:8px;right: 65px;color: red;display: none;
}

user.json:

[{"id":1,"username":"zhangsan","pwd":"123"},{"id":2,"username":"lisi","pwd":"123"}
]

 login.js:

const Koa &＃61; require("koa");
const Router &＃61; require("koa-router");
const static &＃61; require("koa-static");
// const views &＃61; require("koa-views");
const userData &＃61; require("./data/user.json");let app &＃61; new Koa();
let router &＃61; new Router();app.use(static(__dirname &＃43; "/static"));
//前面页面直接放到static里时&＃xff0c;只能通过login.html访问&＃xff0c;不能通过/直接访问
router.get("/checkUser", (ctx, next) &＃61;> {// 注意接收queryString参数通过cxt.query获得&＃xff1b;如果是post传参需引入koa-bodyparser &＃xff0c;然后通过ctx.request.body接收let username &＃61; userData.find(item&＃61;>item.username &＃61;&＃61;&＃61; ctx.query.username);console.log(ctx.query);if(username){// node.js会自动将对象转为json传给前端&＃xff0c;所以不用再进行转换ctx.body &＃61; {status:1,msg:"用户名正确"};}else{ctx.body &＃61; {status:0,msg:"用户名错误"};}
});app.use(router.routes());
app.listen("9090");

login.html:

通过http://localhost:9090/login.html即可请求道login.html页面 

4.针对ajax的详细解释

很多ajax框架都是基于XMLHttpRequest对象去实现的&＃xff0c;但是很多框架也都存在一定问题&＃xff0c;如axiso就不能实现文件或图片上传。

4.1get注意点

• get通过parmas传参
• get和querystring的问题&＃xff0c;通过url传参

a标签&＃xff0c;img标签中的src和script标签中的src都是使用get请求

4.1.1get传参的两种方式&＃xff1a;queryString和/get/id

1. queryString&＃xff0c;通过queryString传参有长度限制&＃xff0c;默认为2048
2. /get/id

传参方式注意点&＃xff1a;

• querystring传参和get/post请求方式是两个概念&＃xff0c;不是使用querystring传参就是get请求&＃xff0c;post也可以通过querystring进行传参&＃xff1b;通过ctx.query获取传递过来的参数。
• 通过querystring方式进行传参时&＃xff0c;后台接收地址不受影响&＃xff1b;但如果使用/get/id方式传参&＃xff0c;后台必须通过/get/:id方式接收参数&＃xff0c;并通过ctx.params获得参数值&＃xff1b;

4.1.2queryString传参方式

如上例。

注意queryString传参方式&＃xff0c;通过ctx.query获取传递过来的参数。

4.1.3/get/id传参方式

传参方式&＃xff1a;‘/请求地址/参数’ 

接收参数&＃xff1a;‘/请求地址/:参数’ 接收地址&＃xff0c;使用ctx.params获取参数值

点击发送get请求


login.js:get请求(/get/id传参方式)

//get请求(/get/id传参方式)
router.get("getInfo","/getInfo/:id",ctx&＃61;>{console.log(ctx.params);//{ id: &＃39;1&＃39; }ctx.body &＃61; {status:1,msg:"请求成功"};
});

4.2post传参方式

post传参方式&＃xff0c;如果需要发送数据&＃xff0c;需要通过send(data)方法进行发送&＃xff0c;发送给的数据是通过http正文头发送。

且post传参方式&＃xff0c;node.js后台需要使用koa-body进行接收&＃xff0c;ctx.request.body获取参数。

注意&＃xff1a;如果post请求方式通过queryString方式传参&＃xff0c;就需要通过ctx.query获取参数。

4.2.1post传参方式注意点

• post一般不通过queryString进行传参&＃xff0c;因为queryString传参有长度限制(服务器会限制)&＃xff0c;默认2048。
• 发送数据时候需要设置http正文头格式&＃xff1a;post传参是通过HTTP正文进行传参&＃xff0c;正文传参必须设置编码格式。同form表单的默认编码格式    。form表单中可以省略&＃xff0c;但是ajax请求时不能省略。
• 需要手动设置正文头&＃xff0c;setRequestHeader()的content-type为json且发送的数据通过JSON.stringtify()进行处理&＃xff0c;传递过去的数据node才会以对象进行接收。如果没有设置也可以接收&＃xff0c;但是需要通过queryString模块ctx.query进行处理&＃xff0c;但是前端这样传递数据不好。

注意点&＃xff1a;

1. 发送数据时候需要设置http正文头格式&＃xff1b;
2. 获取头部信息&＃xff1a;getAllResponseHeaders  或者是getResponseHeader &＃xff1b;

4.2.2post传参方式设置http正文头格式

发送数据时候需要设置http正文头格式&＃xff1a;

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  //默认编码
xhr.setRequestHeader("Content-type","multipart/form-data");  //二进制编码&＃xff0c;上传文件时使用
xhr.setRequestHeader("Content-type","application/json");  //json编码&＃xff1a;传输数据也需要时JSON格式

示例&＃xff1a;注意使用post请求时&＃xff0c;后台必须使用koa-body模块&＃xff0c;才能获取到参数

http正文头格式为默认编码时&＃xff1a;

点击发送post请求


http正文头格式设置为JSON时&＃xff1a;如果正文头是JSON格式&＃xff0c;则传输数据也需要是json格式&＃xff0c;必须使用JSON.stringify()将数据转为json格式

//正文请求头设置为json时&＃xff0c;传输数据也需要是JSON格式xhr.setRequestHeader("content-type","application/json; charset&＃61;utf-8");let data &＃61; JSON.stringify({username:&＃39;zs&＃39;,age:12});

后台获取post参数&＃xff1a;需要引入koa-body&＃xff0c;然后通过ctx.request.body接收参数 

注意&＃xff1a;ctx.body是ctx.response.body的别名&＃xff0c;而ctx.request.body是post的传参。

const koaBody &＃61; require("koa-body");
app.use(koaBody());
//post请求
router.post("/getPostInfo",ctx&＃61;>{console.log(ctx.request.body);//{ username: &＃39;zs&＃39;, age: &＃39;20&＃39; }ctx.body &＃61; {status:1,msg:"请求成功"};
});

4.2.3onload()方法中获取返还头部信息

getAllResponseHeaders()获取所有头部信息&＃xff08;某些属性有可能会获取不到&＃xff0c;大部分都能获取&＃xff09;  或者是getResponseHeader("请求头属性") 获取某个头部信息

xhr.onload &＃61; function(){console.log(xhr.responseText);//{"status":1,"msg":"请求成功"}//获取所有头部信息console.log(xhr.getAllResponseHeaders());//获取某个头部信息console.log(xhr.getResponseHeader("content-type"));//application/json; charset&＃61;utf-8}

4.2.4完整案例

ajax_post.html&＃xff1a;





点击发送post请求



login.js:

app.use(koaBody());
//post请求
router.post("/getPostInfo",ctx&＃61;>{console.log(ctx.request.body);//{ username: &＃39;zs&＃39;, age: &＃39;20&＃39; }ctx.body &＃61; {status:1,msg:"请求成功"};
});

 结果&＃xff1a;所有头部信息

date: Wed, 18 Sep 2019 01:59:50 GMT
connection: keep-alive
content-length: 33
content-type: application/json; charset&＃61;utf-8

4.3同步及异步ajax

• 设置异步的请求不会影响其他请求或代码的执行&＃xff1b;
• 当设置同步执行时&＃xff0c;其后其他请求或代码必须等该请求执行完后&＃xff0c;才会进行执行

异步&＃xff1a;设置异步的请求不会影响其他请求或代码的执行

按钮一按钮二


结果&＃xff1a;按钮一的请求不会影响按钮二的打印结果(测试时网速太快看不到效果&＃xff0c;可以将Network中的online网络改为slow3G再测)

异步&＃xff1a;当设置同步执行时&＃xff0c;其他请求或代码必须等该请求执行完后&＃xff0c;才会进行执行

xhr.open("get","/getInfo/2",false);

 结果&＃xff1a;永远都只会先打印按钮一发送的请求后再执行按钮二的请求

4.4onload()

以前是使用onreadystatechange后&＃xff0c;通过readyState的状态判断是否请求完毕&＃xff0c;现在使用onload()更加简洁方便。

onload()方法是异步的&＃xff0c;即使写在send()方法前面也会再send()方法执行后才会执行&＃xff0c;一般习惯上会将send()方法放在最后面。因为很多东西必须在send()之前设置才有用&＃xff0c;如setRequestHeader()就必须在send()之前设置。

5.onreadystatechange——了解

5.1onreadystatechange

onreadystatechange&＃xff1a;存有处理服务器响应的函数&＃xff0c;每当 readyState 改变时&＃xff0c;onreadystatechange 函数就会被执行。

5.2readyState

readyState&＃xff1a;存有服务器响应的状态信息。

• 0: 请求未初始化&＃xff08;代理被创建&＃xff0c;但尚未调用 open() 方法&＃xff09;
• 1: 服务器连接已建立&＃xff08;&＃96;open&＃96;方法已经被调用&＃xff09;
• 2: 请求已接收&＃xff08;&＃96;send&＃96;方法已经被调用&＃xff0c;并且头部和状态已经可获得&＃xff09;
• 3: 请求处理中&＃xff08;下载中&＃xff0c;&＃96;responseText&＃96; 属性已经包含部分数据&＃xff09;
• 4: 请求已完成&＃xff0c;且响应已就绪&＃xff08;下载操作已完成&＃xff09;

5.3status常用状态码

5.4onreadystatechange示例&＃xff1a; 

点击


5.5onload实现onreadystatechange功能

其实&＃xff0c;使用onload也有服务器响应信息和返回状态码&＃xff1a;建议使用onload会更加简洁

xhr.onload &＃61; function(){console.log(xhr.readyState);//4console.log(xhr.status);//200console.log(xhr.responseText);//{"status":1,"msg":"请求成功"}}

6.返还数据类型&＃xff08;XML,JSON&＃xff09; 

前端和后台之前&＃xff0c;平台和平台之间数据传输都会使用同一的数据格式&＃xff0c;现在主流的数据跨平台交互有XML和JSON。

6.1获取原始数据xhr.response

//获取原始数据
console.log(xhr.response);

6.2返还数据为json时xhr.responseText

• 服务器返还json数据&＃xff1a;xhr.responseText 来获取

xhr.responseText //来获取

6.3返还数据为json时&＃xff0c;xhr.responseXML来获取 

• 服务器返还xml数据 &＃xff1a;

1. xhr.responseXML //获取值
2. 服务器端设置response里的content-type内容ctx.set("content-type","text/xml");
3. 前端重写XML(以防后台没有指定content-type类型)&＃xff1a;xhr.overrideMimeType(&＃39;text/xml;charset&＃61;utf-8&＃39;);注意属性之间不能有空格
4. 前端和服务器端随便那边设置返还数据格式即可&＃xff0c;不需要都设置

xhr.responseXML //获取值

 示例&＃xff1a;

前端HTML:

点击获取XML数据


后台&＃xff1a;

//获取XML数据
router.get("/getXMLInfo",ctx&＃61;>{ctx.set("content-type","text/xml");//注意这里反引号和xml内容不能换行ctx.body &＃61; &＃96;nodeJS实战52.0元react进阶56.0元&＃96;;
});

 结果&＃xff1a;

为防止后台没有写XML的content-type,需要在前端重写XML格式&＃xff1a;

xhr.overrideMimeType(&＃39;text/xml;charset&＃61;utf-8&＃39;);

7.利用FormData对象来实现文件上传

7.1 创建FormData对象

注意点&＃xff1a;

1. 通过files属性获取到的是类数组&＃xff1b;
2. 通过new FormData()创建文件上传对象&＃xff1b;
3.  formData.append(name,value);name必须和后台接收时name保持一致&＃xff0c;value可以是文件也可以是普通数据
4. 文件上传必须通过正文方式进行传递&＃xff0c;所以必须使用post请求&＃xff1b;
5. 使用FormData时会自动对content-type进行设置&＃xff0c;就不需要再进行手动设置
6. 后台接收数据时&＃xff0c;通过前端append()中的name属性即可获取到对应数据或文件
7. 再通过fs模块对相应文件进行转存即可。ctx.request.files.img.path即文件的临时路径&＃xff0c;对临时路径中的文件转存到服务器下路径即可
8. 文件转存时有可能出现文件夹权限问题&＃xff0c;需要手动开启权限。且文件夹不存在&＃xff0c;需要先创建文件夹

示例&＃xff1a;

前端&＃xff1a;注意上传文件是通过正文提交&＃xff0c;所以必须使用post方式





点击上传



后台&＃xff1a;获取上传文件必须使用mutipart:ture&＃xff1b;通过ctx.request.files.img获取文件

const Koa &＃61; require("koa");
const Router &＃61; require("koa-router");
const static &＃61; require("koa-static");
const koaBody &＃61; require("koa-body");
const fs &＃61; require("fs");let app &＃61; new Koa();
let router &＃61; new Router();
app.use(static(__dirname &＃43; "/static"));
//上传文件时&＃xff0c;必须设置允许文件上传&＃xff0c;否则接收不了
app.use(koaBody({multipart:true
}));//上传文件
router.post("/upload",ctx&＃61;>{//通过前端append()中的name属性即可获取到对应数据或文件// console.log(ctx.request.body);//{ username: &＃39;张三&＃39; }// console.log(ctx.request.files.img);//通过fs模块对相应文件进行转存即可//ctx.request.files.img.path即文件的临时路径&＃xff0c;对临时路径中的文件转存到服务器下路径即可let fileData &＃61; fs.readFileSync(ctx.request.files.img.path);//文件转存时有可能出现文件夹权限问题&＃xff0c;需要手动开启权限//判断文件夹不存在&＃xff0c;需要先创建文件夹if(!fs.existsSync("static/imgs")){fs.mkdirSync("static/imgs/");}fs.writeFileSync("static/imgs/"&＃43;ctx.request.files.img.name,fileData);ctx.body &＃61; {status:1,msg:"文件上传成功"};
});app.use(router.routes());
app.listen("8888");

 结果&＃xff1a;{"status":1,"msg":"文件上传成功"}

7.2 监控上传进度——upload 事件

7.2.1upload事件下的各种事件——事件钩子

以下事件都是在upload事件下&＃xff1a;

• onloadstart   上传开始
• onprogress  数据传输进行中&＃xff08;evt.total &＃xff1a;需要传输的总大小&＃xff1b;evt.loaded :当前上传的文件大小&＃xff1b;&＃xff09;
• onabort 上传操作终止&＃xff08;取消上传xhr.abort()&＃xff09;
• onerror  上传失败
• onload 上传成功
• onloadend 上传完成&＃xff08;不论成功与否&＃xff09;

7.2.2监控文件上传进度示例

注意点&＃xff1a;

• 使用标签可以显示文件上传进度
• 监控文件上传速度&＃xff08;需要onloadstart和onprogress的时间差&＃xff0c;及时间差内文件已上传的文件大小&＃xff09;&＃xff0c;当前文件大小/时间差 即文件上传速度&＃xff1b;时间差需要转为单位为秒
• evt.total &＃xff1a;需要传输的总大小&＃xff1b;evt.loaded :当前上传的文件大小
• 需要处理上传的单位b/s &＃xff0c;判断文件足够大时使用kb/s&＃xff1b;

文件上传页面&＃xff1a;





进度&＃xff1a;  10%  速度&＃xff1a;20b/s

点击上传取消上传



后台处理&＃xff1a;

//监控文件上传进度
router.post("/fileUpload",(ctx,next)&＃61;>{//通过前端append()中的name属性即可获取到对应数据或文件//ctx.request.files.imgFile.path即文件的临时路径&＃xff0c;对临时路径中的文件转存到服务器下路径即可let fileData &＃61; fs.readFileSync(ctx.request.files.imgFile.path);//判断文件夹不存在&＃xff0c;需要先创建文件夹if(!fs.existsSync("static/imgs")){fs.mkdirSync("static/imgs/");}fs.writeFileSync("static/imgs/"&＃43;ctx.request.files.imgFile.name,fileData);ctx.body &＃61; {status:1,msg:"文件上传成功"};
});

 结果&＃xff1a;

8.回顾

1.ajax基本使用&＃xff1a;创建XMLHttpRequest对象&＃xff0c;xhr.open()&＃xff0c;xhr.onload&＃xff0c;xhr.send()

2.get/post在ajax中的使用

3.ajax中成功的返还&＃xff1a;onload

4.返还数据格式&＃xff1a;response&＃xff0c;responseText&＃xff0c;responseXML

5.FormData对象&＃xff1a;创建FormData对象&＃xff0c;form.append(name,value)

6.upload事件对象&＃xff1a;各个监控文件上传的事件方法