如何使用jQuery的jsonp解决跨域问题

1.关于jsonp为什么能解决跨域问题可网上自行搜索。

此处给两个个我认为写的比较明白的博客

http://www.cnblogs.com/lemontea/archive/2012/12/11/2812268.html

http://www.nowamagic.net/librarys/veda/detail/224/

 

2.如何使用jQuery的jsonp？

此问题包含两部分：

 

部分一：

建立一个提供jsonp服务的站点，这是基础，如果没有此步骤，打死你你也测试不了jQuery的jsonp功能。

我的做法是

    A.首先建立一个站点，叫做testjsonp，其下有一个文件，叫做somejsonp.php;

    B.somejsonp.php中的代码如下

       <?php
                     $callback  = $_GET['callback'];
                     $json = "[{\"id\": \"1\", \"name\": \"a\"},{\"id\": \"2\", \"name\": \"b\"}]";
                     echo $callback."(".$json.");";
       ?>

        用什么语言不是重点，重点是这个服务器返回的数据yao是一个字符串，字符串的格式为  函数名（json对象）。此处的函数名是从客户端传来的名叫callback参数读取的（你也可以起别的名字）。

    C.我是启动apache服务器，可自行在浏览器中输入地址进行测试 http://localhost:81/testjsonp/somejsonp?callback=?

    

 

部分二：

客户端如何使用jQuery的jsonp功能

现在列出四种写法

A.

           为了读者能理解jQuery的jsonp的本质，第一种写法不依赖于任何js库，如下：

           function mycallback(data){

                   alert(data.length);

           }

           var script   = document.createElement("script");

           script.type = "text/javascript";

           script.src  = "http://localhost:81/testjsonp/somejsonp?callback=mycallback";

           document.getElementByTagName("HEAD")[0].appendChild(script);

  

B.

           jQuery.getJSON("http://localhost:81/testjsonp/somejsonp?callback=?", function(data) {
               alert(data[1].name);
           });

         

          jQuery的方便体现在虽然服务器端php传来的是json的字符串，但jQuery自动将其转化为了json对象，因此可以直接使用data[0].name，

          此写法的关键点在于url，一定要有callback=?这部分，如果没有，那只能用下面列举的C方式。

C.

          jQuery.ajax({
                type: "get",
                url: "http://localhost:81/testjsonp/somejsonp",
                dataType: "jsonp",
                jsonp: "callback",
                success: function(data){
                    alert(data[0].name+data[1].name);
                 }
           });

         

          此方法之所以没有callback=?是因为jsonp属性设置了callback，如果不想设置jsonp属性，那可用D方式。

D.    

          jQuery.ajax({
                type: "get",
                url: "http://localhost:81/testjsonp/somejsonp?callback=?",
                dataType: "jsonp",
                success: function(data){
                    alert(data[0].name+data[1].name);
                 }
           });

          D实际上就是去掉jsonp属性，然后url采用与B同样的写法，即带有callback=?即可