共计 2637 个字符，预计需要花费 7 分钟才能阅读完成。
1. 碰到过跨域问题吗，个别跨域问题是怎么解决的？
浏览器都有一个“同源策略”限度，限度了 ajax 的申请同源策略：示意申请的协定，域名，端口号雷同，就是同源，ajax 只能拜访同源的申请。
同源策略的限度：
- ajax 只能申请同源的地址
- js 只能获取同源的 cookie 及本地存储
- 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