ajax跨域通信工作原理,前后端如何通信，跨域通信了解么(2018秋招面试题)

前言

前端通信类的问题，主要包括以下内容：

1、什么是同源策略及限制同源策略是一个概念，就一句话。有什么限制，就三句话。能说出来即可。

2、前后端如何通信如果你不准备，估计也就只能说出ajax。这个可以考察出知识面。

3、如何创建AjaxAjax在前后端通信中经常用到。做业务时，可以借助第三方的库，比如vue框架里的库、jQuery也有封装好的方法。但如果让你用原生的js去实现，该怎么做？

这就是考察你的动手能力，以及框架原理的掌握。如果能写出来，可以体现出你的基本功。是加分项。

4、跨域通信的几种方式这部分非常重要。无非就是问你：什么是跨域、跨域有什么限制、跨域有几种方式。

下面分别讲解。

同源策略的概念和具体限制

同源策略：限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。(来自MDN官方的解释)

具体解释：

(1)源包括三个部分：协议、域名、端口(http协议的默认端口是80)。如果有任何一个部分不同，则源不同，那就是跨域了。

(2)限制：这个源的文档没有权利去操作另一个源的文档。这个限制体现在：(要记住)

Cookie、LocalStorage和IndexDB无法获取。无法获取和操作DOM。不能发送Ajax请求。我们要注意，Ajax只适合同源的通信。前后端如何通信

主要有以下几种方式：

Ajax：不支持跨域。WebSocket：不受同源策略的限制，支持跨域。CORS：不受同源策略的限制，支持跨域。一种新的通信协议标准。可以理解成是：同时支持同源和跨域的Ajax。如何创建Ajax

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

1、XMLHttpRequest 的工作原理2、兼容性处理XMLHttpRequest只有在高级浏览器中才支持。在回答问题时，这个兼容性问题不要忽略。

3、事件的触发条件4、事件的触发顺序XMLHttpRequest有很多触发事件，每个事件是怎么触发的。

发送 Ajax 请求的五个步骤(XMLHttpRequest的工作原理)

(1)创建XMLHttpRequest 对象。

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

(3)发送请求。

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

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

(5)获取返回的数据，更新UI。

// 异步对象 var xhr = new XMLHttpRequest(); // 设置属性 xhr.open('post', '02.post.php'); // 如果想要使用post提交数据,必须添加此行 xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 将数据通过send方法传递 xhr.send('name=fox&age=18'); // 发送并接受返回值 xhr.onreadystatechange = function () { // 这步为判断服务器是否正确响应 if (xhr.readyState == 4 && xhr.status == 200) { alert(xhr.responseText); } };

onreadystatechange 事件

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

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

0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪事件的触发条件

事件的触发顺序

跨域通信的几种方式

方式如下：

1、JSONP2、WebSocket3、CORS4、Hash5、postMessage上面这五种方式，在面试时，都要说出来。

举报/反馈