jQuery 调用jsonp实现与原理

时间 2019-11-06

原文原文链接

经过jQuery实现JSONP

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

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>

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

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

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
json

<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>

最后看到的结果就是
api

参考：
http://zh.wikipedia.org/wiki/JSONP
http://www.css88.com/jqapi-1.9/jQuery.ajax/
跨域