本系列web面试专题将常见的数据交互问题分为初级、中级、高级三部分。

本次详解基础数据交互问题，以5道常见考题为例。

基础：同源策略和跨域概念三大类跨域技术CORS配置与使用JSONP使用与原理探索代理数据访问

1、什么是跨域？【演示-跨域报错】

浏览器的同源策略会导致跨域，这里同源策略又分为以下两种

DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。

XmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求。

只要协议、域名、端口有任何一个不同，都被当作是不同的域，之间的请求就是跨域操作。

2、跨域的方式有哪些？

CORS【跨域资源共享】、jsonp、服务器代理、document.domain来跨子域+iframe、location.hash跨域+iframe、使用postMessage实现页面之间通信+iframe

3、jsonp是什么？

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback参数给服务端，

然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

4、怎么使用jsonp？

callback({

'name': 'Song',

'email': '2060884089@qq.com'

})

可以运行远程服务器上的js；这个地球人都知道。【引入外包js，比如cdn】

调用本地函数，进行数据交互。

5、jsonp的缺陷有哪些？

只能传递get请求。

ajax和jsonp本质上是不同的东西。

ajax的核心是通过XmlHttpRequest获取非本页内容。

jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

本次面试专题系列主要解析数据交互问题，下一篇为大家带来数据交互中级面试题分析。敬请期待！提前感谢关注、评论、转发、收藏~