ajax原理以及六大解决跨域的方法，看完老板哭着让我留下来

readyState：（存有 XMLHttpRequest 的状态。从 0 到 4 发生变化）

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

跨域通信的几种方式

============================================================================

为什么会产生跨域

---

只要：协议、域名、端口（http协议的默认端口是80）。如果有任何一个部分不同，则源不同，那就是跨域了。

跨域是 浏览器行为，并不是服务端的行为

解决原理

---

其实很多跨域原理，都是根据 ，服务器和服务器之间并没有跨域的概念的，因为跨域也是浏览器行为，所以就通过 一般通过 ‘跨过’浏览器的方式

主要有以下几种方式：

=============================================================================

• 1、JSONP (现在已经很少有，只支持get,而且用起来也很麻烦)

• 2、WebSocket（算是常用，客户端和服务端 双工通讯，但是 一般只用于特定的某些场景：比如需要实时更新的数据，像股市实时走势图）

• 3、CORS （常用，通过设置cors请求头的方式解决，一般由后台设置）

• 4、服务端正向代理 （少用，通过前端nodejs启动一个服务器代理转发的方式）

• 5、nginx反向代理（前端开发的时候本地通过vue.config.js中的proxy代理的方式，需要部署到线上的时候，让后端配置nginx，对匹配到的接口进行代理转发）

• 6.postMessage（少用）

上面前五种方式，在面试时，都要说出来。

1、JSONP

---

面试会问：JSONP的原理是什么？怎么实现的？

在CORS和postMessage以前，我们一直都是通过JSONP来做跨域通信的。

JSONP的原理：通过script标签的异步加载来实现的。比如说，实际开发中，我们发现，head标签里，可以通过script标签的src，它是没有同源限制的，里面放url，加载很多在线的插件。这就是用到了JSONP。

JSONP的实现：

比如说，客户端这样写：

上面的src中，data=name是get请求的参数，myjsonp是和后台约定好的函数名。

服务器端这样写：

res.set(‘content-type’, ‘text/javascript’);

res.body = res.query.callback+ ‘(“你好”)’;

在前端：

本地要求创建一个myjsonp 的全局函数，才能将返回的数据执行出来。

var util = {};

//定义方法：动态创建 script 标签

/**

• [function 在页面中注入js脚本]

• @param {[type]} url [description]

• @param {[type]} charset [description]

• @return {[type]} [description]

*/

util.createScript = function (url, charset) {

var script = document.createElement(‘script’);

script.setAttribute(‘type’, ‘text/javascript’);

charset && script.setAttribute(‘charset’, charset);

script.setAttribute(‘src’, url);

script.async = true;

return script;

};

/**

• [function 处理jsonp]

• @param {[type]} url [description]

• @param {[type]} onsucess [description]

• @param {[type]} onerror [description]

• @param {[type]} charset [description]

• @return {[type]} [description]

*/

util.jsonp = function (url, onsuccess, onerror, charset) {

var callbackName = util.getName(‘tt_player’); //事先约定好的 函数名

window[callbackName] = function () { //根据回调名称注册一个全局的函数

if (onsuccess && util.isFunction(onsuccess)) {

onsuccess(arguments[0]);

}

};

var script = util.createScript(url + ‘&callback=’ + callbackName, charset); //动态创建一个script标签

script.onload = script.onreadystatechange = function () { //监听加载成功的事件，获取数据

if (!script.readyState || /loaded|complete/.test(script.readyState)) {

script.onload = script.onreadystatechange = null;

// 移除该script的 DOM 对象

if (script.parentNode) {

script.parentNode.removeChild(script);

}

// 删除函数或变量

window[callbackName] = null; //最后不要忘了删除

}

};

script.onerror = function () {

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

稿文件。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】