2024年最全前端跨域通信的几种方式(1)，web开发视频

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

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

如何创建Ajax

---

关于Ajax请求，可以看本人的基础文章：Ajax入门和发送http请求

在回答 Ajax 的问题时，要回答以下几个方面：

• 1、XMLHttpRequest 的工作原理

• 2、兼容性处理

XMLHttpRequest只有在高级浏览器中才支持。在回答问题时，这个兼容性问题不要忽略。

• 3、事件的出发条件

• 4、事件的触发顺序

XMLHttpRequest有很多触发事件，每个事件是怎么触发的。

发送 Ajax 请求的五个步骤（XMLHttpRequest的工作原理）

（1）创建XMLHttpRequest 对象。

（2）使用open方法设置请求的参数。open(method, url, 是否异步)。

（3）发送请求。

（4）注册事件。 注册onreadystatechange事件，状态改变时就会调用。

如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。

（5）获取返回的数据，更新UI。

发送 get 请求和 post 请求

get请求举例：

Ajax 发送 get 请求

post 请求举例：

Ajax 发送 get 请求

onreadystatechange 事件

注册 onreadystatechange 事件后，每当 readyState 属性改变时，就会调用 onreadystatechange 函数。

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

• 0: 请求未初始化

• 1: 服务器连接已建立

• 2: 请求已接收

• 3: 请求处理中

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

事件的触发条件

事件的触发顺序

上图的参考链接：

• 你真的会使用XMLHttpRequest吗？

实际开发中用的 原生Ajax请求

var util = {};

//获取 ajax 请求之后的json

util.json = function (options) {

var opt = {

url: ‘’,

type: ‘get’,

data: {},

success: function () {

},

error: function () {

},

};

util.extend(opt, options);

if (opt.url) {

//IE兼容性处理：浏览器特征检查。检查该浏览器是否存在XMLHttpRequest这个api，没有的话，就用IE的api

var xhr = XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveXObject(‘Microsoft.XMLHTTP’);

var data = opt.data,

url = opt.url,

type = opt.type.toUpperCase();

dataArr = [];

}

for (var key in data) {

dataArr.push(key + ‘=’ + data[key]);

}

if (type === ‘GET’) {

url = url + ‘?’ + dataArr.join(‘&’);

xhr.open(type, url.replace(/?$/g, ‘’), true);

xhr.send();

}

if (type === ‘POST’) {

xhr.open(type, url, true);

// 如果想要使用post提交数据,必须添加此行

xhr.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);

xhr.send(dataArr.join(‘&’));

}

xhr.onload = function () {

if (xhr.status === 200 || xhr.status === 304) { //304表示：用缓存即可。206表示获取媒体资源的前面一部分

var res;

if (opt.success && opt.success instanceof Function) {

res = xhr.responseText;

if (typeof res === ‘string’) {

res = JSON.parse(res); //将字符串转成json

opt.success.call(xhr, res);

}

}

} else {

if (opt.error && opt.error instanceof Function) {

opt.error.call(xhr, res);

}

}

};

}

Ajax 的推荐链接：https://segmentfault.com/a/1190000006669043

跨域通信的几种方式

---

方式如下：

• 1、JSONP

• 2、WebSocket

• 3、CORS

• 4、Hash

• 5、postMessage

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

1、JSONP

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

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

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

JSONP的实现：

比如说，客户端这样写：

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

服务器端这样写：

myjsonp({

data: {}

})

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

实际开发中，前端的JSONP是这样实现的：