Jsonp 关键字详解及json和jsonp的区别，ajax和jsonp的区别_H5之家

2.png (6.69 KB, 下载次数: 0)

下载附件

昨天 14:58 上传

　　原因是因为json数据并不是合法的js语句，把上面的json数据放在一个回调函数中是最简单的方法：

<body>

function jsonpcallback(json) {

console.log(json);

}

var s = document.createElement('script');

s.src = 'http://localhost:8080/a.json';

document.body.appendChild(s);

</script>

</body>

jsonpcallback({

"name": "hanzichi",

"age": 10

});

复制代码

2.png (21.28 KB, 下载次数: 0)

下载附件

昨天 14:58 上传

　　当然，这时的a.json文件并不一定要这样命名，改成a.js也不会有一点问题。

　　而如果是与服务端交互也是一样的道理，比如和php：

<body>

function jsonpcallback(json) {

console.log(json);

}

var s = document.createElement('script');

s.src=":8080/test.php?callback=jsonpcallback";

document.body.appendChild(s);

</script>

</body>

<?php

$jsondata = '{

"name": "hanzichi",

"age": 10

}';

echo $_GET['callback'].'('.$jsondata.')';

复制代码

　　需要注意的是，jsonp提供的url(即动态生成的script标签的src)，无论看上去是什么形式，最终生成返回的都是一段js代码。

　　JQuery对jsonp的封装

　　为了便于开发，jq对jsonp也进行了封装，封装在了ajax方法中。

$.ajax({

url: 'http://localhost:8080/a.json',

dataType: 'jsonp',

jsonpCallback: 'CallBack',

success: function (data) {

console.log(data);

}

});

</script>

CallBack({

"name": "hanzichi",

"age": 10

});

复制代码

　　以上代码是针对请求文件中写死了callback函数名的情况。因为请求的是json文件，json不是服务器端的动态语言不能进行解析，如果是php或者其他的服务器端语言，则不用写死函数名，比如下面这样：

$.ajax({

url: 'http://localhost:8080/test.php',

dataType: 'jsonp',

success: function (data) {

console.log(data);

}

});

</script>

<?php

$jsondata = '{

"name": "hanzichi",

"age": 10

}';

echo $_GET['callback'].'('.$jsondata.')';

复制代码

　　当然类似的封装好的方法还有几种：

// 1

$.getJSON(":8080/test.php?callback=?", function(data) {

console.log(data);

});

// 2

$.get('http://localhost:8080/test.php', function(data) {

console.log(data);

}, 'jsonp');

复制代码

　　需要注意的是getJSON方法的请求地址url需要带上callback=?，因为jq对该方法进行封装的时候并没有默认回调函数变量名为callback，于是php中$_GET['callback']就找不到变量值了。

　　而一般的jq方法url 中不用指定 callback 参数。对于 jQuery 中的 jsonp 来说，callback 参数是自动添加的。默认情况下，jQuery 生成的 jsonp 请求中 callback 参数是形如 callback=jQuery200023559735575690866_1434954892929 这种根据看似随机的名字，对应的就是 success 那个处理函数，所以一般不用特意处理。二如果要写死callback名的话，可以参照上文。

2.png (8.46 KB, 下载次数: 0)

下载附件