ajax原理以及六大解决跨域的方法

2401_89760128

于 2025-01-10 15:18:13 发布

阅读量651

点赞数 20

文章标签： ajax 前端 javascript

本文链接：https://blog.youkuaiyun.com/2401_89760128/article/details/145059115

版权

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

// 创建异步对象

var xhr = new XMLHttpRequest();

// 设置属性

xhr.open(‘post’, ‘url’);

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

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

// 发送并将数据通过send方法传递

xhr.send(‘参数’);

// 接受返回值

xhr.onreadystatechange = function () {

// 这步为判断服务器是否正确响应

if (xhr.readyState == 4 && xhr.status == 200) {

alert(xhr.responseText);

}

};

onreadystatechange 事件

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 () {

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

onerror();

}

};

document.getElementsByTagName(‘head’)[0].appendChild(script); //往html中增加这个标签，目的是把请求发送出去

};

2、WebSocket

WebSocket的用法如下：

var ws = new WebSocket(‘wss://echo.websocket.org’); //创建WebSocket的对象。参数可以是 ws 或 wss，后者表示加密。

//把请求发出去

ws.onopen = function (evt) {

console.log(‘Connection open …’);

ws.send(‘Hello WebSockets!’);

};

//对方发消息过来时，我接收

ws.onmessage = function (evt) {

console.log('Received Message: ', evt.data);

ws.close();

};

//关闭连接

ws.onclose = function (evt) {

console.log(‘Connection closed.’);

};

Websocket的推荐链接：http://www.ruanyifeng.com/blog/2017/05/websocket.html

3、CORS

Cross-origin resource sharing 跨域资源共享