脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JSON和JSONP区别及jQuery的ajax jsonp的使用，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
JSON和JSONP
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，用于在浏览器和服务器之间交换信息。
JSONP(JSON WITh Padding)，就是打包在函数调用中的的JSON（或者包裹的JSON）。
JSON是一种数据格式，JSONP是一种数据调用方式。
代码如下:
//JSON
{
“name”: “sb”
}
代码如下:
//JSONP
callback({
“name”: “sb”
})
出于安全考虑，脚本（AJAX）不能访问非本域的内容。但是，静态资源是不受域策略限制的，可以加载任意域的脚本、样式、图片等静态资源，JSOP就是利用这种原理来实现跨域获取数据的。
例1：
代码如下:
//定义shoPRice函数
function showPrice(data) {
alert("Symbol: " + data.symbol + ", Price: " + data.price);
}
代码如下:
//在Web页面中包含showPrice函数和参数
<script tyPE="text/javascript">
function showPrice(data) {
alert("Symbol: " + data.symbol + ", Price: " + data.price);
}
</script>
<script type="text/javascript">showPrice({symbol: 'IBM', price: 91.42});</script>
本例展示了如何将静态JSON数据作为参数调用JavaScript函数。
例2：
第一种的函数调用完全可以写在一个js文件中放在服务器上，用script标签加载到页面，而且这个标签可以动态地创建。
代码如下:
<script type="text/javascript">
// This is our function to be called with JSON data
function showPrice(data) {
alert("Symbol: " + data.symbol + ", Price: " + data.price);
}
VAR url = “remote.js”; // 外部脚本的URL
// 动态插入脚本
var script = document.createElement('script');
script.setattribute('src', url);
// 加载script
document.getelementsbytagname('head')[0].appendChild(script);
</script>
remote.js的内容和之前在标签里写的一样是：
1 showPrice({symbol: 'IBM', price: 91.42});
动态插入的JavaScript代码，将要传递的JSON数据作为参数，showPrice函数调用语句的参数。
那么问题来了，每次获取到数据都调用showPrice函数吗？这就需要前后端程序猿做好约定，当然这样有很多不便，尤其是对于开放接口给公众开发的情况。JSOP这样处理：支持前端传递一个回调函数名参数，后端接收回调函数名参数，然后生成对该函数的调用，将JSON数据作为参数传递，在到达客户端时将其插入页面开始执行。
例3：
动态插入代码，带有callback参数：
代码如下:
<script type="text/javascript">
// This is our function to be called with JSON data
function showPrice(data) {
alert("Symbol: " + data.symbol + ", Price: " + data.price);
}
var url = “remote.js?callback='showPrice'”; // 外部脚本的URL
// 动态插入脚本
var script = document.createElement('script');
script.setAttribute('src', url);
// 加载script
document.getElementsByTagName('head')[0].appendChild(script);
</script>
代码如下:
$jsonData = getDataAsJson($_GET['symbol']);
echo $_GET['callback'] . '(' . $jsonData . ');';
// 打印: showPrice({"symbol" : "IBM", "price" : "91.42"});
代码如下:
$.ajax({
nbsp; url: "https://query.yahooapis.COM/v1/public/yql",
jsonpCallback: "showPrice",
jsonp: "callback",
// tell jQuery we're expecting JSONP
dataType: "jsonp",
data: {
q: "select title,abstract,url From seArch.news where query=/"cat/"",
format: "json"
},
// work with the response
success: function( data ) {
console.LOG( data ); // server response
}
});
ajax请求参数说明：
dataType String
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 ";myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
"text": 返回纯文本字符串
jsonp，
重写jsonp请求中的回调函数的名称。至俄格值用来替代“callback=?”这种GET或POST请求URL参数里的“callback”部分，例如{jsonp:'onJsonPLoad'}会导致“onJsonPLoad”传递给服务器。
jsonpCallback，
为jsonp指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。但是实际使用过程中，并不用写回调函数，比如此例中的showPrice，不写也不会报错，因为jQuery在处理JSONP的时候，自动帮你生成回调函数并且把数据取出来共success方法调用。可能像这样：
代码如下:
function success_jsonpCallback(data) { success(data); }
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-JSON和JSONP区别及jQuery的ajax jsonp的使用全部内容，希望文章能够帮你解决javascript代码实例教程-JSON和JSONP区别及jQuery的ajax jsonp的使用所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。