前端常见面试题总结——ajax部分（四）

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

前端常见面试题总结——ajax部分（四）

猜你喜欢