乐趣区

关于面试:前端常见面试题总结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

退出移动版