1.jsonp作用
例如：
- $.ajax({
- url:"http://www.google.com/search?q=jquery",
- success:function(json){
- alert(json.count)
- }
- });
2.jsonp原理
从别的网站引入js代码是可行的。
例如：
本地html引入外部网站的js
<script type="text/javascript" src="http://www.xukaiqiang.com/remote.js"></script>
remote.js文件中的内容为：alert("I'm a remote file!");
运行index01.html可以看到弹出了 I'm a remote file!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>远程js调用本地函数测试</title> <!-- 远程js文件内容 localHandler({"result":"I'm remote data!"}); 引入远程的JS文件，会自动调用localHandler方法 --> <script type="text/javascript"> var localHandler = function(data) { alert('Im local js method,called by remote js,return data is":"' + data.result); }; </script> <script type="text/javascript" src="http://www.xukaiqiang.com/remote.js"></script> </head> <body> </body> </html>
如上代码，远程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"));
//<strong><span style="color:#ff0000;">获取回调函数名</span></strong>
String callback = req.getParameter("callback");
//<strong><span style="color:#ff0000;">拼接动态JS代码</span></strong>
String output = callback + "(" + jsonData + ");
resp.setContentType("text/javascript");
PrintWriter out = resp.getWriter();
out.println(output);
// <strong><span style="color:#ff0000;">输出为 jsonpFunc({"symbol" : "IBM","price" : "91.42"}); </span></strong>
}
- src="http://www.google.com/jsonp&company=IBM&callback=jsonpFunc"></script>
<scripttype="text/javascript"
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.第二种
$(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("<div> " + obj.id + " </div>")
}
}
//$("#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');
}
});
});