jsonp实质分析——和json其实没什么太大关系

  jsonp有的哥哥们解释为json padding——json格式的填充,然后妥妥的就误导了我好久啊

  好吧,虽然网上有很多的jsonp的详细讲解,我还是罗嗦一下吧。

  1.jsonp的基础

  我们都知道,根据同源规则是不能访问其他域内的内容,但是总是会有些例外的,比如说带src属性的标签。那这里我们就选了一个script标签,通过src可以引用其他的js文件。  

  其实jsonp的基础和用jquery是一样的,jquery的话可以直接引用jquery.com上面的文件,然后我们就可以用jquery的函数。恩,其实原理呢是一样的,如果我们在服务器上有这么一个js文件,里面有这么一个json对象的话,那是不是我们其实就获得了想要的json对象(ps:注意,这里只是举例子,不一定返回的就是json,这要看服务器上时怎么实现的,也有可能是xml或者就是一个可执行函数或者是其他什么东西,但是如果返回的内容不符合script标签MIME,那是会报错的)

  好的,有了这个基础,那我们就可以理解初步jsonp是这么一回事——通过服务器上的js文件,执行一段代码,这段代码将返回我们需要的东西(传递参数的时候可以是json的格式,但是这个不是必须)

  2.jsonp的实现

  好了,重点来了,jsonp是怎么实现的,在这里我特指的是客户端上的实现

    <script type="text/javascript">


    var url="http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=html&callback=xiaosi";// html是一个参数,代表的是搜寻的问题,xiaosi是一个方法名字,下面有定义
    
    function xiaosi(data){
        alert("调用成功了");
        console.log(data);
    }
    function addScript(){
        var script=document.createElement("script");
        script.setAttribute("type","text/javascript");
        script.src=url;
        document.body.appendChild(script);
    }
    </script>
View Code

 如上面的代码所示,首先明确一点的是,我这里没有用到json,所以json不是jsonp的必要条件,这个要明确,然后我们再来分析。

  1. url代表的是需要访问的地址,里面有回调函数xiaosi作为一个callback的参数传入访问的url里,这代表当我们添加了这段script之后,服务器就会返回我们需要的东西(别问我怎么实现,我不懂后台,但是服务器需要实现的功能就是这个)
  2. addScript这个函数是用来添加script引用的,添加完引用之后,服务器实现数据的读出,然后放在这个script里面,所以我们引用这个script的时候可以直接认为这就是一段我们需要的数据

xiaosi就是在获得数据之后的回调函数,我们需要操作返回的数据的话就需要在这里面弄

  

  3.jquery的写法

  如果你要使用jquery的话,最简单的使用方法就是

$.getJSON(url+"&callback=?",function(data){
    //data就是返回的数据,你想干嘛就对它干嘛吧
});
View Code

如果你的getJSON方法的参数url里有callback=?就会为你自动创建jsonp的回调函数,也会自动帮你插入和删除script,你只需要在要访问的url后面加上callback=?就可以了,?表示创建的回调函数是自动的,不过不用管它

 

  ps:我之前有很多理解上的错误,可能是大脑cpu品质太低,跑不起来,所以我把之前弄错的地方写下来,以免再犯

  1.jsonp返回的数据不一定是json,这个要看服务器怎么实现,如果可能的话,返回数据是错误也不一定(ps:强调一下,如果是支持jsonp格式的服务器返回的是一个函数,调用这个函数得到想要的,不支持的话即使返回的是json依旧是会报错的。)

  2.如果是jquery实现的话最好是直接用callback=?就好了,因为这样省事情而且不容易出错,自定义返回函数名字的话需要在$.ajax()的模式下才能改

 

  小弟才疏学浅,上面的胡言乱语必有不足之初,还请各位多多直接(尼玛,一个不小心就一点多了,明天还要上班,哎)

posted @ 2013-07-17 01:18  小斯新手  阅读(537)  评论(0编辑  收藏  举报