Jsonp 跨域访问
2014-03-17 11:15
330 查看
Jsonp可以让网页从别的网域获取资料,也就是说一般server1.example.com的网页无法与不是server1.example.com的服务器沟通,而<script>元素是一个例外,利用<script>
可以得到从其他来源动态产生的JSON资料,这种模式就是JSONP,从JSONP抓到的资料并不是JSON,而是JavaScript函数,用Javascript直译器执行而不是用JSON解析器解析
Jsonp通过Javascript callback的形式实现跨域访问:
假设客户期望返回JSON数据:["customername1","customername2"]
那么真正返回到客户端的Script Tags: callbackFunction([“customername1","customername2"])
例子:
1.
<script type="text/javascript" src="http://www.yiwuku.com/myService.aspx?jsonp=onCustomerLoaded"></script>
回调函数:
<script type="text/javascript">
function onCustomerLoaded(result, methodName)
{
var html = '<ul>';
for(var i = 0; i < result.length; i++)
{
html += '<li>' + result[i] + '</li>';
}
html += '</ul>';
document.getElementById('divCustomers').innerHTML = html;
}
</script>
2.
$.getJSON
<script>
$(document).ready(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data) {
$.each(data.items,
function(i, item) {
$("<img/>").attr("src", item.media.m).appendTo("#images");
if (i == 3) return false;
});
});
});
jsoncallback=?,其中?会自动替换为function(data)函数
3.
path = vipPath + '/r007Action.do?event=loadMemberHeader';
$.ajax({
type : "get",
async : false,
url : path,
dataType : "jsonp",
jsonp : "callbackparam",
jsonpCallback : "success_jsonpCallback",
success : function(json) {
},
error : function() {
alert('fail');
}
});
后台代码:
jsonObj.put("data", result);
result = jsonObj.toJSONString();
connection.disconnect();
printDataWithSync(res, callbackFunName + "(" + result +")"); 返回内容像:jsonp1382016430883([{"id":1,"title":"XXXX"},{"id":2,"title":"YYYYY"}])
前台回调方法:
function success_jsonpCallback(data) {
$("#head_menu_member").animate({
height : '200px'
}, 400, function() {
$("#head_menu").remove();
$("#head_menu_member").html(data.data);
});
}
更多资料:
http://baike.baidu.com/view/2131174.htm?fr=ala0_1 http://scorpio-jh.blog.sohu.com/146838043.html
可以得到从其他来源动态产生的JSON资料,这种模式就是JSONP,从JSONP抓到的资料并不是JSON,而是JavaScript函数,用Javascript直译器执行而不是用JSON解析器解析
Jsonp通过Javascript callback的形式实现跨域访问:
假设客户期望返回JSON数据:["customername1","customername2"]
那么真正返回到客户端的Script Tags: callbackFunction([“customername1","customername2"])
例子:
1.
<script type="text/javascript" src="http://www.yiwuku.com/myService.aspx?jsonp=onCustomerLoaded"></script>
回调函数:
<script type="text/javascript">
function onCustomerLoaded(result, methodName)
{
var html = '<ul>';
for(var i = 0; i < result.length; i++)
{
html += '<li>' + result[i] + '</li>';
}
html += '</ul>';
document.getElementById('divCustomers').innerHTML = html;
}
</script>
2.
$.getJSON
<script>
$(document).ready(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data) {
$.each(data.items,
function(i, item) {
$("<img/>").attr("src", item.media.m).appendTo("#images");
if (i == 3) return false;
});
});
});
jsoncallback=?,其中?会自动替换为function(data)函数
3.
path = vipPath + '/r007Action.do?event=loadMemberHeader';
$.ajax({
type : "get",
async : false,
url : path,
dataType : "jsonp",
jsonp : "callbackparam",
jsonpCallback : "success_jsonpCallback",
success : function(json) {
},
error : function() {
alert('fail');
}
});
后台代码:
jsonObj.put("data", result);
result = jsonObj.toJSONString();
connection.disconnect();
printDataWithSync(res, callbackFunName + "(" + result +")"); 返回内容像:jsonp1382016430883([{"id":1,"title":"XXXX"},{"id":2,"title":"YYYYY"}])
前台回调方法:
function success_jsonpCallback(data) {
$("#head_menu_member").animate({
height : '200px'
}, 400, function() {
$("#head_menu").remove();
$("#head_menu_member").html(data.data);
});
}
更多资料:
http://baike.baidu.com/view/2131174.htm?fr=ala0_1 http://scorpio-jh.blog.sohu.com/146838043.html
相关文章推荐
- 在jsff中使用javascript问题
- 十二步创建你的第一个JavaScript库
- ExtJs4 笔记(3) Ext.XTemplate 模板
- JS 对图片base64编码字符串进行解码并输出图像
- js对象的深拷贝问题
- JavaScript:document对象方法属性大全(摘)
- 每日jsp 特效 点击某颜色覆盖某面板
- web地图(arcgis for javascript)开发中关于map.resize和map.reposition的bug
- js的变量,作用域,内存
- cJSON调用方法
- javascript文件中引用依赖的js文件
- Javascript获取各种浏览器可见窗口大小
- js数据类型判断和数组判断
- 将JSON转成DataSet(DataTable)
- javascript console
- js 捕获浏览器关闭或者刷新页面给出提示
- JSON基础笔记
- js正则表达式验证限制文本框输入数字
- C# Json无组件纯代码解析
- 如何捕获和分析 JavaScript Error