【前端43_前后端交互】Ajax、⽹络请求、同步和异步请求、FormData实现⽂
件上传、。。。
⽂章⽬录
Ajax 简单介绍
Ajax 即 “Asynchronous Javascript And XML”（异步 JavaScript 和 XML）
它是⼀项技术，提⾼了⽤户的体验，为什么这么说呢？
场景
举个栗⼦，如果我们做个登录的功能，当⽤户输⼊完姓名后，我需要去请求后台，校验⼀下数据库中是否重名，如果没有 ajax，那么只能通过跳转进⾏后端访问，这个体验太糟糕了。
我们想的是：能否不需要刷新页⾯就可以访问后台接⼝？所以 Ajax 应运⽽⽣。
实例：验证⽤户名输⼊
根据刚才的场景，我们来写⼀下代码。顺便简单介绍 Ajax 的使⽤
前端：
⾸先新建⼀个 XMLHttpRequest 对象
let xhr =new XMLHttpRequest();
然后配置请求参数 xhr.open();，其中 true 是异步，false 是同步，后⾯会说到
xhr.open("get","/checkUserName",true);//true是异步，false是同步
接着接受返还值
let res =JSON.sponseText);
}
发送服务器
xhr.send();
前端校验⽤户名的主要代码如下：
document.querySelector('.inputStyle').onblur=function(){
let xhr =new XMLHttpRequest();
xhr.open('get',`/checkUserName?username=${this.value}`,false)    load=function(){
let res =JSON.sponseText);
console.log(res);
if(res.status ===1){
document.querySelector('.exchange').lor ='green' }else{
document.querySelector('.exchange').lor ='red' }
document.querySelector('.exchange').innerHTML = res.info;
}
xhr.send();
}
后端：
<('/checkUserName',async ctx =>{
let ctxUserName = ctx.query.username;
let row = usersData.find((i)=> i.username === ctxUserName);
if(row){
ctx.body ={
status:1,
info:'⽤户名正确'
}
}else{
ctx.body ={
status:0,
info:'⽤户名错误'
}
}
})
先感受⼀下 ajax
⽹络请求
GET
使⽤如下：
let xhr =new XMLHttpRequest();
xhr.open('get',`/checkUserName?username=${this.value}`,true) load=function(){
console.sponseText);
}
xhr.send();
注意点
get 通过 parmas 传参
get 和 querystring 的问题，通过 url 传参
传参⽅式
如果 get 是这样携带参数的话
// 这⾥传递了⼀个数字： 3
/
/ 就是参数也⽤斜杠 / 给隔开了
xhr.open('get','/getText/3',false);
后台就需要这样去接收，我声明了⼀个叫 id 的变量（这个变量名字也可以随便取），它来接受前端传来的 3
<('/getText/:id', ctx =>{
console.log(ctx.query);// 收不到
console.log(ctx.params);// 收得到
ctx.body ={
info:'请求成功'
}
})
注意：要写这个冒号和名称，不然前端会报错 404 的
POST
前端发送数据是要声明编码格式，设置http正⽂头格式
// 发送数据时候需要设置http正⽂头格式；
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//默认编码
xhr.setRequestHeader("Content-type","multipart/form-data");//⼆进制编码
xhr.setRequestHeader("Content-type","application/json");//json编码
以下是个栗⼦
console.sponseText);
}
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
let data =`username=王五&age=20`
xhr.send(data);
}
后端接收，需要先引⼊ koa-body 框架，然后通过 quest.body 来获取参数
router.post('/postText', ctx =>{
console.quest.body);
ctx.body ={
info:'请求成功'
}
})
前端也可以获得到后端返回的 头部信息
let allRes = AllResponseHeaders();// 获取响应头，有些属性是获取不到的，可以查看 w3c 的⽂档let contentType = ResponseHeader('content-type')
栗⼦如下：
console.sponseText);
let allRes = AllResponseHeaders();// 获取响应头，有些属性是获取不到的，可以查看 w3c 的⽂档        console.log(allRes);
let contentType = ResponseHeader('content-type')
console.log(contentType);
}
let data ={ username:"王五", age:20}
xhr.send(data);
}
编码格式（⾃测笔记）
application/x-www-form-urlencoded
form 表单默认的编码格式如下，如果想设置其他值，在 form 标签上可以这样设置。
enctype="application/x-www-form-urlencoded"
传递数据的样⼦是这样的：
let data =`username=王五&age=20`
multipart/form-data
如果是上传⽂件的话可以⽤
xhr.setRequestHeader("Content-Type","multipart/form-data");//⼆进制编码
application/json
如果是 JSON 的话
xhr.setRequestHeader("content-type","application/json");
那么数据的样⼦就要是这个
let data =JSON.stringify({
username:"王五",
age:20
})
xhr.send(data);
总结
post 是密⽂传输，
他也可以通过 url 来传递参数，
但是这样传递就失去了密⽂传输的意义了，没有⼤⼩显⽰，
服务器可能会显⽰，如果没有限制的话，那就是⽆穷⼤了。
ajax是同步还是异步
在http 正⽂传参，需要（必须）设置编码格式
get
明⽂传输
有⼤⼩显⽰
其他知识补充

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。