jquery jsonp 是post 还是get
1个回答
展开全部
我觉得你这个问题首先得搞清楚什么是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的内容和之前在标签里写的一样是:
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>
后端用PHP实现的JSONP服务的代码片段:
$jsonData = getDataAsJson($_GET['symbol']);
echo $_GET['callback'] . '(' . $jsonData . ');';
// 打印: showPrice({"symbol" : "IBM", "price" : "91.42"});
很好的契合了JSONP的定义,打包在函数调用中的JSON数据。
以上几个例子来自:使用 JSONP 实现跨域通信,第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup
接下来,在jQuery中使用JSONP:
AJAX和JSONP在jQuery中的调用方式看起来极为相像,千万不要被这种现象迷惑,它们本质上有很大不同。AJAX是通过XMLHttpRequest对象获取非页面内容,而JSONP是动态的添加<script>标签来调用服务器脚本。虽然jQuery把JSONP作为AJAX的一种形式进行了封装,但JSONP并不是AJAX的一种形式或一种特例。
$.ajax({
url: "http://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
}
});
参数解释:
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); }
所以:jsonp 可以是使用post方法也可以使用get方法。
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的内容和之前在标签里写的一样是:
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>
后端用PHP实现的JSONP服务的代码片段:
$jsonData = getDataAsJson($_GET['symbol']);
echo $_GET['callback'] . '(' . $jsonData . ');';
// 打印: showPrice({"symbol" : "IBM", "price" : "91.42"});
很好的契合了JSONP的定义,打包在函数调用中的JSON数据。
以上几个例子来自:使用 JSONP 实现跨域通信,第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup
接下来,在jQuery中使用JSONP:
AJAX和JSONP在jQuery中的调用方式看起来极为相像,千万不要被这种现象迷惑,它们本质上有很大不同。AJAX是通过XMLHttpRequest对象获取非页面内容,而JSONP是动态的添加<script>标签来调用服务器脚本。虽然jQuery把JSONP作为AJAX的一种形式进行了封装,但JSONP并不是AJAX的一种形式或一种特例。
$.ajax({
url: "http://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
}
});
参数解释:
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); }
所以:jsonp 可以是使用post方法也可以使用get方法。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询