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

校招VIP 2022-09-23 07:00:10 阅读数:275

前端JS语言言之vip

考点介绍:

我们经常会遇到跨域文件访问的问题,比如要从自己的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

 

版权声明:本文为[校招VIP]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/shuize123/article/details/126992940