jQuery 调用jsonp实现与原理-优快云博客

本文介绍如何使用jQuery实现JSONP跨域请求，并详细解释其工作原理。通过客户端和服务端代码示例，展示了如何配置回调函数及处理响应。

jQuery 调用jsonp实现与原理

您的评价:

收藏该经验

阅读目录

通过jQuery实现JSONP

一般的ajax是不能跨域请求的，因此需要使用一种特别的方式来实现跨域，其中的原理是利用 <script> 元素的这个开放策略，具体后面谈。

1.客户端代码

          <!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
          >JSIONP TEST</
          title
          >
         
          <
          script 
          type
          =
          "text/javascript" 
          src
          =
          jquery
          .min.js"></
          script
          >
         
          <
          script 
          type
          =
          "text/javascript"
          >
         
          jQuery(document).ready(function(){ 
         
          $.ajax({
         
          type: "get",
         
          url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
         
          dataType: "jsonp",
         
          jsonp: "callback",
         
          jsonpCallback:"jsonpCallback",
         
          success: function(json){
         
          alert('json:' + json);
         
          },
         
          error: function(){
         
          alert('fail');
         
          }
         
          });
         
          });
         
          </
          script
          >
         
          </
          head
          >
         
          <
          body
          >
         
          </
          body
          >
         
          </
          html
          >

jsonp
类型: String
在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。在jQuery 1.5，，设置jsonp选项为false，阻止了jQuery从加入"?callback"字符串的URL或试图使用"=?"转换。在这种情况下，你也应该明确设置jsonpCallback设置。例如, { jsonp: false, jsonpCallback: "callbackName" }

jsonpCallback
类型: String, Function
为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成一个独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。从jQuery 1.5开始，你也可以使用一个函数作为该参数设置，在这种情况下，该函数的返回值就是jsonpCallback的结果。

回到顶部

2.服务器端

    
          public 
          void 
          doGet(HttpServletRequest req, HttpServletResponse res)
         
          throws 
          ServletException, RemoteException, IOException{
         
          doPost(req, res);
         
          }
         
          public 
          void 
          doPost(HttpServletRequest req, HttpServletResponse res)
         
          throws 
          ServletException, IOException {
         
          res.setContentType(
          "text/javascript; charset=UTF-8"
          );
          //jsonp其实回写的就是一段JavaScript代码
         
          String functionName= req.getParameter(
          "callback"
          );
          //获得回调函数名字
         
          PrintWriter out = res.getWriter();            out.print(String.formate(
          "%s({'value': '001', 'text': 'show 001'})"
          , functionName));
         
          //jsonpCallback({'value': '001', 'text': 'show 001'}) 写到前端的结果
         
          out.flush();
         
          out.close();
         
          }

JSONP原理

我们不能从不同的服务器ajax数据，但是<script>就可以做到，我们在本地写一个函数，然后在远端引入的这个js文件对这个函数进行了调用，在调用过程中可以传递参数，这样子的一个过程就是jsonp
本地服务器 localhost

          <script type=
          "text/javascript"
          >    
          var 
          localFunction = 
          function
          (data){
         
          alert(
          '我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：'
          + data.result);
         
          };
         
          </script> 
         
          <script type=
          "text/javascript" 
          src=
          "http://remoteserver.com/remote.js"
          >
         
          //remote.js 其实就一句话  localFunction({"result":"我是远程js带来的数据"});，在浏览器加载完成之后，远端loading过来的这个文件可以执行本地的JavaScript代码，里面可以携带数据，不过需要有一个函数名作为媒介
         
          </script>