1.碰到过跨域问题吗,一般跨域问题是怎么解决的?
浏览器都有一个“同源策略”限制,限制了ajax的请求同源策略:表示请求的协议,域名,端口号相同,就是同源,ajax只能访问同源的请求。
同源策略的限制:
- ajax只能请求同源的地址
- js只能获取同源的cookie及本地存储
- js只能操作同源的dom
同源策略的限制,使网络之间相互访问的安全性得到了提高。
方法一:jsonp跨域
原理:虽然同源策略限制了ajax的跨域请求,但是并没有限制标签上的src 和href访问不同域下的资源,jsonp就是利用了这一点。
$.ajax({
url: "http://www.kugou.com/yy/index.php?r=play/getdata&_=1497972864535",
dataType: 'jsonp', //设置dataType为jsonp
data:{hash: "ECB956D9AD23EC123617F63EC6E90A7F",album_id:"1008922"}, //url后面的参数
success: function (data) {
console.log(data);
}
});
方法二: 修改响应头
Cross-Origin Resource Sharing(CORS)跨域资源共享是一份浏览器技术的规范,与 JSONP 不同,CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。服务器一般需要增加如下响应头的一种或几种:
//设置跨域访问的中间件
router.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*"); //允许所有的外来地址 都可以访问
res.header("Access-Control-Allow-Headers", "X-Requested-With");//检查是不是ajax访问
res.header("Access-Control-Allow-Methods", "POST,GET");//允许请求的方法是post 和get
res.header("Content-Type", "application/json;charset=utf-8");//设置响应的头部
next();
});
除此之外还有:window.name+iframe的方式, window.postMessage()的方法,修改document.domain跨子域等方法。
2.平时都接触过哪些ajax提交方式,一般什么时候用什么解决方式?
- get 一般用于获取数据的时候
- post 用于创建数据的时候
- put 用于修改数据(不严格的时候也可以不用)
- delete 用于删除数据
3.如何用原生ajax上传图片和文件,一般做下载/上传进度条是怎么做的?
html部分
<form action="">
<label for="">
姓名: <input type="text" name="name">
</label>
<label for="">
文件:<input id="file" type="file" name="file">
</label>
<label for="">
<input type="button" value="保存">
</label>
</form>
<script>
var btn = document.querySelector('[type=button]');
btn.onclick = function () {
// 文件元素
var file = document.querySelector('[type=file]');
// 通过FormData将文件转成二进制数据
var formData = new FormData();
// 将文件转二进制
*****注意2******
formData.append('upload', file.files[0]);
*****注意1******
var xhr = new XMLHttpRequest;
xhr.open('post', 'file.php');
// 监听上传进度
xhr.upload.onprogress = function (ev) {
// 事件对象
// console.log(ev);
var percent = (ev.loaded / ev.total) * 100 + '%';
console.log(percent);
progress.style.width = percent;
}
xhr.send(formData);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200) {
//成功时执行的代码
}
}
}
</script>
注意一:使用jQuery的ajax,必须设置这两项:processData: false, contentType: false 为false。
$.ajax({
url: 'file.php',
type: 'POST',
data: formdata, // 上传formdata封装的数据
dataType: 'JSON',
cache: false, // 不缓存
processData: false, // 必须false,jQuery不要去处理发送的数据
contentType: false, // 必须false,jQuery不要去设置Content-Type请求头
success:function (data) { // 成功回调
console.log(data);
}
});
注意二:new FormData的参数是一个DOM对象,而非jQuery对象
var formData = new FormData($("#file")[0]);
参考:https://segmentfault.com/a/1190000012327982#articleHeader2
还有jQuery中ajax上传的进度条,可以参考:https://blog.csdn.net/github_37373329/article/details/79270373