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
<https://segmentfault.com/a/1190000012327982#articleHeader2>

还有jQuery中ajax上传的进度条,可以参考:
https://blog.csdn.net/github_37373329/article/details/79270373
<https://blog.csdn.net/github_37373329/article/details/79270373>

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信