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

1.碰到过跨域问题吗，一般跨域问题是怎么解决的？

浏览器都有一个“同源策略”限制，限制了ajax的请求同源策略：表示请求的协议，域名，端口号相同，就是同源，ajax只能访问同源的请求。

同源策略的限制：

1. ajax只能请求同源的地址
2. js只能获取同源的cookie及本地存储
3. js只能操作同源的dom

同源策略的限制，使网络之间相互访问的安全性得到了提高。

方法一：jsonp跨域

原理：虽然同源策略限制了ajax的跨域请求，但是并没有限制标签上的src 和href访问不同域下的资源，jsonp就是利用了这一点。

1.  $.ajax({
    
2.      url: "http://www.kugou.com/yy/index.php?r=play/getdata&_=1497972864535",
    
3.      dataType: 'jsonp',    //设置dataType为jsonp
    
4.      data:{hash: "ECB956D9AD23EC123617F63EC6E90A7F",album_id:"1008922"},   //url后面的参数
    
5.      success: function (data) {
    
6.          console.log(data);
    
7.      }
    
8.  });
    

方法二： 修改响应头

Cross-Origin Resource Sharing（CORS）跨域资源共享是一份浏览器技术的规范，与 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。服务器一般需要增加如下响应头的一种或几种：

1.  //设置跨域访问的中间件
    
2.  router.all('*', function(req, res, next) {
    
3.    res.header("Access-Control-Allow-Origin", "*"); //允许所有的外来地址 都可以访问
    
4.    res.header("Access-Control-Allow-Headers", "X-Requested-With");//检查是不是ajax访问
    
5.    res.header("Access-Control-Allow-Methods", "POST,GET");//允许请求的方法是post 和get
    
6.    res.header("Content-Type", "application/json;charset=utf-8");//设置响应的头部
    
7.    next();
    
8.  });
    

除此之外还有：window.name+iframe的方式， window.postMessage()的方法，修改document.domain跨子域等方法。

2.平时都接触过哪些ajax提交方式，一般什么时候用什么解决方式？

• get  一般用于获取数据的时候
• post  用于创建数据的时候
• put  用于修改数据（不严格的时候也可以不用）
• delete  用于删除数据

3.如何用原生ajax上传图片和文件，一般做下载/上传进度条是怎么做的？**

html部分

1.  <form action="">
    
2.          <label for="">
    
3.              姓名: <input type="text" name="name">
    
4.          </label>
    
5.          <label for="">
    
6.              文件：<input id="file" type="file" name="file">
    
7.          </label>
    
8.          <label for="">
    
9.              <input type="button" value="保存">
    
10.          </label>
    
11.  </form>
    
12.  <script>
    
13.  var btn = document.querySelector('[type=button]');
    
14.  btn.onclick = function () {
    
15.      // 文件元素
    
16.      var file = document.querySelector('[type=file]');
    
17.      // 通过FormData将文件转成二进制数据
    
18.      var formData = new FormData();
    
19.      // 将文件转二进制
    
20.      *****注意2******
    
21.      formData.append('upload', file.files[0]);
    
22.      *****注意1******
    
23.      var xhr = new XMLHttpRequest;
    
24.      xhr.open('post', 'file.php');
    
25.      // 监听上传进度
    
26.      xhr.upload.onprogress = function (ev) {
    
27.      // 事件对象
    
28.      // console.log(ev);
    
29.          var percent = (ev.loaded / ev.total) * 100 + '%';
    
30.          console.log(percent);
    
31.          progress.style.width = percent;
    
32.      }
    

34.      xhr.send(formData);
    

36.      xhr.onreadystatechange = function () {
    
37.              if(xhr.readyState == 4 && xhr.status == 200) {
    
38.                      //成功时执行的代码
    
39.              }
    
40.      }
    
41.  }
    
42.  </script>
    

 注意一：使用jQuery的ajax，必须设置这两项：processData: false, contentType: false 为false。

1.  $.ajax({
    
2.      url: 'file.php',
    
3.      type: 'POST',
    
4.      data: formdata,                    // 上传formdata封装的数据
    
5.      dataType: 'JSON',
    
6.      cache: false,                      // 不缓存
    
7.      processData: false,                // 必须false，jQuery不要去处理发送的数据
    
8.      contentType: false,                // 必须false，jQuery不要去设置Content-Type请求头
    
9.      success:function (data) {          // 成功回调
    
10.          console.log(data);
    
11.      }
    
12.  });
    

注意二：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