AJAX2.0
1.formdata:控制提交数据,文件上传;
2.cors:跨域
formdata 基础
//formdata 常用的方法
let data = new FormData();
data.set(key,value)//设置一个key与value但是key重复的话value就会被覆盖
data.append(key,value)//设置一个key与value,key重复的话value不会被覆盖
data.get(key)
data.getAll(key)//使用append设置后,需要使用getALL获取所有value
data.delete(key)
//使用formdata主要是用来上传文件,通常都是POST方法
formdata数据提交
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function (){
let oUser=document.getElementById('user');
let oPass=document.getElementById('pass');
let oF=document.getElementById('f1');
let oBtn=document.getElementById('btn1');
//点击提交后创建FormData对象
oBtn.onclick=function (){
let data=new FormData();
//设置普通数据的key与value
data.set('user', oUser.value);
data.set('pass', oPass.value);
//文件数据使用循环append传到data中
//oF.files是个伪数组,里面元素为上传的所有文件,
Array.from(oF.files).forEach(file=>{
data.append('f1', file);
});
//新建AJAX
let oAjax=new XMLHttpRequest();
//AJAX 提交POST请求,发送data到指定url,true为开启异步
oAjax.open('POST', `http://localhost:8080/api`, true);
oAjax.send(data);//发送数据
//ajax回调函数
oAjax.onreadystatechange=function (){
if(oAjax.readyState==4){
if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
alert('成功');
}else{
alert('失败');
}
}
};
};
};
</script>
</head>
<body>
用户：<input type="text" id="user" /><br>
密码：<input type="password" id="pass" /><br>
头像：<input type="file" id="f1" multiple /><br>//添加了multiple表明可以接受多个文件
<input type="button" value="提交" id="btn1">
</body>
</html>
express库简述
安装express
仍然是先初始化cnpm init -Y//-Y 初始化一切默认
然后安装 cnpm i express body-parser multer -D//安装两个模块
使用express写服务器端接收AJAX提交的FormData数据
const express = require('express');//主体
const body = require('body-parser');//用来接收普通POST数据,中间件
const multer = require('multer');//用来接收文件POST数据,中间件
let server = express();
server.listen(8087);
//express的中间件机制,需要把中间件加到服务上
server.use(body.urlencoded({extended:false}));//body-parser中间件加到服务器
let multerObj = multer({dest:'./file/'});//文件接收后放置的路标
server.use(multerObj.any());//将multer加到服务器上,any()声明允许接收所有文件
server.get('/',(req,res)=>{
res.send();//发送响应数据,无需使用end.
})//get方式请求该路径,执行此函数
server.post('/api',(req,res)=>{
//跨域 允许文件路径与localhost访问
if(req.headers['origin']=='null' || req.headers['origin'].startsWith('http://localhost')){
res.setHeader('Access-Control-Allow-Origin', '*');//设置允许跨域
}
res.send("OK");
console.log(req.body); //普通POST数据body-parser带来的body
console.log(req.files); //文件POST数据multer带来的files
})//POST方式请求api路径,执行此函数
server.use('/',(req,res)=>{
})//所有的方式请求路径,都执行此函数
//express自带的中间件,用来实现请求指定文件夹路下的径静态资源
//代替了原生node中我们需要使用fs模块去指定路径下文件的功能。
//开启服务器后,直接使用localhost:8087/文件名,即可自动去指定的(此处是www)下访问该文件
server.use(express.static('./www/'));
跨域CORS
服务器端设置一个响应头 Access-Control-Allow-Origin
res.setHeader('Access-Control-Allow-Origin','*')//*代表一切跨域行为都允许
浏览器发送的req头中有origin其中包含访问的域名(如果是文件域就是null),
对该属性的值进行判断,即可实现指定域名的跨域.使用req.headers['origin']来获得该值
拖拽上传文件
事件:
ondragenter 拖动进入事件
ondragleave 拖动离开事件
ondragover 拖动悬停事件//在此事件中需要阻止默认事件,ondrop事件才会发生
let oDiv = document.getElementById('div');
oDiv.ondrop = function(ev){
console.log(ev.dataTransfer.files);//上传的文件列表,循环遍历append到formdata对象中即可.
} //拖动松开事件,此事件也需要阻止默认事件,否则浏览器会打开拖拽的文件,
扩展
H5扩展了input type='file'的多个文件上传
<input type='file' id='f1' multiple>//添加了multiple表明可以接受多个文件
var f1 = document.getElementById('f1');
f1.files //即可获取所有的文件
跨域本不存在
跨域是浏览器的阻止行为导致的,服务器依然可以收到数据(QAQ 好特么神奇);
并且数据成功返回,只是浏览器没有显示出来.
网友评论