1.使用JQuery实现文件上传
1.定义ui结构
2.验证是否选择了文件
3.向FormData中追加文件
4.使用jquery发起上传文件的请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery.js"></script>
</head>
<body>
<input type="file" id="file1">
<button id="btn">上传文件</button>
<br>
<img src="./loading.gif" style="display: none;" id="loading" alt="">
<script>
$(function(){
// 监听ajax请求被发起了 会监听当前页面中所有的ajax请求
$(document).ajaxStart(function(){
$('#loading').show()
})
$(document).ajaxStop(function(){
$('#loading').hide()
})
$('#btn').on('click',function(){
var files = $("#file1")[0].files;
if(files.length <= 0){
return alert('请选择文件后再上传');
}
// 追加到FormData中
var fd = new FormData();
fd.append('avatar',files[0]);
// 发起JQuery的ajax请求 上传文件
$.ajax({
method:'POST',
url:'http://www.liulongbin.top:3006/api/upload/avatar',
data:fd,
// 不修改Content-Type属性 使用FormData默认的Content-Type
contentType:false,
// 不对FormData中的数据进行url编码,而是将FormData数据原样发送到服务器
processData:false,
success:function(res){
console.log(res)
}
})
})
})
</script>
</body>
</html>
2.axios
网址:http://www.axios-js.com/
Axios是专注于网络数据请求的库
相比于原生的XMLHttpRequest对象,axiios简单易用
相比于JQuery,axios更加轻量化,只专注于网络请求
axios发起GET请求
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 上面的请求也可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
axios发起Post请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
直接使用axios发送请求
// 发送 POST 请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- <script src="./js/axios.min.js"></script> -->
</head>
<body>
<button id="btn1">发起GET请求</button>
<button id="btn2">发起Post请求</button>
<button id="btn3">直接使用axios发起GET请求</button>
<button id="btn4">直接使用axios发起Post请求</button>
<script>
document.querySelector("#btn3").addEventListener('click',function(){
var url = 'http://www.liulongbin.top:3006/api/get';
var paramsObj = {name:'zs',age:12};
// console.log(axios)
// axios.get(url,{params:paramsObj}).then(function(res){
// console.log(res)
// })
axios({
method:'GET',
url:url,
params:paramsObj
})
.then(function(res){
console.log(res)
})
})
document.querySelector("#btn2").addEventListener('click',function(){
var url = 'http://www.liulongbin.top:3006/api/post';
var dataObj = {address:"北京",location:"昌平区"};
axios.post(url,dataObj).then(function(res){
console.log(res.data)
})
})
</script>
</body>
</html>
3.同源策略
1.什么是同源
如果两个页面的协议,域名和端口都相同,这两个页面具有相同的源
2.同源策略
同源策略是浏览器提供的一个安全功能
4.跨域
1.什么是跨域
同源指的是两个URL的协议、域名、端口一致,反之就是跨域
出现跨域的原因:浏览器的同源策略不允许非同源的URL之间进行资源的交互
网页:httP://www.test.com/index.html
接口:http:www.xx.com/index
浏览器允许发送跨域请求,但是跨域请求回来的数据,会被浏览器拦截,无法被网页获取到
2.解决跨域
JSONP和CORS
JSONP可以兼容低版本,被迫想出来的一种临时解决方案 缺点:只支持GET请求,不支持POST请求
CORES是W3C标准属于跨域Ajax请求的根本解决方案,支持GET和POST请求 缺点:不兼容低版本的浏览器
3.JSONP
是通过script标签的src属性解决跨域
4.JSONP原理
由于浏览器同源策略限制,网页中无法通过ajax请求非同源的接口数据,但是script标签不受浏览器同源策略的影响,可以通过src属性,请求非同源的js脚本
原理:是通过script标签的src属性请求跨域的数据接口,并通过函数调用的形式,接收跨域接口响应回来的数据
简单的jsonp请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function abc(data){
console.log("data数据");
console.log(data);
}
</script>
<script src="http://www.liulongbin.top:3006/api/jsonp?callback=abc&name=zs&age=12"></script>
</body>
</html>
jquery发起jsonp请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery.js"></script>
</head>
<body>
<button id="btn">发起jsonp请求</button>
<script>
$(function(){
$("#btn").on('click',function(){
$.ajax({
url:"http://www.liulongbin.top:3006/api/jsonp?name=zs&age=12",
dataType:'jsonp',
success:function(res){
console.log(res)
}
})
})
})
</script>
</body>
</html>