项目结构:
测试页面jsonp.html:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试页面</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: "get",
async: false,
url: "http://localhost:8080/testSevletDynamicWeb/js/remote.js?code=CA1998",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
// jsonp:"jsonpCallback",//写成jsonpCallback也可以
jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
success: function(json){
alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。');
},
error: function(){
alert('fail');
}
});
});
//不管有没有jsonpCallback:"flightHandler",打开页面都会自动执行flightHandler()方法
function flightHandler(r){
alert("我是callback方法! "+r.code);
}
//不会自动执行
function flight(r){
alert("我是flight方法! "+r.code);
}
</script>
</head>
<body>
</body>
</html>
remote.js:
flightHandler({
"code": "CA19981",
"price": 1780,
"tickets": 5
});
结果:会alert两次,第一次是“您查到航班信息...”,第二次“我是callback...”。
jsonp.html中的flightHandler()是回调函数,与remote.js中的flightHandler()同名。
参考:http://www.sojson.com/blog/121.html
http://justcoding.iteye.com/blog/1366102/
http://kb.cnblogs.com/page/139725/