jsonp原理讲解

原因

我们知道浏览器出于安全考虑,并不用允许利用(XMLHTTP/XMLHttpRequest)发送跨域的ajax请求。

解决办法(只讨论使用jsonp的方式)

同样我们也知道,对于img,css,script,是可以跨域引用的, 现在我们假设有一个网站a(www.a.com)的一个页面a1.aspx
引用了一个网站b(www.b.com)的javascript比如www.b.com/test.js。test.js里面输出一个alert(1);
这个结果我想大家都知道。现在又假如我们在a1.aspx里面有一个函数

/*a1.aspx页面内容*/
function fa1(){
alert("1");
}

而test.js输出的内容为fa1()这个时候,显然浏览器也会弹出一个对话框了,里面的内容就是1。 说到这里大家也明白点东西了。
当我们需要跨域请求的时候,我们是不是完全可以利用js动态创建<script>标签,而将我们需要的参数附加的script标签的src地址的后面如下面这样

<script src="http://www.b.com/test.js?id=12&cd=a"></script>

www.b.com我们就可以得到这些参数,并输出一个跟服务器约定好的函数名,就系那个上面的例子中输出fa1()一样,当然了, 我们也可以利用像下面这样告诉www.b.com上面我们将要服务器输出的函数名字如下面

<script src="http://www.b.com/test.js?id=12&cd=a&callback=callsuccess"></script>

www.b.com处理完后,输出callsuccess();就可以了。当然了callsuccess也是可以有任何参数的。这实际上就是所谓的jsonp

jsonp缺点

  • 目标域的服务器必须要如你所愿的输出一些你想要的脚本才可以。如上面才callback ,想象一下,假如www.b.com/test.js
    输出的并非callsucess();而是输出alert(1)....说白了, 目标域,如果没有支持jsonp这种形式, 那么你是么有办法的。
  • 只能是get请求
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容