前端跨域通信的几种方式

（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是这样实现的：