【校招VIP】前端JS语言之跨域、jsonp

考点介绍：

我们经常会遇到跨域文件访问的问题，比如要从自己的html页面，获取另外一个服务器上的天气预报或者地图数据，但是原生js为了安全性考虑禁止内部这种跨域访问。有一种实现方式是jsonp方法。jsonp是一种JSON的“使用模式“，jsonp实现跨域的原理是，通过script标签向服务器端发送一个get请求，服务端返回一个text/plain格式的文件，文件内容是对一个方法的调用。

本期分享的前端JS语言之跨域、jsonp，分为试题、文章以及视频三部分。

答案详情解析和文章内容可扫下方二维码或链接即可查看！

一、考点题目

1、下面有关浏览器中使用js跨域获取数据的描述，说法错误的是（ ）

A.使用window.name来进行跨域

B.域名、端口相同，协议不同，属于相同的域

C.js可以使用jsonp进行跨域

D.通过修改document.domain来跨子域

解答：B

只要 协议、域名、端口有任何一个不同, 都被当作是不同的域

2、关于JSONP使用的说法错误的是：

A.可以实现跨域通信

B.基于 json 格式数据，兼容性好，简单易用

C.只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间进行JavaScript调用的问题

D.可以完美支持POST请求

解答：D

JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都 可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果

JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题

3、关于 jsonp 的优缺点的表述中，哪一项是错误的？

A.它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制

B.兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持

C.只支持GET、POST两种HTTP请求，不支持其它类型的HTTP请求

D.只支持跨域HTTP请求，不能解决不同域的两个页面之间如何进行JavaScript调用的问题

解答：C

JSONP的优点是：
它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是：
它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行调用的问题。

Jsonp原理：
1、首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时，服务器先生成 json 数据。然后以 javascript 语法的方式，生成一个function, function 名字就是传递上来的参数 jsonp.
2、最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
3、客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

（答案点击下方链接或者扫海报二维码查看哦）

二、考点文章

1、jsonp跨域原理解析

需要注意的是，callback参数定义的方法是需要前后端定义好的，具体什么名字，商讨好就可以了。
其实jsonp的整个过程就类似于前端声明好一个函数，后端返回执行函数。
执行函数参数中携带所需的数据，整个过程实际非常简单易懂，如有疑问大家可以在下方留言，我会及时回复。

2、浅谈jsonp跨域理解

我们经常会遇到跨域文件访问的问题，比如要从自己的html页面，获取另外一个服务器上的天气预报或者地图数据，但是原生js为了安全性考虑禁止内部这种跨域访问。这个时候我们应该怎么办呢？

下面我们就讲讲其中的一种实现方式，jsonp方法。

jsonp这种非正式协议用来处理跨域文件访问，众所周知，我们可以用<script src="...js"></script>这样的方法来加载一个远程服务器的js脚本。那么把我们需要的跨域数据写入这个服务器上的脚本remote.js，然后引入这个脚本，我们就可以使用别人的服务器数据，这就是jsonp的实现原理。

3、轻松搞定JSONP跨域请求

JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写。

JSONP实现跨域请求的原理简单的说，就是动态创建<script>标签，然后利用<script>的src 不受同源策略约束来跨域获取数据。

JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。

（扫下方海报二维码查看完整版）

三、考点视频

1、浮动和清除浮动的三种主要方法

只要做过简单CSS项目的同学，都会遇到浮动的问题
也就是子元素脱离了父元素，导致父元素的高度出现问题。
解决方法也很多，最主要的有三种，校招面试时能回答上这三种就满分
但是解决方案多，就一定有优劣，要重点理解优缺点
属于笔5面5的必考点

更多资讯可搜索校招VIP小程序查看哦!

移动端链接：https://m.naoffer.com/dTopic/detail/680

PC端链接：https://xiaozhao.vip/dTopic/detail/680