具体代码可以在我的git上下载:https://github.com/guoyansi/bridge

这里的后台使用java写的,如果不了解java的童鞋可以忽略下面这样图片.

bridge.js

  1. /*
  2.  *bridge桥梁的意思,bridge.js主要是为了架起前后端开发的桥梁.
  3.  *bridge.js类库旨在解决以下问题,这也是bridge.js目的及意义所在.
  4.  * 1.静态页面的发送post请求,会出现500错误,一个项目不可能全是get请求.
  5.  * 2.前后台彻底分离后,静态资源的访问有两种
  6.  *         2.1相对路径:需要用../来寻找目标资源,开发难度大
  7.  *         2.2绝对路径.每次需要手动添加根目录名称,根目录只要有变化修改的难度就会很大.
  8.  * 3.对于一些后台项目,会有超时管理.对于页面的零散的ajax请求怎么做到统一管理.
  9.  *     对超时时返回的数据及时作出响应,比跳转到登录页
  10.  * 4.前后台并行开发,提高工作效率,和产品质量.
  11.  * 5.前端开发不不依附于后端的开发工具,比如MyEclipse,Visual Studio.前端也有很多优秀的开发工具
  12.  * 6.分工协作,前后端分离是必然的趋势,我们不能停留在几十年前的开发模式里,一人独揽全栈,
  13.  *       环境变化这么快,不进步,就是退步.
  14.  * 7.前端各种技术日益成熟,比如代码压缩,模块化开发.前后台不分离,再好的技术对我们来说只是名词.
  15.  * 8.彻底分离时,会造成前端请求时出现跨域的尴尬境地,前端人员对于服务器环境的生疏,寸步难行.
  16.  * 9.每个ajax请求都有可能出错,同样的报错代码,总不能在每个ajax代码里都写一遍或重新调用一遍
  17.  * =========================================================================
  18.  * bridge.js是在jQuery的基础上做的二次封装.
  19.  * 1.ajax封装介绍(和jQuery的调用一样):
  20.  *     1.0.所有的请求被分为三种,因为请求方式不一样,路径格式也不一样.
  21.  *         跨域+远程==>彻底分离时,发出的请求.
  22.  *         只远程==>项目整合的时候,没有了跨域问题.
  23.  *         只本地==>请求前端的本地资源
  24.  *     1.1.一切post的请求都会被转换成远程请求.
  25.  *     1.2.get请求即可以访问本地资源,也可以发送远程请求
  26.  *     1.3.bridge.js不支持ajax的链式写法,因为ajax返回的是promise对象,
  27.  *         .done(),.fail()无法被被重写封装.(可惜!可惜!)
  28.  *  1.4.若有参数cross:true,就发送远程(+跨域)请求,未定义参数cross或cross:false发送本地请求
  29.  *     1.4.
  30.  *         1.4.1.既可以远程也可以本地请求的方法.
  31.  *             bg.ajax(opt)
  32.  *             bg.load(url,param,callback).
  33.  *             bg.get(url,param,callback,type).
  34.  *             bg.getJSON(url,param,callback).
  35.  *
  36.  *         1.4.2.因为无法添加参数cross:true,只能请求本地资源的方法
  37.  *             bg.getScript(url,callback).
  38.  *
  39.  *         1.4.3.本地无法发送post请求,只能发送远程请求的方法
  40.  *             bg.post().
  41.  *  1.5.bg.getHttpUrl(cross,url) 返回请求路径
  42.  * bg.inti配置介绍:
  43.  *         root:"",//根目录,前后端的项目名称(根目录)最好相同,整合的时候比较容易
  44.  *        view:"",//视图.前端的所有编码都放在一个目录下,这个目录就是视图
  45.  *        cross:true,//跨域.开发时这里是true.整合后,改为false.有跨域+远程==>远程
  46.  *      hostName:"http://172.20.12.243:8080",//主机.跨域时的主机名称
  47.  *        checkSession:false,//是否检测session失效的问题,有些网站不需要检测,但是大部分登录系统都要判断session
  48.  *        noSession:function(data){//sessiong失效时执行的函数
  49.  *        console.log("session失效,跳转页面");
  50.  *        }
  51.  *
  52.  *    后端配置:新建一个过滤器,
  53.  *    设置:
  54.  *    response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:8020");
  55.  *    或:
  56.  *    response.setHeader("Access-Control-Allow-Origin", "*");
  57.  *  前后端整合完毕后,屏蔽这个设置,就不存在跨域以及跨域带来的安全问题了.
  58.  *
  59.  */
  60. //////////////////////////////////////////////////////////////////
  61.  
  62. //////////////////////////////////////////////////////////////
  63. (function($,undefined) {
  64.     if($==null){
  65.         throw new Error("bridge出错了:没有找到jQuery或Zepto库.");
  66.     }
  67.  
  68.     /**
  69.      * Bridge的实例对象,
  70.      */
  71.     var objBridge=null;
  72.     /**
  73.      * 根函数
  74.      */
  75.     function Bridge() {
  76.         objBridge=this;
  77.         this.hostName="";
  78.         this.root="";
  79.         this.view="";
  80.         this.cross=false;
  81.        /* this.ajaxBefore=function(){};
  82.         this.ajaxEnd()=function(){};
  83.         this.ajaxFail=function(){};*/
  84.     }
  85.  
  86. /**
  87.  *session处理模块
  88.  */
  89.     Bridge.prototype.session={
  90.         checkSession:false,//是否检测session
  91.         noSession:function(data){//session失效如何处理,data为服务端返回的数据
  92.  
  93.         },
  94.     };
  95.     /*Bridge.prototype.ajaxFail=function(XMLHttpRequest, textStatus, errorThrown){
  96.         alert("服务器请求失败!");
  97.     }*/
  98.     /**
  99.      * 初始化Bridge的各个参数
  100.      * @param opt
  101.      */
  102.     Bridge.prototype.init=function(opt){
  103.         var k,value;
  104.         for(var key in opt){
  105.              k=key.toLowerCase();//将键值转换成小写,防止误传参数,导致程序无法运行
  106.              value=opt[key];
  107.             if(k==="nosession"){
  108.                 objBridge.session.noSession=value;
  109.             }
  110.             if(k==="checksession"){
  111.                 objBridge.session.checkSession=value;
  112.             }
  113.            /* if(k==="ajaxfail"){
  114.                 objBridge.ajaxFail=value;
  115.             }*/
  116.             if(k==="cross"){
  117.                 objBridge.cross=value;
  118.             }
  119.             if(k==="hostname"){
  120.                 objBridge.hostName=value;
  121.             }
  122.             if(k==="view"){
  123.                 objBridge.view=value;
  124.             }
  125.             if(k==="root"){
  126.                 objBridge.root=value;
  127.             }
  128.             /*if(k=="ajaxbefore"){
  129.                 objBridge.ajaxBefore=value;
  130.             }
  131.             if(k=="ajaxend"){
  132.                 objBridge.ajaxEnd=value;
  133.             }*/
  134.         }
  135.     };
  136.     function sessionFilter(data,xhr,jqXHR){
  137.         var type=typeof data;
  138.         var d=data;
  139.         if(type=="object"){
  140.  
  141.         }else if(type==="string"){
  142.             d=eval("("+d+")");
  143.         }else{
  144.             throw new Error("返回值的参数类型判断异常");
  145.         }
  146.         if(d.sessionStatus===-1){
  147.             objBridge.session.noSession(d);
  148.         }else{
  149.             return data;
  150.         }
  151.     }
  152.     /**
  153.      * 三种请求,
  154.      * 1.远程+跨域,==>bg.init.cross:true,ajaxOpt.cross:true
  155.      * 2.远程不跨域,==>bg.init.cross:false,ajaxOpt.cross:true
  156.      * 3.不跨域,不远程(本地)==>bg.init.cross不起作用,ajaxopt.cross:false或未定义
  157.      *
  158.      */
  159.     function getAjaxHttpType(optCross){
  160.         if(typeof optCross==="undefined"||optCross==false){
  161.             return 3;
  162.         }
  163.         else if(optCross==true){//设置了局部跨域参数
  164.             if(objBridge.cross){//远程+跨域
  165.                 return 1;
  166.             }else{//远程不跨域
  167.                 return 2;
  168.             }
  169.         }
  170.     }
  171.     /**
  172.      * 根据不同的请求,生成不同的路径
  173.      * @param type 请求路径
  174.      * @param url  当前路径
  175.      */
  176.     function getAjaxUrl(type,url){
  177.         var u="";
  178.         if(type===1){//远程+跨域
  179.             u=objBridge.hostName+"/"+objBridge.root+"/";
  180.         }else if(type===2){//远程不跨域
  181.             u="/"+objBridge.root+"/";
  182.         }else if(type===3){//不跨域,不远程(本地)
  183.             if(objBridge.view){
  184.                 u="/"+objBridge.root+"/"+objBridge.view+"/";
  185.             }else{
  186.                 u="/"+objBridge.root+"/";
  187.             }
  188.         }
  189.         return u+url;
  190.     }
  191.     /**
  192.      * 获取请求路径
  193.      * @param  cross
  194.      * @param  url
  195.      */
  196.     Bridge.prototype.getHttpUrl=function(cross,url){
  197.         return getAjaxUrl(getAjaxHttpType(cross),url);
  198.     }
  199.  
  200.     /**
  201.      * 若要发送远程跨域请求,
  202.      * 需要添加参数data.cross=true;
  203.      * 否则被视为本地请求
  204.      * obj 请求对象
  205.      * url    请求路径
  206.      * data    请求参数
  207.      * callback 回调函数 可不填
  208.      */
  209.     Bridge.prototype.load=function(obj,url,params,callback){
  210.         if(!(obj instanceof $)){//如果obj不是jquery对象
  211.             throw new Error("load的第一个参数obj不是jQuery对象.");
  212.         }
  213.         var type,httpType,url;
  214.         type=typeof params;
  215.         if (type==="function") {
  216.             callback = params;
  217.             params = undefined;
  218.         }
  219.         if(type==="object"){
  220.             params.cross=true;
  221.             httpType=getAjaxHttpType(params.cross);
  222.             url=getAjaxUrl(httpType,url);
  223.         }else if(type==="undefined"){//alert(1)
  224.             url=getAjaxUrl(3,url);
  225.         }
  226.          obj.load(url,params,callback);
  227.     };
  228.     /**
  229.      * post请求只能请求远程数据,
  230.      * 本地请求会报500错误.
  231.      */
  232.     Bridge.prototype.post=function(url,params,callback,type){
  233.         var t=typeof params;
  234.         var httpType;
  235.         if (t==="function") {
  236.             type = type || callback;
  237.             callback = params;
  238.             params = undefined;
  239.             t=typeof params;
  240.         }
  241.         url=getAjaxUrl(getAjaxHttpType(true),url);
  242.         $.post(url,params,callback,type);
  243.     }
  244.     /*
  245.      * 若要发送远程跨域请求,
  246.      * 需要添加参数data.cross=true;
  247.      * 否则被视为本地请求
  248.      */
  249.     Bridge.prototype.get=function(url,data,callback,type){
  250.         var httpType,url;
  251.         var t=typeof data;
  252.         if (t==="function") {
  253.             type = type || callback;
  254.             callback = data;
  255.             data = undefined;
  256.             t=typeof data;
  257.         }
  258.         if(t==="object"){
  259.             httpType=getAjaxHttpType(data.cross);
  260.         }else if(t==="undefined"){
  261.             httpType=3;
  262.         }else {
  263.             throw new Error("get请求的参数判断异常");
  264.         }
  265.         url=getAjaxUrl(httpType,url);
  266.         $.get(url,data,callback,type);
  267.     }
  268.     /*
  269.      * 若要发送远程跨域请求,
  270.      * 需要添加参数data.cross=true;
  271.      * 否则被视为本地请求
  272.      */
  273.     Bridge.prototype.getJSON=function(url, data, callback){
  274.         objBridge.get(url,data,callback,"json");
  275.     }
  276.     /*
  277.      * 因为无法添加参数,所以只能发送本地请求
  278.      */
  279.     Bridge.prototype.getScript=function(url,callback){
  280.         objBridge.get(url,undefined,callback,"script");
  281.     }
  282.     /**
  283.      * 1.跨域请求一定要添加参数cross:true,
  284.      * 2.本地请求可不写cross或cross:false
  285.      * opt,正常的$.ajax()参数但是跨域的话多一个cross:true
  286.      */
  287.     Bridge.prototype.ajax=function(opt){
  288.         var success;
  289.         if(typeof opt==="string"){//讲参数转换成对象型参数
  290.             opt={
  291.                 type:"get",
  292.                 url:opt
  293.             }
  294.         }
  295.         //session过滤
  296.         if(objBridge.session.checkSession){
  297.             if(typeof opt.success=="undefined"){
  298.                 opt.success=sessionFilter;
  299.             }
  300.             else{
  301.                 success=opt.success;
  302.                 opt.success=function(data,xhr,jqXHR){
  303.                     if(sessionFilter(data,xhr,jqXHR)!=undefined){
  304.                         success(data,xhr,jqXHR);
  305.                     }
  306.                 }
  307.             }
  308.         }
  309.         opt.url=getAjaxUrl(getAjaxHttpType(opt.cross),opt.url);
  310.         $.ajax(opt);
  311.     };
  312.  
  313.     /**
  314.      * 替换所有指定的字符
  315.      * str 字符串
  316.      * origin 需要替换的字符
  317.      * target 替换成这个字符
  318.      */
  319.     Bridge.prototype.replaceAll=function(str,origin,target){
  320.         if(str.indexOf(origin)<0){
  321.             return str;
  322.         }else{
  323.             return arguments.callee(str.replace(origin,target),origin,target);
  324.         }
  325.     }
  326.  
  327.     /**
  328.      * 格式化时间
  329.      * dateTime 时间(戳)
  330.      * 返回 yyyy-mm-dd
  331.      *
  332.      * 待完善
  333.      * 1.去除时分秒
  334.      *
  335.      *
  336.      *
  337.      *
  338.      */
  339.     Bridge.prototype.formateDate=function(dateTime,splitf){
  340.  
  341.         /**
  342.          * 2015-01-05苹果浏览器不支持,改成2015/01/05,
  343.          * dateTime+""是为了防止时间戳没有indexOf方法,报错.
  344.          */
  345.         dateTime=objBridge.replaceAll(dateTime+"","-","/");
  346.         dateTime=new Date(dateTime);
  347.         var currYear =dateTime.getFullYear();
  348.         var currM=dateTime.getMonth()+1;
  349.         var currD=dateTime.getDate();
  350.         if(currM<10){
  351.             currM="0"+currM;
  352.         }
  353.         if(currD<10){
  354.             currD="0"+currD;
  355.         }
  356.         if(!splitf||splitf==1){
  357.             return currYear+"-"+currM+"-"+currD;
  358.         }else if(splitf==2){
  359.             return currYear+"年"+currM+"月"+currD+"日";
  360.         }else if(splitf==3){
  361.             return currYear+"/"+currM+"/"+currD;
  362.         }
  363.     }
  364.     /**
  365.      * 获取时间中的各个元素
  366.      * dataTime  时间
  367.      * element 元素
  368.      * bg.getDateElement("2016-01-01","week");
  369.      *
  370.      */
  371.  
  372.     Bridge.prototype.getDateElement=function(dateTime,element){
  373.         var currM,currD,week;
  374.         dateTime=new Date(dateTime);
  375.         if(element=="yyyy"){
  376.             return dateTime.getFullYear();
  377.         }else if(element=="M"){
  378.             return getM();
  379.         }else if(element=="MM"){
  380.             currM=getM();
  381.             return currM<10?("0"+currM):currM;
  382.         }else if(element=="d"){
  383.             return getD();
  384.         }else if(element=="dd"){
  385.             currD=getD();
  386.             return currD<10?("0"+currD):currD;
  387.         }else if(element=="week"){
  388.             return dateTime.getDay();
  389.         }
  390.         function getD(){
  391.             return dateTime.getDate();
  392.         }
  393.         function getM(){
  394.             return dateTime.getMonth()+1;
  395.         }
  396.     }
  397.     /**
  398.      * 查询数组中是否存在指定元素
  399.      * arr 数组
  400.      * element 指定元素
  401.      */
  402.   Bridge.prototype.inArray=function(arr,element){
  403.       try{
  404.           if(!(arr instanceof Array)){
  405.               throw new Error("请传入数组");
  406.           }
  407.           for(var i in arr){
  408.               if(arr[i]===element){
  409.                   return true;
  410.               }
  411.           }
  412.           return false;
  413.  
  414.       }catch(e){
  415.           alert("inArray:>>"+e.message);
  416.           console.error("inArray:>>"+e.message);
  417.       }
  418.  
  419.   }
  420.  
  421. /**
  422. * 当填写参数h后,解析你给的参数,如果为空自动从获取浏览器的地址
  423. * 测试路径:>>>http://127.0.0.1:8020/url/index.html?id=1.2&gys=7777777777777777777777777&name=思思博士#api/126
  424. * name是需要获取的值,
  425. * h是指定href还是要自动获取.
  426. *
  427. *
  428. * bg.urlResolve("param")  获取所有参数
  429. * bg.urlResolve("param:name")  获取参数name
  430. */
  431.     Bridge.prototype.urlResolve=function(name,h){
  432.         if(!name){
  433.             console.error("urlResolve缺乏name参数");
  434.             return "";
  435.         }
  436.         var href=h?h:window.location.href;
  437.         var condition;//条件
  438.         if(name.indexOf(":")>-1){
  439.             condition=name.split(":");
  440.             name=condition[0];
  441.             condition=condition[1];
  442.         }
  443.  
  444.         var search=function(){
  445.             if(h){
  446.                 return "?"+href.split("?")[1];
  447.             }else{
  448.                 return window.location.search;
  449.             }
  450.         }
  451.         var searchNoP=function(){//不带问号的条件
  452.             return search().substr(1);
  453.         }
  454.         var getPageNameAndExtName=function(){//获取页面名称和扩展名称
  455.             var arr=href.split("?")[0].split("/");
  456.             var len=arr.length;
  457.             return arr[len-1];
  458.         };
  459.            /**
  460.              * 填写了key获取指定的参数
  461.              * 没填写key参数获取所有的参数,以json格式返回
  462.              */
  463.          var getParam=function(key){//获取参数
  464.             var query=searchNoP();
  465.             if(!query){
  466.                 return null;
  467.             }
  468.             var params={};
  469.             var paramArr=query.split("&");
  470.             var len=paramArr.length;
  471.             var params={};
  472.             var itemParam=[];
  473.             for(var i=0;i<len;i++){
  474.                 itemParam=paramArr[i].split("=");
  475.                 params[itemParam[0]]=itemParam[1];
  476.             }
  477.             if(key){
  478.                 return params[key]?params[key]:"";
  479.             }else{
  480.                 return params;
  481.             }
  482.         }
  483.  
  484.         if(name==="href"){//获取路径
  485.             return href;
  486.         }else if(name==="search"){// 查询(参数)部分  带问号的
  487.             return search();
  488.         }else if(name==="searchNo?"){//不带问号的
  489.             return searchNoP();
  490.         }else if(name==="pathname"){//页面路径 url/index.html
  491.             if(h){
  492.                 alert("带完善!");
  493.             }else{
  494.                 return window.location.pathname;
  495.             }
  496.         }else if(name==="port"){//URL 的端口部分     8080
  497.             return window.location.port;
  498.         }else if(name==="protocol"){//URL 的协议部分返回值 http:
  499.             return window.location.protocol
  500.         }else if(name==="host"){//url主机部分返回值   127.0.0.1:8020
  501.             return window.location.host;
  502.         }else if(name==="hash"){//锚点后面的值  #api/126
  503.             return window.location.hash;
  504.         }else if(name==="hashNo#"){//不带#号的锚点的值  api/126
  505.             return window.location.hash.substr("1");
  506.         }else if(name==="pageName"){//获取页面名称
  507.             return getPageNameAndExtName().split(".")[0];
  508.         }else if(name==="extName"){//获取扩展名
  509.             return getPageNameAndExtName().split(".")[1];
  510.         }else if(name==="param"){//获取参数
  511.             return getParam(condition?condition:"");
  512.         }else{
  513.             console.error("urlResolve未匹配到你要获取的参数");
  514.             return "";
  515.         }
  516.     };  
  517.  
  518.     window.bg=new Bridge();
  519. })((typeof jQuery!=="undefined")?jQuery:(typeof Zepto!=="undefined"?Zepto:null));
  520.  
  521. /*bg.init({
  522.     root:"b",//项目名称
  523.     view:"",//视图
  524.     cross:true,//跨域
  525.     hostName:"http://192.168.1.206:8080",//主机
  526.     checkSession:false,
  527.     noSession:function(data){
  528.         console.log("session失效,跳转页面");
  529.     }
  530. });*/
  531.  
  532. /*****************************************************************************
  533.  * 调用
  534.  * <button onclick="app()">测试hb</button>
  535.  ******************************************************************************
  536.  */
  537.  
  538. /*function app(){
  539.     console.log(bg.getHttpUrl(true,"abc"));
  540.     return;
  541.     bg.ajax({
  542.         type:"get",
  543.         url:"1.txt",
  544.         //url:"1.json",
  545.         //cross:true,
  546.         //cross:false,
  547.         data:{sessionFlag:"yes"},
  548.         dataType:"text",
  549.         success:function(data,textStatus,jqXHR){
  550.             console.log(data);
  551.             //alert(data.name);
  552.             $("#content").html(data);
  553.         }
  554.     });
  555.     //$("#content").load("1.json",function(){});
  556.     //bg.load($("#content"),"CROS",{});
  557.     //bg.load($("#content"),"Jsonp2",{cross:true});
  558.     //bg.get("1.json",{},function(data){
  559.         console.log(data);
  560.     //},"json");
  561.     //bg.get("Jsonp2",{session:"no",cross:true},function(data){
  562.       //  console.log(data);
  563.     //},"json");
  564. }*/

=====================2016年-02-03更新=============================================

bridge.js2.0

1.支持多终端跨域

2.去除了session过滤,交由jquery的ajax全局设置

  1. /*
  2.  *bridge桥梁的意思,bridge.js主要是为了架起前后端开发的桥梁.
  3.  *bridge.js类库旨在解决以下问题,这也是bridge.js目的及意义所在.
  4.  * 1.静态页面的发送post请求,会出现500错误,一个项目不可能全是get请求.
  5.  * 2.前后台彻底分离后,静态资源的访问有两种
  6.  *         2.1相对路径:需要用../来寻找目标资源,开发难度大
  7.  *         2.2绝对路径.每次需要手动添加根目录名称,根目录只要有变化修改的难度就会很大.
  8.  * 3.对于一些后台项目,会有超时管理.对于页面的零散的ajax请求怎么做到统一管理.
  9.  *     对超时时返回的数据及时作出响应,比跳转到登录页
  10.  * 4.前后台并行开发,提高工作效率,和产品质量.
  11.  * 5.前端开发不不依附于后端的开发工具,比如MyEclipse,Visual Studio.前端也有很多优秀的开发工具
  12.  * 6.分工协作,前后端分离是必然的趋势,我们不能停留在几十年前的开发模式里,一人独揽全栈,
  13.  *       环境变化这么快,不进步,就是退步.
  14.  * 7.前端各种技术日益成熟,比如代码压缩,模块化开发.前后台不分离,再好的技术对我们来说只是名词.
  15.  * 8.彻底分离时,会造成前端请求时出现跨域的尴尬境地,前端人员对于服务器环境的生疏,寸步难行.
  16.  * 9.每个ajax请求都有可能出错,同样的报错代码,总不能在每个ajax代码里都写一遍或重新调用一遍
  17.  * =========================================================================
  18.  * bridge.js是在jQuery的基础上做的二次封装.
  19.  * 1.ajax封装介绍(和jQuery的调用一样):
  20.  *     1.0.所有的请求被分为三种,因为请求方式不一样,路径格式也不一样.
  21.  *         跨域+远程==>彻底分离时,发出的请求.
  22.  *         只远程==>项目整合的时候,没有了跨域问题.
  23.  *         只本地==>请求前端的本地资源
  24.  *     1.1.一切post的请求都会被转换成远程请求.
  25.  *     1.2.get请求即可以访问本地资源,也可以发送远程请求
  26.  *     1.3.bridge.js不支持ajax的链式写法,因为ajax返回的是promise对象,
  27.  *         .done(),.fail()无法被被重写封装.(可惜!可惜!)
  28.  *  1.4.若有参数cross:true,就发送远程(+跨域)请求,未定义参数cross或cross:false发送本地请求
  29.  *     1.4.
  30.  *         1.4.1.既可以远程也可以本地请求的方法.
  31.  *             bg.ajax(opt)
  32.  *             bg.load(url,param,callback).
  33.  *             bg.get(url,param,callback,type).
  34.  *             bg.getJSON(url,param,callback).
  35.  *
  36.  *         1.4.2.因为无法添加参数cross:true,只能请求本地资源的方法
  37.  *             bg.getScript(url,callback).
  38.  *
  39.  *         1.4.3.本地无法发送post请求,只能发送远程请求的方法
  40.  *             bg.post().
  41.  *  1.5.bg.getHttpUrl(cross,url) 返回请求路径,打印ajax请求的路劲
  42.  * bg.inti配置介绍:
  43.  *         root:"",//根目录,前后端的项目名称(根目录)最好相同,整合的时候比较容易
  44.  *        view:"",//视图.前端的所有编码都放在一个目录下,这个目录就是视图
  45.  *        cross:true,//跨域.开发时这里是true.整合后,改为false.有跨域+远程==>远程
  46.  *      hostName:"http://172.20.12.243:8080",//主机.跨域时的主机名称
  47.  *        checkSession:false,//是否检测session失效的问题,有些网站不需要检测,但是大部分登录系统都要判断session
  48.  *        noSession:function(data){//sessiong失效时执行的函数
  49.  *        console.log("session失效,跳转页面");
  50.  *        }
  51.  *
  52.  *    后端配置:新建一个过滤器,
  53.  *    设置:
  54.  *    response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:8020");
  55.  *    或:
  56.  *    response.setHeader("Access-Control-Allow-Origin", "*");
  57.  *  前后端整合完毕后,屏蔽这个设置,就不存在跨域以及跨域带来的安全问题了.
  58.  *
  59.  */
  60. //////////////////////////////////////////////////////////////////
  61.  
  62. //////////////////////////////////////////////////////////////
  63. (function($,undefined) {
  64.     if($==null){
  65.         throw new Error("bridge出错了:没有找到jQuery或Zepto库.");
  66.     }
  67.  
  68.     /**
  69.      * Bridge的实例对象,
  70.      */
  71.     var objBridge=null;
  72.     var config={
  73.         servers:{}
  74.     }
  75.     /**
  76.      * 根函数
  77.      */
  78.     function Bridge() {
  79.         objBridge=this;
  80.         this.getConfig=function(){
  81.             return config;
  82.         }
  83.     }
  84.  
  85. /**
  86.  *session处理模块
  87.  */
  88.     /*Bridge.prototype.session={
  89.         checkSession:false,//是否检测session
  90.         noSession:function(data){//session失效如何处理,data为服务端返回的数据
  91.  
  92.         },
  93.     };*/
  94.     /**
  95.      * 初始化Bridge的各个参数
  96.      * @param opt
  97.      */
  98.     Bridge.prototype.init=function(opt){
  99.        $.extend(config, opt);
  100.        var hostName=window.location.protocol+"//"+window.location.host;
  101.        config.servers["local"]={hostName:hostName,cross:false,root:config.root};
  102.     };
  103.  
  104.     /**
  105.      * 对于传递过来的server参数进行统一格式
  106.      * @param server 可能是字符串也可能是对象
  107.      */
  108.     function resolveParamServer(server){
  109.         var type=typeof server;
  110.         if(type=="object"){
  111.  
  112.         }else if(type=="string"&&server){
  113.             server=config.servers[server];
  114.         }else{
  115.             server=config.servers["local"];
  116.         }
  117.         return server;
  118.     }
  119.  
  120.     /**
  121.      * 三种请求,
  122.      * 1.远程+跨域,==>bg.init.cross:true,ajaxOpt.cross:true
  123.      * 2.远程不跨域,==>bg.init.cross:false,ajaxOpt.cross:true
  124.      * 3.不跨域,不远程(本地)==>bg.init.cross不起作用,ajaxopt.cross:false或未定义
  125.      *
  126.      */
  127.     function getAjaxHttpType(server,clientCross){
  128.         server=resolveParamServer(server);
  129.         var serverCross=server.cross;
  130.         if(typeof clientCross=="undefined"||clientCross==false){//本地请求
  131.             return 3;
  132.         }
  133.         else if(clientCross==true){//设置了局部跨域参数
  134.             if(serverCross==true){//远程+跨域
  135.                 return 1;
  136.             }else{//远程不跨域
  137.                 return 2;
  138.             }
  139.         }
  140.     }
  141.     /**
  142.      * 根据不同的请求,生成不同的路径
  143.      * @param type 请求路径
  144.      * @param url  当前路径
  145.      */
  146.     function getAjaxUrl(type,url,server){
  147.         server=resolveParamServer(server);
  148.         var u="";
  149.         if(type===1){//远程+跨域
  150.             u=server.hostName+"/"+server.root+"/";
  151.         }else if(type===2){//远程不跨域
  152.             u="/"+server.root+"/";
  153.         }else if(type===3){//不跨域,不远程(本地)
  154.             if(config.view){
  155.                 u="/"+config.root+"/"+config.view+"/";
  156.             }else{
  157.                 u="/"+config.root+"/";
  158.             }
  159.         }
  160.         return u+url;
  161.     }
  162.     /**
  163.      * 获取请求路径  测试请求的路劲
  164.      * @param  server {hostName:"http:127.0.0.1:8080",cross:true,root:"itemName"}
  165.      * @param  param {url:}    usr/getData
  166.      * @return http:127.0.0.1:8080/itemName/usr/getData
  167.      */
  168.     Bridge.prototype.getHttpUrl=function(server,url,cross){
  169.         var type=getAjaxHttpType(server,cross);
  170.         return getAjaxUrl(type,url,server);
  171.     }
  172.     /**
  173.      * 若要发送远程跨域请求,
  174.      * 需要添加参数data.cross=true;
  175.      * 否则被视为本地请求
  176.      * obj 请求对象
  177.      * url    请求路径
  178.      * data    请求参数
  179.      * callback 回调函数 可不填
  180.      */
  181.     Bridge.prototype.load=function(obj,url,params,callback){
  182.         if(!(obj instanceof $)){//如果obj不是jquery对象
  183.             throw new Error("load的第一个参数obj不是jQuery对象.");
  184.         }
  185.         var type,httpType,url;
  186.         type=typeof params;
  187.         if (type==="function") {
  188.             callback = params;
  189.             params = undefined;
  190.         }
  191.         if(type==="object"){
  192.             params.cross=true;
  193.             httpType=getAjaxHttpType(params.server,true);
  194.             url=getAjaxUrl(httpType,url,params.server);
  195.         }else if(type==="undefined"){//alert(1)
  196.             url=getAjaxUrl(3,url,params.server);
  197.         }
  198.          obj.load(url,params,callback);
  199.     };
  200.     /**
  201.      * post请求只能请求远程数据,
  202.      * 本地请求会报500错误.
  203.      */
  204.     Bridge.prototype.post=function(url,params,callback,type){
  205.         var t=typeof params;
  206.         var httpType;
  207.         if (t==="function") {
  208.             type = type || callback;
  209.             callback = params;
  210.             params = {};
  211.            //t=typeof params;
  212.         }
  213.         params.cross=true;
  214.         url=getAjaxUrl(getAjaxHttpType(params.server,true),url,params.server);
  215.         $.post(url,params,callback,type);
  216.     }
  217.     /*
  218.      * 若要发送远程跨域请求,
  219.      * 需要添加参数data.cross=true;
  220.      * 否则被视为本地请求
  221.      */
  222.     Bridge.prototype.get=function(url,data,callback,type){
  223.         var httpType,url;
  224.         var t=typeof data;
  225.         var server="";
  226.         if (t==="function") {
  227.             type = type || callback;
  228.             callback = data;
  229.             data = undefined;
  230.             t=typeof data;
  231.         }
  232.         if(t==="object"){
  233.             httpType=getAjaxHttpType(data.server,data.cross);
  234.             server=data.server;
  235.         }else if(t==="undefined"){
  236.             httpType=3;
  237.         }else {
  238.             throw new Error("get请求的参数判断异常");
  239.         }
  240.         url=getAjaxUrl(httpType,url,server);
  241.         $.get(url,data,callback,type);
  242.     }
  243.     /*
  244.      * 若要发送远程跨域请求,
  245.      * 需要添加参数data.cross=true;
  246.      * 否则被视为本地请求
  247.      */
  248.     Bridge.prototype.getJSON=function(url, data, callback){
  249.         objBridge.get(url,data,callback,"json");
  250.     }
  251.     /*
  252.      * 因为无法添加参数,所以只能发送本地请求
  253.      */
  254.     Bridge.prototype.getScript=function(url,callback){
  255.         objBridge.get(url,undefined,callback,"script");
  256.     }
  257.     /**
  258.      * 1.跨域请求一定要添加参数cross:true,
  259.      * 2.本地请求可不写cross或cross:false
  260.      * opt,正常的$.ajax()参数但是跨域的话多一个cross:true
  261.      */
  262.     Bridge.prototype.ajax=function(opt){
  263.         var success;
  264.         if(typeof opt==="string"){//将参数转换成对象型参数
  265.             opt={
  266.                 type:"get",
  267.                 url:opt
  268.             }
  269.         }
  270.         opt.url=getAjaxUrl(getAjaxHttpType(opt.server,opt.cross),opt.url,opt.server);
  271.         $.ajax(opt);
  272.     };
  273.  
  274.     /**
  275.      * 替换所有指定的字符
  276.      * str 字符串
  277.      * origin 需要替换的字符
  278.      * target 替换成这个字符
  279.      */
  280.     Bridge.prototype.replaceAll=function(str,origin,target){
  281.         if(str.indexOf(origin)<0){
  282.             return str;
  283.         }else{
  284.             return arguments.callee(str.replace(origin,target),origin,target);
  285.         }
  286.     }
  287.  
  288.     /**
  289.      * 格式化时间
  290.      * dateTime 时间(戳)
  291.      * 返回 yyyy-mm-dd
  292.      *
  293.      * 待完善
  294.      * 1.去除时分秒
  295.      *
  296.      *
  297.      *
  298.      *
  299.      */
  300.     Bridge.prototype.formateDate=function(dateTime,splitf){
  301.  
  302.         /**
  303.          * 2015-01-05苹果浏览器不支持,改成2015/01/05,
  304.          * dateTime+""是为了防止时间戳没有indexOf方法,报错.
  305.          */
  306.         dateTime=objBridge.replaceAll(dateTime+"","-","/");
  307.         dateTime=new Date(dateTime);
  308.         var currYear =dateTime.getFullYear();
  309.         var currM=dateTime.getMonth()+1;
  310.         var currD=dateTime.getDate();
  311.         if(currM<10){
  312.             currM="0"+currM;
  313.         }
  314.         if(currD<10){
  315.             currD="0"+currD;
  316.         }
  317.         if(!splitf||splitf==1){
  318.             return currYear+"-"+currM+"-"+currD;
  319.         }else if(splitf==2){
  320.             return currYear+"年"+currM+"月"+currD+"日";
  321.         }else if(splitf==3){
  322.             return currYear+"/"+currM+"/"+currD;
  323.         }
  324.     }
  325.     /**
  326.      * 获取时间中的各个元素
  327.      * dataTime  时间
  328.      * element 元素
  329.      * bg.getDateElement("2016-01-01","week");
  330.      *
  331.      */
  332.  
  333.     Bridge.prototype.getDateElement=function(dateTime,element){
  334.         var currM,currD,week;
  335.         dateTime=new Date(dateTime);
  336.         if(element=="yyyy"){
  337.             return dateTime.getFullYear();
  338.         }else if(element=="M"){
  339.             return getM();
  340.         }else if(element=="MM"){
  341.             currM=getM();
  342.             return currM<10?("0"+currM):currM;
  343.         }else if(element=="d"){
  344.             return getD();
  345.         }else if(element=="dd"){
  346.             currD=getD();
  347.             return currD<10?("0"+currD):currD;
  348.         }else if(element=="week"){
  349.             return dateTime.getDay();
  350.         }
  351.         function getD(){
  352.             return dateTime.getDate();
  353.         }
  354.         function getM(){
  355.             return dateTime.getMonth()+1;
  356.         }
  357.     }
  358.     /**
  359.      * 查询数组中是否存在指定元素
  360.      * arr 数组
  361.      * element 指定元素
  362.      */
  363.   Bridge.prototype.inArray=function(arr,element){
  364.       try{
  365.           if(!(arr instanceof Array)){
  366.               throw new Error("请传入数组");
  367.           }
  368.           for(var i in arr){
  369.               if(arr[i]===element){
  370.                   return true;
  371.               }
  372.           }
  373.           return false;
  374.  
  375.       }catch(e){
  376.           alert("inArray:>>"+e.message);
  377.           console.error("inArray:>>"+e.message);
  378.       }
  379.  
  380.   }
  381.  
  382. /**
  383. * 当填写参数h后,解析你给的参数,如果为空自动从获取浏览器的地址
  384. * 测试路径:>>>http://127.0.0.1:8020/url/index.html?id=1.2&gys=7777777777777777777777777&name=思思博士#api/126
  385. * name是需要获取的值,
  386. * h是指定href还是要自动获取.
  387. *
  388. *
  389. * bg.urlResolve("param")  获取所有参数
  390. * bg.urlResolve("param:name")  获取参数name
  391. */
  392.     Bridge.prototype.urlResolve=function(name,h){
  393.         if(!name){
  394.             console.error("urlResolve缺乏name参数");
  395.             return "";
  396.         }
  397.         var href=h?h:window.location.href;
  398.         var condition;//条件
  399.         if(name.indexOf(":")>-1){
  400.             condition=name.split(":");
  401.             name=condition[0];
  402.             condition=condition[1];
  403.         }
  404.  
  405.         var search=function(){
  406.             if(h){
  407.                 return "?"+href.split("?")[1];
  408.             }else{
  409.                 return window.location.search;
  410.             }
  411.         }
  412.         var searchNoP=function(){//不带问号的条件
  413.             return search().substr(1);
  414.         }
  415.         var getPageNameAndExtName=function(){//获取页面名称和扩展名称
  416.             var arr=href.split("?")[0].split("/");
  417.             var len=arr.length;
  418.             return arr[len-1];
  419.         };
  420.            /**
  421.              * 填写了key获取指定的参数
  422.              * 没填写key参数获取所有的参数,以json格式返回
  423.              */
  424.          var getParam=function(key){//获取参数
  425.             var query=searchNoP();
  426.             if(!query){
  427.                 return null;
  428.             }
  429.             var params={};
  430.             var paramArr=query.split("&");
  431.             var len=paramArr.length;
  432.             var params={};
  433.             var itemParam=[];
  434.             for(var i=0;i<len;i++){
  435.                 itemParam=paramArr[i].split("=");
  436.                 params[itemParam[0]]=itemParam[1];
  437.             }
  438.             if(key){
  439.                 return params[key]?params[key]:"";
  440.             }else{
  441.                 return params;
  442.             }
  443.         }
  444.  
  445.         if(name==="href"){//获取路径
  446.             return href;
  447.         }else if(name==="search"){// 查询(参数)部分  带问号的
  448.             return search();
  449.         }else if(name==="searchNo?"){//不带问号的
  450.             return searchNoP();
  451.         }else if(name==="pathname"){//页面路径 url/index.html
  452.             if(h){
  453.                 alert("带完善!");
  454.             }else{
  455.                 return window.location.pathname;
  456.             }
  457.         }else if(name==="port"){//URL 的端口部分     8080
  458.             return window.location.port;
  459.         }else if(name==="protocol"){//URL 的协议部分返回值 http:
  460.             return window.location.protocol;
  461.         }else if(name==="host"){//url主机部分返回值   127.0.0.1:8020
  462.             return window.location.host;
  463.         }else if(name==="hash"){//锚点后面的值  #api/126
  464.             return window.location.hash;
  465.         }else if(name==="hashNo#"){//不带#号的锚点的值  api/126
  466.             return window.location.hash.substr("1");
  467.         }else if(name==="pageName"){//获取页面名称
  468.             return getPageNameAndExtName().split(".")[0];
  469.         }else if(name==="extName"){//获取扩展名
  470.             return getPageNameAndExtName().split(".")[1];
  471.         }else if(name==="param"){//获取参数
  472.             return getParam(condition?condition:"");
  473.         }else{
  474.             console.error("urlResolve未匹配到你要获取的参数");
  475.             return "";
  476.         }
  477.     };
  478.     window.bg=new Bridge();
  479. })((typeof jQuery!=="undefined")?jQuery:(typeof Zepto!=="undefined"?Zepto:null));
  480.  
  481. /*bg.init({
  482.     root:"b",//项目名称
  483.     view:"",//视图
  484.     cross:true,//跨域
  485.     hostName:"http://192.168.1.206:8080",//主机
  486.     checkSession:false,
  487.     noSession:function(data){
  488.         console.log("session失效,跳转页面");
  489.     }
  490. });*/
  491.  
  492. /*****************************************************************************
  493.  * 调用
  494.  * <button onclick="app()">测试hb</button>
  495.  ******************************************************************************
  496.  */
  497.  
  498. /*bg.init({
  499.                 root:"bridge",
  500.                 view:"",
  501.                 servers:{
  502.                     "s1":{hostName:"http://192.168.6.130:8080",root:"bridge",cross:true},
  503.                     "s2":{hostName:"http://192.168.6.130:8080",root:"bridge2",cross:true}
  504.                 }
  505.             });
  506.  
  507.             function app(){
  508.                 //打印配置信息
  509.                 console.log(bg.getConfig());
  510.                 bg.ajax({
  511.                     type:"get",
  512.                     url:"Jsonp2",
  513.                     dataType:"text",
  514.                     server:"s1",
  515.                     cross:true,
  516.                     success:function(data){
  517.                         console.log(data);
  518.                     }
  519.                 });
  520.                 bg.ajax({
  521.                     type:"get",
  522.                     url:"jsonp",
  523.                     dataType:"text",
  524.                     server:"s2",
  525.                     cross:true,
  526.                     success:function(data){
  527.                         console.log(data);
  528.                     }
  529.                 });
  530.                 bg.get("1.txt",function(data){
  531.                     console.log("get1结果:>>")
  532.                     console.log(data);
  533.                 },"text");
  534.                 bg.get("1.txt",{},function(data){
  535.                     console.log("get2结果:>>")
  536.                     console.log(data);
  537.                 },"text");
  538.                 //500错误
  539.                 bg.post("1.txt",function(data){
  540.                     console.log("post结果:>>")
  541.                     console.log(data);
  542.                 },"text");
  543.                 //500错误
  544.                 bg.load($("#msg"),"1.txt",function(data){
  545.                     console.log("load结果:>>")
  546.                     console.log(data);
  547.                 });
  548.  
  549.                 //打印上面ajax请求的最终的请求路劲(用于测试,和调试)
  550.                 console.log(bg.getHttpUrl({hostName:"http://192.168.6.130:8080",cross:true,root:"bridge"},"Jsonp2",true));
  551.                 console.log(bg.getHttpUrl({hostName:"http://192.168.6.130:8080",cross:true,root:"bridge2"},"jsonp",true));
  552.             }*/

前后台彻底分离的核心文件bridge.js.的更多相关文章

  1. Yii2 基础模板前后台登录分离

    1.用GII 生成一个模块(modules)名字为 admin 2.在./config/web.php 中加入如下配置 'modules' => [ 'admin' => [ 'class ...

  2. discuz 3.x 核心文件class_core.php解析

    class_core.php是discuz 3.x的核心文件,几乎所有PHP脚本都有引用此文件初始化论坛运行环境.以下解析引用3.2版discuz. line 12-15:常量定义IN_DISCUZ: ...

  3. [No00007A]没有文件扩展".js"的脚本引擎 解决办法

    在命令行运行JScript脚本时,遇到如下的错误提示: “输入错误: 没有文件扩展“.js”的脚本引擎.” 这样的错误,原因是因为JS扩展名的文件被其他软件关联了,需要取消关联. 如系统中安装了ULT ...

  4. WebService核心文件【server-config.wsdd】详解及调用示例

    WebService核心文件[server-config.wsdd]详解及调用示例 作者:Vashon 一.准备工作 导入需要的jar包: 二.配置web.xml 在web工程的web.xml中添加如 ...

  5. ES6,ES2105核心功能一览,js新特性详解

    ES6,ES2105核心功能一览,js新特性详解 过去几年 JavaScript 发生了很大的变化.ES6(ECMAScript 6.ES2105)是 JavaScript 语言的新标准,2015 年 ...

  6. Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结

    上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 问题总结 作者:轻舞肥羊 日期:2012-11-26 http://www.blogjava.net/fi ...

  7. jquery，js引入css文件，js引入头尾

    jquery,js引入css文件,js引入头尾 今天在项目中,需要把20多个页面加上头和尾部,头和尾是我写的,所以小师傅把这个工作交给我了. 我开始往里面加,先引入common.css,在body开始 ...

  8. 没有文件扩展".js"的脚本引擎 解决办法

    在命令行运行JScript脚本时,遇到如下的错误提示: “输入错误: 没有文件扩展“.js”的脚本引擎.” 这样的错误,原因是因为JS扩展名的文件被其他软件关联了,需要取消关联. 如系统中安装了ULT ...

  9. NET Core 静态文件及JS包管理器（npm, Bower）的使用

    NET Core 静态文件及JS包管理器(npm, Bower)的使用 文章目录 在 ASP.NET Core 中添加静态文件 使用npm管理JavaScript包 使用Bower管理JavaScri ...

随机推荐

  1. 【转】WMI使用的WIN32_类库名

    ShadowBy--Win32_ShadowContext--Win32_ShadowCopy--Win32_ShadowDiffVolumeSupport--Win32_ShadowFor--Win ...

  2. 【性能诊断】八、并发场景的性能分析（windbg案例，连接泄露）

    此前遇到一个项目反馈系统宕机问题,摘要描述如下: 系统不定期出现卡死现象,在多个模块不同功能上都出现过,未发现与特定功能相关的明显规律: 当系统出现卡死现象时,新的用户无法登陆系统: 跟踪应用服务器, ...

  3. mysql 远程访问

    如何开启MySQL的远程帐号-1)首先以 root 帐户登陆 MySQL 在 Windows 主机中点击开始菜单,运行,输入“cmd”,进入控制台,然后cd 进入MySQL 的 bin 目录下,然后输 ...

  4. 08socket编程

    有个SO_REUSEADDR值得注意一下: 服务器端尽可能使用SO_REUSEADDR 在绑定之前尽可能调用setsockopt来设置SO_REUSEADDR套接字选项. 使用SO_REUSEADDR ...

  5. java 反射机制01

    // */ // ]]>   java反射机制01 Table of Contents 1 反射机制 2 反射成员 2.1 java.lang.Class 2.2 Constructor 2.3 ...

  6. 请使用GameBench.jar 文件启动 GameBench服务

    请使用GameBench.jar 文件启动 GameBench服务 电脑上安装JAVA JRE:http://www.oracle.com/technetwork/java/javase/downlo ...

  7. hi35183e增加exfat文件系统的支持

    64G-128G的tf卡文件系统格式为exfat,而hi3518e默认只支持fat32格式的tf卡.为了挂载64G以上的tf卡,只能将sd卡先格式化成FAT32.鉴于exfat性能比FAT32强,因此 ...

  8. SQL Server 格式化时间 之 format函数

    select format(getdate(),'yyyy-MM-dd HH:mm:ss'); 要注意 yyyy-MM-dd这里MM是大写的, HH:mm:ss这里HH是大写的,mm是小写的,大小写意 ...

  9. TMS320C54x系列DSP的CPU与外设——第1章　绪论

    第1章 绪论 TMS320C54x DSP是TMS320系列DSP产品中的定点数字信号处理器.C54x DSP满足了实时嵌入式应用的一些要求,例如通信方面的应用. C54x的中央处理单元(CPU)具有 ...

  10. 关于List泛型的强制转换

    当我们从数据库中查询出一些数据,有时返回的结果可能是List<Object>类型,而我们清楚的知道它的准确类型是List<User>,可能我们想直接的去进行类型的转换,你可能会 ...