ajax原理以及六大解决跨域的方法，2024前端开发面试题及答案

readyState：（存有 XMLHttpRequest 的状态。从 0 到 4 发生变化）0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪跨域通信的几种方式为什么会产生跨域只要：协议、域名、端口（http协议的默认端口是80）。如果有一个部分不同，则源不同，那就是跨域了。跨域是，并不是服务端的行为解决原理。

m0_60575487

985人浏览 · 2024-03-18 17:33:59

m0_60575487 · 2024-03-18 17:33:59 发布

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前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。