zoukankan      html  css  js  c++  java
  • JSONP简单例子

    jsonp的原理很简单,主要利用了HTML中所有有src的属性的标签可以跨域的特点,利用script的src进行get请求,后端输出一段js代码的字符串在script中便会执行。 当然后端输出普通的json字符串是不行的,后台应当输出fn(json)样式的字符串 ,fn代表要调用的js方法;json代表要处理的数据.这也是jsonp得名的原因.后台不会知道要调佣哪个js,所以需要前台把要调用的函数的名字发给后台. 
    一个简单的jsonp例子 后台 node版本
    
    var http = require('http');
    var server = new http.Server();
    server.listen(8000);
     
    server.on('request', function(request, response){
         var url = require('url');
         var params = url.parse(request.url, true).query;
         var fn = params.fn;
     
         response.writeHead(200, {'Content-type':'text/plain'});
         response.write(fn+'(22)');
         response.end();
    });
    
    前台
    <meta charset="UTF-8">
    <title></title>
    <script>
         var log = function(msg) {
              alert(msg);
         }
    </script>
     
    <script type="text/javascript">
     
     
         function getJsonp(url, fn) {
     
     
              var head = document.getElementsByTagName('head')[0];
              var script = document.createElement('script');
     
     
              script.onload = function() {
                   head.removeChild(script);
                   if (fn) {
                        fn();
                   }
              }
              script.src = url;
              head.appendChild(script);
         }
     
         getJsonp("http://192.168.1.103:8000/?fn=log");
    </script>
  • 相关阅读:
    【bzoj2115】[Wc2011] Xor
    【bzoj2460】[BeiJing2011]元素
    P2300 合并神犇 DP
    P1041 传染病控制 深搜
    P1038 神经网络 图论
    树状数组模板
    送外卖 状压DP
    士兵守卫(同P2016 战略游戏) 树形DP
    P1171 售货员的难题 喻队状压 DP
    P2062 分队问题 DP
  • 原文地址:https://www.cnblogs.com/sprinng/p/6559646.html
Copyright © 2011-2022 走看看