zoukankan      html  css  js  c++  java
  • jQuery 调用jsonp实现与原理

    jQuery 调用jsonp实现与原理

    您的评价:
         
     收藏该经验    

    通过jQuery实现JSONP

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

    1.客户端代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <!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",
                 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.服务器端

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    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

    1
    2
    3
    4
    5
    6
    7
    <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>

    最后看到的结果就是

    000430_eyjj_1043369.jpg
    参考:
    http://zh.wikipedia.org/wiki/JSONP
    http://www.css88.com/jqapi-1.9/jQuery.ajax/

     


     




  • 相关阅读:
    bzoj2733 永无乡 平衡树按秩合并
    bzoj2752 高速公路 线段树
    bzoj1052 覆盖问题 二分答案 dfs
    bzoj1584 打扫卫生 dp
    bzoj1854 游戏 二分图
    bzoj3316 JC loves Mkk 二分答案 单调队列
    bzoj3643 Phi的反函数 数学 搜索
    有一种恐怖,叫大爆搜
    BZOJ3566 概率充电器 概率dp
    一些奇奇怪怪的过题思路
  • 原文地址:https://www.cnblogs.com/caryfang/p/4546061.html
Copyright © 2011-2022 走看看