jquery 实现的josnp

参考:http://www.cnblogs.com/dudu/archive/2012/12/04/jquery-jsonp-attention.html

一个$.ajax 实例:

<script type="text/javascript">
     jQuery(document).ready(function(){
          $.ajax({
             type  : "get",
             async : false,
             url   : "ajax.ashx",
             dataType : "jsonp",
             jsonp : "callbackparam",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
             jsonpCallback :"success_jsonpCallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
             success : function(json){
                 alert(json);
                 alert(json[0].name);
             },
             error : function(){
                 alert('fail');
             }
         });
         var a = "firstName Brett";
         alert(a);
     });
</script>

上面用法有两个限制:

1.只能发 get 请求,get 请求的弊端是请求长度有限制

2.不会触发 $.ajax 的error callback

解决方法:

使用一个 jquery 插件 —— jquery-jsonp,https://github.com/jaubourg/jquery-jsonp

var originImgSrc = 'cnbogs-logo.gif';
$.jsonp({
    url   : '',
    data  : { imgSrc: originImgSrc },
    callbackParameter : "callback",
    success : function (newImgSrc, textStatus, xOptions) {
        console.log(xOptions.data.imgSrc);
    },
    error : function (xOptions, textStatus) {
    }
});

第1个需要注意的地方是 callbackParameter,如果没有专门的 callback 函数,一定要写上 "callback";

第2个需要注意的地方是在 success 回调函数中,直接通过变量名 originImgSrc 得到的是 undefined,需要通过 xOptions.data.imgSrc 获取。


posted @ 2013-08-09 15:23  hdchangchang  阅读(169)  评论(0编辑  收藏  举报