用jsonp来解决跨域问题的三种简单的方法

jsonp实现跨域的方法

使用ajax方法获取数据不能跨域，为了解决这个问题，普遍使用jsonp来实现跨域，下面是对jsonp方法的简单总结：

例子：假如想获取京东的评论的数据，可以在京东的评论面板打开network找到和ajax请求相关的有回调函数callback的请求url, 
如找到一个url, 如：

例如获取到的url为 
https://club.jd.com/comment/productPageComments.action?callback=fetchJSON_comment98vv68218&productId=4586850&score=0&sortType=5&page=0&pageSize=10&isShadowSku=0&fold=1
此请求对应的函数方法为fetchJSON_comment98vv68218()

• 方法1：先写一个简单的页面用来跨域获取京东的数据：

<div id="box"></div>
 var box = document.getElementById("box");
    function fetchJSON_comment98vv68218(data){
        var array = data.comments;
        for(var i=0;i<array.length;i++){
             box.innerHTML += array[i].content+"<br>";
        }
    }

<script src="https://club.jd.com/comment/productPageComments.action?callback=fetchJSON_comment98vv68218&productId=4586850&score=0&sortType=5&page=0&pageSize=10&isShadowSku=0&fold=1"></script>

在服务器上运行这个文件就能获取数据了。

• 方法2：上面一种方法的升级，可以动态创建script标签并将获取数据的请求方法进行封装：

<h3 id="box"></h3>
<input type="button" value="click" id = "btn">
 var btn = document.getElementById("btn");
    var h = document.getElementById("box");
    function request(url,callback){
          window.fetchJSON_comment98vv118 = callback;
        var oscript = document.createElement("script");
        oscript.src = url;
        document.body.appendChild(oscript);
        document.body.removeChild(oscript);
    }

    btn.onclick = function(){
         request("https://club.jd.com/comment/productPageComments.action?callback=fetchJSON_comment98vv118&productId=11488717440&score=0&sortType=5&page=0&pageSize=10&isShadowSku=0&fold=1",function(data){
              for(var i=0;i<data.comments.length;i++){
                     h.innerHTML += data.comments[i].content + "<br>";
              }
         });
    }

• 方法3：最后一种最简单的方法是使用jquery封装好的callback方法来跨域：注意此时的dataType为jsonp,不要忘记写jsonpCallback函数

 $.ajax({
        "url":"https://club.jd.com/comment/productPageComments.action?callback=fetchJSON_comment98vv118&productId=11488717440&score=0&sortType=5&page=0&pageSize=10&isShadowSku=0&fold=1",
        "dataType":"jsonp",
        "jsonpCallback":"fetchJSON_comment98vv118",
        "success":function(data){
             console.log(data);
        }
    })