详细分析jsonp的原理和实现方式

针对跨域问题,本文主要给大家详细分析一下jsonp的原理,希望能够给你提供到帮助。

详细分析jsonp的原理和实现方式

一:跨域问题。

二,跨域产生的原因

Js是不能跨域请求。出于安全考虑,js设计时不可以跨域。

什么是跨域:

1、域名不同时。

2、域名相同,端口不同。

只有域名相同、端口相同时,才可以访问。

可以使用jsonp解决跨域问题。

三,跨域失败的案例 3.1,同源策略

首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。看起来不知道什么意思,实践一下就知道了。

3.2,随便建两个网页

一个端口是2698,一个2701,按照定义它们是不同源的。

3.3,用jQuery发起不同源的请求

在2698端口的网页上添加一个按钮,Click事件随便发起两个向端口为2701域的请求。

$("#getOtherDomainThings").click(function () {
$.get("http://localhost:2701/Scripts/jquery-1.4.4.min.js", function (data) {
console.log(data)
})

$.get("http://localhost:2701/home/index", function (data) {
console.log(data)
})
})

根据同源策略,很明显会悲剧了。浏览器会阻止,根本不会发起这个请求。(not allowed by Access-Control-Allow-Origin)

OK,原来jsonp是要解决这个问题的。

换句话就是说在一个src中或者一个url中直接去请求了另一个项目的json数据。

例如在端口是8080的项目中的页面的url中直接去请求了一个http://localhost:8081/category.json这个语句,而这个category.json就在8081的webapp的目录下,就会产生跨域请求的提示。

四,跨域的解决方法 4.1,启发

我们有时候在项目中经常能看到这样的代码

<script type="text/javascript" src="https://com/seashell/weixin/js/jquery.js"></script>

这样即使不在同一个项目中,也可以请求成功。就是利用了这个漏洞,或者说是技术吧,来实现的宽裕的请求。

4.2,方法(案例一) 4.2.1,利用script获取不同源的json

既然它叫jsonp,很明显目的还是json,而且是跨域获取。根据上面的分析,很容易想到:利用js构造一个script标签,把json的url赋给script的scr属性,把这个script插入到dom里,让浏览器去获取。实践:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/841.html