美文网首页
jsonp原理讲解

jsonp原理讲解

作者: 天起晴 | 来源:发表于2013-07-29 10:39 被阅读0次

    原因

    我们知道浏览器出于安全考虑,并不用允许利用(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请求

    相关文章

      网友评论

          本文标题: jsonp原理讲解

          本文链接:https://www.haomeiwen.com/subject/pfdftttx.html