项目结构:


测试页面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/




本文转载:CSDN博客