Jsonp学习记录

大佬教程收集整理的这篇文章主要介绍了Jsonp学习记录，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

1.jsonp作用
解决通过ajax的形式去调用其他网站的接口不行的缺陷。
例如：
Js代码 收藏代码
$.ajax({
url: “http://www.google.com/search?q=jquery“,
success: function(json){
alert(json.count)
}
});
2.jsonp原理
从别的网站引入js代码是可行的。
例如：
本地html引入外部网站的js

remote.js文件中的内容为：alert(“I’m a remote file!”); 运行index01.html可以看到弹出了 I’m a remote file! 说明js文件可以跨域调用！ 3.jsonp实现原理 远程js调用本地函数测试 var localHandler = function(data) { alert('Im local js method,called by remote js,return data is":"' + data.result); };

如上代码，远程js中写了
localHandler({“result”:”I’m remote data!”});
引入到本地就会执行localHandler方法。
这样就实现了跨域并获取数据的目的！

所以服务商在提供接口的时候可以这样写：

protected void doGet(httpServletrequest req,httpServletResponse resp) throws ServletException,IOException {
//获取JSON数据
String jsonData = getDataAsJson(req.getParameter(“symbol”));
//获取回调函数名
String callBACk = req.getParameter(“callBACk”);
//拼接动态JS代码
String output = callBACk + “(” + jsonData + “);
resp.setContentType(“text/javascript”);
PrintWriter out = resp.getWriter();
out.println(output);
// 输出为 jsonpFunc({“symbol” : “IBM”,“price” : “91.42”});
}

假设这个JSONP服务的URL为http://www.google.com/jsonp，回调的函数名为jsonpFunc，那么可以这样发送JSONP请求：

4.使用JQuery的封装进行实现
1.第一种
jQuery.getJSON(
“http://www.yourdomain.com/jsonp/ticker?symbol=IBM&callback=?”,
function(data) {
alert(“Symbol: ” + data.symbol + “,Price: ” + data.pricE);
}
);
其中回调函数名”callBACk”为”?”，即不需要用户指定，而是由jquery生成，互调函数也不需要单独定义，而是以参数的形式紧接在URL之后，URL中还可以附带供数据查询用的其他参数，如上例中的”symbol=IBM”

2.第二种
@H_489_66@(function(){.ajax({
url : ‘http://wx.lrcyz.com/api/article/query.html‘,
data : {
id : 1,
name : ‘qq’
},
dataType : ‘jsonp’,
jsonpCallBACk : ‘jsonObject’,//服务器封装的方法 形如：jsonObject(data,data,data);
success : function(data) {
console.log(“成功”)
console.log(data)
if (data.list) {
var l = data.list;
for (var i = 0; i < l.length; i++) {
var obj = l[i];
$(‘.test’).append(“

“)
}

}
            //$("#id").append("<div> 1 </div>")
        },error : function(data) {
            console.log(data)
        }

    });

});

3.第三种
jQuery(document).ready(function(){
$.ajax({
type: “get”,
async: false,
url: “http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998“,dataType: “jsonp”,jsonp: “callBACk”,//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callBACk) jsonpCallBACk:”flightHandler”,//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写”?”，jQuery会自动为你处理数据 success: function(json){ alert(‘您查询到航班信息：票价： ’ + json.price + ’ 元，余票： ’ + json.tickets + ’ 张。’); },error: function(){ alert(‘fail’); } }); });

大佬总结

以上是大佬教程为你收集整理的Jsonp学习记录全部内容，希望文章能够帮你解决Jsonp学习记录所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。