具體代碼可以在我的git上下載:https://github.com/guoyansi/bridge
這里的后台使用java寫的,如果不了解java的童鞋可以忽略下面這樣圖片.
bridge.js
/* *bridge橋梁的意思,bridge.js主要是為了架起前后端開發的橋梁. *bridge.js類庫旨在解決以下問題,這也是bridge.js目的及意義所在. * 1.靜態頁面的發送post請求,會出現500錯誤,一個項目不可能全是get請求. * 2.前后台徹底分離后,靜態資源的訪問有兩種 * 2.1相對路徑:需要用../來尋找目標資源,開發難度大 * 2.2絕對路徑.每次需要手動添加根目錄名稱,根目錄只要有變化修改的難度就會很大. * 3.對於一些后台項目,會有超時管理.對於頁面的零散的ajax請求怎么做到統一管理. * 對超時時返回的數據及時作出響應,比跳轉到登錄頁 * 4.前后台並行開發,提高工作效率,和產品質量. * 5.前端開發不不依附於后端的開發工具,比如MyEclipse,Visual Studio.前端也有很多優秀的開發工具 * 6.分工協作,前后端分離是必然的趨勢,我們不能停留在幾十年前的開發模式里,一人獨攬全棧, * 環境變化這么快,不進步,就是退步. * 7.前端各種技術日益成熟,比如代碼壓縮,模塊化開發.前后台不分離,再好的技術對我們來說只是名詞. * 8.徹底分離時,會造成前端請求時出現跨域的尷尬境地,前端人員對於服務器環境的生疏,寸步難行. * 9.每個ajax請求都有可能出錯,同樣的報錯代碼,總不能在每個ajax代碼里都寫一遍或重新調用一遍 * ========================================================================= * bridge.js是在jQuery的基礎上做的二次封裝. * 1.ajax封裝介紹(和jQuery的調用一樣): * 1.0.所有的請求被分為三種,因為請求方式不一樣,路徑格式也不一樣. * 跨域+遠程==>徹底分離時,發出的請求. * 只遠程==>項目整合的時候,沒有了跨域問題. * 只本地==>請求前端的本地資源 * 1.1.一切post的請求都會被轉換成遠程請求. * 1.2.get請求即可以訪問本地資源,也可以發送遠程請求 * 1.3.bridge.js不支持ajax的鏈式寫法,因為ajax返回的是promise對象, * .done(),.fail()無法被被重寫封裝.(可惜!可惜!) * 1.4.若有參數cross:true,就發送遠程(+跨域)請求,未定義參數cross或cross:false發送本地請求 * 1.4. * 1.4.1.既可以遠程也可以本地請求的方法. * bg.ajax(opt) * bg.load(url,param,callback). * bg.get(url,param,callback,type). * bg.getJSON(url,param,callback). * * 1.4.2.因為無法添加參數cross:true,只能請求本地資源的方法 * bg.getScript(url,callback). * * 1.4.3.本地無法發送post請求,只能發送遠程請求的方法 * bg.post(). * 1.5.bg.getHttpUrl(cross,url) 返回請求路徑 * bg.inti配置介紹: * root:"",//根目錄,前后端的項目名稱(根目錄)最好相同,整合的時候比較容易 * view:"",//視圖.前端的所有編碼都放在一個目錄下,這個目錄就是視圖 * cross:true,//跨域.開發時這里是true.整合后,改為false.有跨域+遠程==>遠程 * hostName:"http://172.20.12.243:8080",//主機.跨域時的主機名稱 * checkSession:false,//是否檢測session失效的問題,有些網站不需要檢測,但是大部分登錄系統都要判斷session * noSession:function(data){//sessiong失效時執行的函數 * console.log("session失效,跳轉頁面"); * } * * 后端配置:新建一個過濾器, * 設置: * response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:8020"); * 或: * response.setHeader("Access-Control-Allow-Origin", "*"); * 前后端整合完畢后,屏蔽這個設置,就不存在跨域以及跨域帶來的安全問題了. * */ ////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////// (function($,undefined) { if($==null){ throw new Error("bridge出錯了:沒有找到jQuery或Zepto庫."); } /** * Bridge的實例對象, */ var objBridge=null; /** * 根函數 */ function Bridge() { objBridge=this; this.hostName=""; this.root=""; this.view=""; this.cross=false; /* this.ajaxBefore=function(){}; this.ajaxEnd()=function(){}; this.ajaxFail=function(){};*/ } /** *session處理模塊 */ Bridge.prototype.session={ checkSession:false,//是否檢測session noSession:function(data){//session失效如何處理,data為服務端返回的數據 }, }; /*Bridge.prototype.ajaxFail=function(XMLHttpRequest, textStatus, errorThrown){ alert("服務器請求失敗!"); }*/ /** * 初始化Bridge的各個參數 * @param opt */ Bridge.prototype.init=function(opt){ var k,value; for(var key in opt){ k=key.toLowerCase();//將鍵值轉換成小寫,防止誤傳參數,導致程序無法運行 value=opt[key]; if(k==="nosession"){ objBridge.session.noSession=value; } if(k==="checksession"){ objBridge.session.checkSession=value; } /* if(k==="ajaxfail"){ objBridge.ajaxFail=value; }*/ if(k==="cross"){ objBridge.cross=value; } if(k==="hostname"){ objBridge.hostName=value; } if(k==="view"){ objBridge.view=value; } if(k==="root"){ objBridge.root=value; } /*if(k=="ajaxbefore"){ objBridge.ajaxBefore=value; } if(k=="ajaxend"){ objBridge.ajaxEnd=value; }*/ } }; function sessionFilter(data,xhr,jqXHR){ var type=typeof data; var d=data; if(type=="object"){ }else if(type==="string"){ d=eval("("+d+")"); }else{ throw new Error("返回值的參數類型判斷異常"); } if(d.sessionStatus===-1){ objBridge.session.noSession(d); }else{ return data; } } /** * 三種請求, * 1.遠程+跨域,==>bg.init.cross:true,ajaxOpt.cross:true * 2.遠程不跨域,==>bg.init.cross:false,ajaxOpt.cross:true * 3.不跨域,不遠程(本地)==>bg.init.cross不起作用,ajaxopt.cross:false或未定義 * */ function getAjaxHttpType(optCross){ if(typeof optCross==="undefined"||optCross==false){ return 3; } else if(optCross==true){//設置了局部跨域參數 if(objBridge.cross){//遠程+跨域 return 1; }else{//遠程不跨域 return 2; } } } /** * 根據不同的請求,生成不同的路徑 * @param type 請求路徑 * @param url 當前路徑 */ function getAjaxUrl(type,url){ var u=""; if(type===1){//遠程+跨域 u=objBridge.hostName+"/"+objBridge.root+"/"; }else if(type===2){//遠程不跨域 u="/"+objBridge.root+"/"; }else if(type===3){//不跨域,不遠程(本地) if(objBridge.view){ u="/"+objBridge.root+"/"+objBridge.view+"/"; }else{ u="/"+objBridge.root+"/"; } } return u+url; } /** * 獲取請求路徑 * @param cross * @param url */ Bridge.prototype.getHttpUrl=function(cross,url){ return getAjaxUrl(getAjaxHttpType(cross),url); } /** * 若要發送遠程跨域請求, * 需要添加參數data.cross=true; * 否則被視為本地請求 * obj 請求對象 * url 請求路徑 * data 請求參數 * callback 回調函數 可不填 */ Bridge.prototype.load=function(obj,url,params,callback){ if(!(obj instanceof $)){//如果obj不是jquery對象 throw new Error("load的第一個參數obj不是jQuery對象."); } var type,httpType,url; type=typeof params; if (type==="function") { callback = params; params = undefined; } if(type==="object"){ params.cross=true; httpType=getAjaxHttpType(params.cross); url=getAjaxUrl(httpType,url); }else if(type==="undefined"){//alert(1) url=getAjaxUrl(3,url); } obj.load(url,params,callback); }; /** * post請求只能請求遠程數據, * 本地請求會報500錯誤. */ Bridge.prototype.post=function(url,params,callback,type){ var t=typeof params; var httpType; if (t==="function") { type = type || callback; callback = params; params = undefined; t=typeof params; } url=getAjaxUrl(getAjaxHttpType(true),url); $.post(url,params,callback,type); } /* * 若要發送遠程跨域請求, * 需要添加參數data.cross=true; * 否則被視為本地請求 */ Bridge.prototype.get=function(url,data,callback,type){ var httpType,url; var t=typeof data; if (t==="function") { type = type || callback; callback = data; data = undefined; t=typeof data; } if(t==="object"){ httpType=getAjaxHttpType(data.cross); }else if(t==="undefined"){ httpType=3; }else { throw new Error("get請求的參數判斷異常"); } url=getAjaxUrl(httpType,url); $.get(url,data,callback,type); } /* * 若要發送遠程跨域請求, * 需要添加參數data.cross=true; * 否則被視為本地請求 */ Bridge.prototype.getJSON=function(url, data, callback){ objBridge.get(url,data,callback,"json"); } /* * 因為無法添加參數,所以只能發送本地請求 */ Bridge.prototype.getScript=function(url,callback){ objBridge.get(url,undefined,callback,"script"); } /** * 1.跨域請求一定要添加參數cross:true, * 2.本地請求可不寫cross或cross:false * opt,正常的$.ajax()參數但是跨域的話多一個cross:true */ Bridge.prototype.ajax=function(opt){ var success; if(typeof opt==="string"){//講參數轉換成對象型參數 opt={ type:"get", url:opt } } //session過濾 if(objBridge.session.checkSession){ if(typeof opt.success=="undefined"){ opt.success=sessionFilter; } else{ success=opt.success; opt.success=function(data,xhr,jqXHR){ if(sessionFilter(data,xhr,jqXHR)!=undefined){ success(data,xhr,jqXHR); } } } } opt.url=getAjaxUrl(getAjaxHttpType(opt.cross),opt.url); $.ajax(opt); }; /** * 替換所有指定的字符 * str 字符串 * origin 需要替換的字符 * target 替換成這個字符 */ Bridge.prototype.replaceAll=function(str,origin,target){ if(str.indexOf(origin)<0){ return str; }else{ return arguments.callee(str.replace(origin,target),origin,target); } } /** * 格式化時間 * dateTime 時間(戳) * 返回 yyyy-mm-dd * * 待完善 * 1.去除時分秒 * * * * */ Bridge.prototype.formateDate=function(dateTime,splitf){ /** * 2015-01-05蘋果瀏覽器不支持,改成2015/01/05, * dateTime+""是為了防止時間戳沒有indexOf方法,報錯. */ dateTime=objBridge.replaceAll(dateTime+"","-","/"); dateTime=new Date(dateTime); var currYear =dateTime.getFullYear(); var currM=dateTime.getMonth()+1; var currD=dateTime.getDate(); if(currM<10){ currM="0"+currM; } if(currD<10){ currD="0"+currD; } if(!splitf||splitf==1){ return currYear+"-"+currM+"-"+currD; }else if(splitf==2){ return currYear+"年"+currM+"月"+currD+"日"; }else if(splitf==3){ return currYear+"/"+currM+"/"+currD; } } /** * 獲取時間中的各個元素 * dataTime 時間 * element 元素 * bg.getDateElement("2016-01-01","week"); * */ Bridge.prototype.getDateElement=function(dateTime,element){ var currM,currD,week; dateTime=new Date(dateTime); if(element=="yyyy"){ return dateTime.getFullYear(); }else if(element=="M"){ return getM(); }else if(element=="MM"){ currM=getM(); return currM<10?("0"+currM):currM; }else if(element=="d"){ return getD(); }else if(element=="dd"){ currD=getD(); return currD<10?("0"+currD):currD; }else if(element=="week"){ return dateTime.getDay(); } function getD(){ return dateTime.getDate(); } function getM(){ return dateTime.getMonth()+1; } } /** * 查詢數組中是否存在指定元素 * arr 數組 * element 指定元素 */ Bridge.prototype.inArray=function(arr,element){ try{ if(!(arr instanceof Array)){ throw new Error("請傳入數組"); } for(var i in arr){ if(arr[i]===element){ return true; } } return false; }catch(e){ alert("inArray:>>"+e.message); console.error("inArray:>>"+e.message); } } /** * 當填寫參數h后,解析你給的參數,如果為空自動從獲取瀏覽器的地址 * 測試路徑:>>>http://127.0.0.1:8020/url/index.html?id=1.2&gys=7777777777777777777777777&name=思思博士#api/126 * name是需要獲取的值, * h是指定href還是要自動獲取. * * * bg.urlResolve("param") 獲取所有參數 * bg.urlResolve("param:name") 獲取參數name */ Bridge.prototype.urlResolve=function(name,h){ if(!name){ console.error("urlResolve缺乏name參數"); return ""; } var href=h?h:window.location.href; var condition;//條件 if(name.indexOf(":")>-1){ condition=name.split(":"); name=condition[0]; condition=condition[1]; } var search=function(){ if(h){ return "?"+href.split("?")[1]; }else{ return window.location.search; } } var searchNoP=function(){//不帶問號的條件 return search().substr(1); } var getPageNameAndExtName=function(){//獲取頁面名稱和擴展名稱 var arr=href.split("?")[0].split("/"); var len=arr.length; return arr[len-1]; }; /** * 填寫了key獲取指定的參數 * 沒填寫key參數獲取所有的參數,以json格式返回 */ var getParam=function(key){//獲取參數 var query=searchNoP(); if(!query){ return null; } var params={}; var paramArr=query.split("&"); var len=paramArr.length; var params={}; var itemParam=[]; for(var i=0;i<len;i++){ itemParam=paramArr[i].split("="); params[itemParam[0]]=itemParam[1]; } if(key){ return params[key]?params[key]:""; }else{ return params; } } if(name==="href"){//獲取路徑 return href; }else if(name==="search"){// 查詢(參數)部分 帶問號的 return search(); }else if(name==="searchNo?"){//不帶問號的 return searchNoP(); }else if(name==="pathname"){//頁面路徑 url/index.html if(h){ alert("帶完善!"); }else{ return window.location.pathname; } }else if(name==="port"){//URL 的端口部分 8080 return window.location.port; }else if(name==="protocol"){//URL 的協議部分返回值 http: return window.location.protocol }else if(name==="host"){//url主機部分返回值 127.0.0.1:8020 return window.location.host; }else if(name==="hash"){//錨點后面的值 #api/126 return window.location.hash; }else if(name==="hashNo#"){//不帶#號的錨點的值 api/126 return window.location.hash.substr("1"); }else if(name==="pageName"){//獲取頁面名稱 return getPageNameAndExtName().split(".")[0]; }else if(name==="extName"){//獲取擴展名 return getPageNameAndExtName().split(".")[1]; }else if(name==="param"){//獲取參數 return getParam(condition?condition:""); }else{ console.error("urlResolve未匹配到你要獲取的參數"); return ""; } }; window.bg=new Bridge(); })((typeof jQuery!=="undefined")?jQuery:(typeof Zepto!=="undefined"?Zepto:null)); /*bg.init({ root:"b",//項目名稱 view:"",//視圖 cross:true,//跨域 hostName:"http://192.168.1.206:8080",//主機 checkSession:false, noSession:function(data){ console.log("session失效,跳轉頁面"); } });*/ /***************************************************************************** * 調用 * <button onclick="app()">測試hb</button> ****************************************************************************** */ /*function app(){ console.log(bg.getHttpUrl(true,"abc")); return; bg.ajax({ type:"get", url:"1.txt", //url:"1.json", //cross:true, //cross:false, data:{sessionFlag:"yes"}, dataType:"text", success:function(data,textStatus,jqXHR){ console.log(data); //alert(data.name); $("#content").html(data); } }); //$("#content").load("1.json",function(){}); //bg.load($("#content"),"CROS",{}); //bg.load($("#content"),"Jsonp2",{cross:true}); //bg.get("1.json",{},function(data){ console.log(data); //},"json"); //bg.get("Jsonp2",{session:"no",cross:true},function(data){ // console.log(data); //},"json"); }*/
=====================2016年-02-03更新=============================================
bridge.js2.0
1.支持多終端跨域
2.去除了session過濾,交由jquery的ajax全局設置
/* *bridge橋梁的意思,bridge.js主要是為了架起前后端開發的橋梁. *bridge.js類庫旨在解決以下問題,這也是bridge.js目的及意義所在. * 1.靜態頁面的發送post請求,會出現500錯誤,一個項目不可能全是get請求. * 2.前后台徹底分離后,靜態資源的訪問有兩種 * 2.1相對路徑:需要用../來尋找目標資源,開發難度大 * 2.2絕對路徑.每次需要手動添加根目錄名稱,根目錄只要有變化修改的難度就會很大. * 3.對於一些后台項目,會有超時管理.對於頁面的零散的ajax請求怎么做到統一管理. * 對超時時返回的數據及時作出響應,比跳轉到登錄頁 * 4.前后台並行開發,提高工作效率,和產品質量. * 5.前端開發不不依附於后端的開發工具,比如MyEclipse,Visual Studio.前端也有很多優秀的開發工具 * 6.分工協作,前后端分離是必然的趨勢,我們不能停留在幾十年前的開發模式里,一人獨攬全棧, * 環境變化這么快,不進步,就是退步. * 7.前端各種技術日益成熟,比如代碼壓縮,模塊化開發.前后台不分離,再好的技術對我們來說只是名詞. * 8.徹底分離時,會造成前端請求時出現跨域的尷尬境地,前端人員對於服務器環境的生疏,寸步難行. * 9.每個ajax請求都有可能出錯,同樣的報錯代碼,總不能在每個ajax代碼里都寫一遍或重新調用一遍 * ========================================================================= * bridge.js是在jQuery的基礎上做的二次封裝. * 1.ajax封裝介紹(和jQuery的調用一樣): * 1.0.所有的請求被分為三種,因為請求方式不一樣,路徑格式也不一樣. * 跨域+遠程==>徹底分離時,發出的請求. * 只遠程==>項目整合的時候,沒有了跨域問題. * 只本地==>請求前端的本地資源 * 1.1.一切post的請求都會被轉換成遠程請求. * 1.2.get請求即可以訪問本地資源,也可以發送遠程請求 * 1.3.bridge.js不支持ajax的鏈式寫法,因為ajax返回的是promise對象, * .done(),.fail()無法被被重寫封裝.(可惜!可惜!) * 1.4.若有參數cross:true,就發送遠程(+跨域)請求,未定義參數cross或cross:false發送本地請求 * 1.4. * 1.4.1.既可以遠程也可以本地請求的方法. * bg.ajax(opt) * bg.load(url,param,callback). * bg.get(url,param,callback,type). * bg.getJSON(url,param,callback). * * 1.4.2.因為無法添加參數cross:true,只能請求本地資源的方法 * bg.getScript(url,callback). * * 1.4.3.本地無法發送post請求,只能發送遠程請求的方法 * bg.post(). * 1.5.bg.getHttpUrl(cross,url) 返回請求路徑,打印ajax請求的路勁 * bg.inti配置介紹: * root:"",//根目錄,前后端的項目名稱(根目錄)最好相同,整合的時候比較容易 * view:"",//視圖.前端的所有編碼都放在一個目錄下,這個目錄就是視圖 * cross:true,//跨域.開發時這里是true.整合后,改為false.有跨域+遠程==>遠程 * hostName:"http://172.20.12.243:8080",//主機.跨域時的主機名稱 * checkSession:false,//是否檢測session失效的問題,有些網站不需要檢測,但是大部分登錄系統都要判斷session * noSession:function(data){//sessiong失效時執行的函數 * console.log("session失效,跳轉頁面"); * } * * 后端配置:新建一個過濾器, * 設置: * response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:8020"); * 或: * response.setHeader("Access-Control-Allow-Origin", "*"); * 前后端整合完畢后,屏蔽這個設置,就不存在跨域以及跨域帶來的安全問題了. * */ ////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////// (function($,undefined) { if($==null){ throw new Error("bridge出錯了:沒有找到jQuery或Zepto庫."); } /** * Bridge的實例對象, */ var objBridge=null; var config={ servers:{} } /** * 根函數 */ function Bridge() { objBridge=this; this.getConfig=function(){ return config; } } /** *session處理模塊 */ /*Bridge.prototype.session={ checkSession:false,//是否檢測session noSession:function(data){//session失效如何處理,data為服務端返回的數據 }, };*/ /** * 初始化Bridge的各個參數 * @param opt */ Bridge.prototype.init=function(opt){ $.extend(config, opt); var hostName=window.location.protocol+"//"+window.location.host; config.servers["local"]={hostName:hostName,cross:false,root:config.root}; }; /** * 對於傳遞過來的server參數進行統一格式 * @param server 可能是字符串也可能是對象 */ function resolveParamServer(server){ var type=typeof server; if(type=="object"){ }else if(type=="string"&&server){ server=config.servers[server]; }else{ server=config.servers["local"]; } return server; } /** * 三種請求, * 1.遠程+跨域,==>bg.init.cross:true,ajaxOpt.cross:true * 2.遠程不跨域,==>bg.init.cross:false,ajaxOpt.cross:true * 3.不跨域,不遠程(本地)==>bg.init.cross不起作用,ajaxopt.cross:false或未定義 * */ function getAjaxHttpType(server,clientCross){ server=resolveParamServer(server); var serverCross=server.cross; if(typeof clientCross=="undefined"||clientCross==false){//本地請求 return 3; } else if(clientCross==true){//設置了局部跨域參數 if(serverCross==true){//遠程+跨域 return 1; }else{//遠程不跨域 return 2; } } } /** * 根據不同的請求,生成不同的路徑 * @param type 請求路徑 * @param url 當前路徑 */ function getAjaxUrl(type,url,server){ server=resolveParamServer(server); var u=""; if(type===1){//遠程+跨域 u=server.hostName+"/"+server.root+"/"; }else if(type===2){//遠程不跨域 u="/"+server.root+"/"; }else if(type===3){//不跨域,不遠程(本地) if(config.view){ u="/"+config.root+"/"+config.view+"/"; }else{ u="/"+config.root+"/"; } } return u+url; } /** * 獲取請求路徑 測試請求的路勁 * @param server {hostName:"http:127.0.0.1:8080",cross:true,root:"itemName"} * @param param {url:} usr/getData * @return http:127.0.0.1:8080/itemName/usr/getData */ Bridge.prototype.getHttpUrl=function(server,url,cross){ var type=getAjaxHttpType(server,cross); return getAjaxUrl(type,url,server); } /** * 若要發送遠程跨域請求, * 需要添加參數data.cross=true; * 否則被視為本地請求 * obj 請求對象 * url 請求路徑 * data 請求參數 * callback 回調函數 可不填 */ Bridge.prototype.load=function(obj,url,params,callback){ if(!(obj instanceof $)){//如果obj不是jquery對象 throw new Error("load的第一個參數obj不是jQuery對象."); } var type,httpType,url; type=typeof params; if (type==="function") { callback = params; params = undefined; } if(type==="object"){ params.cross=true; httpType=getAjaxHttpType(params.server,true); url=getAjaxUrl(httpType,url,params.server); }else if(type==="undefined"){//alert(1) url=getAjaxUrl(3,url,params.server); } obj.load(url,params,callback); }; /** * post請求只能請求遠程數據, * 本地請求會報500錯誤. */ Bridge.prototype.post=function(url,params,callback,type){ var t=typeof params; var httpType; if (t==="function") { type = type || callback; callback = params; params = {}; //t=typeof params; } params.cross=true; url=getAjaxUrl(getAjaxHttpType(params.server,true),url,params.server); $.post(url,params,callback,type); } /* * 若要發送遠程跨域請求, * 需要添加參數data.cross=true; * 否則被視為本地請求 */ Bridge.prototype.get=function(url,data,callback,type){ var httpType,url; var t=typeof data; var server=""; if (t==="function") { type = type || callback; callback = data; data = undefined; t=typeof data; } if(t==="object"){ httpType=getAjaxHttpType(data.server,data.cross); server=data.server; }else if(t==="undefined"){ httpType=3; }else { throw new Error("get請求的參數判斷異常"); } url=getAjaxUrl(httpType,url,server); $.get(url,data,callback,type); } /* * 若要發送遠程跨域請求, * 需要添加參數data.cross=true; * 否則被視為本地請求 */ Bridge.prototype.getJSON=function(url, data, callback){ objBridge.get(url,data,callback,"json"); } /* * 因為無法添加參數,所以只能發送本地請求 */ Bridge.prototype.getScript=function(url,callback){ objBridge.get(url,undefined,callback,"script"); } /** * 1.跨域請求一定要添加參數cross:true, * 2.本地請求可不寫cross或cross:false * opt,正常的$.ajax()參數但是跨域的話多一個cross:true */ Bridge.prototype.ajax=function(opt){ var success; if(typeof opt==="string"){//將參數轉換成對象型參數 opt={ type:"get", url:opt } } opt.url=getAjaxUrl(getAjaxHttpType(opt.server,opt.cross),opt.url,opt.server); $.ajax(opt); }; /** * 替換所有指定的字符 * str 字符串 * origin 需要替換的字符 * target 替換成這個字符 */ Bridge.prototype.replaceAll=function(str,origin,target){ if(str.indexOf(origin)<0){ return str; }else{ return arguments.callee(str.replace(origin,target),origin,target); } } /** * 格式化時間 * dateTime 時間(戳) * 返回 yyyy-mm-dd * * 待完善 * 1.去除時分秒 * * * * */ Bridge.prototype.formateDate=function(dateTime,splitf){ /** * 2015-01-05蘋果瀏覽器不支持,改成2015/01/05, * dateTime+""是為了防止時間戳沒有indexOf方法,報錯. */ dateTime=objBridge.replaceAll(dateTime+"","-","/"); dateTime=new Date(dateTime); var currYear =dateTime.getFullYear(); var currM=dateTime.getMonth()+1; var currD=dateTime.getDate(); if(currM<10){ currM="0"+currM; } if(currD<10){ currD="0"+currD; } if(!splitf||splitf==1){ return currYear+"-"+currM+"-"+currD; }else if(splitf==2){ return currYear+"年"+currM+"月"+currD+"日"; }else if(splitf==3){ return currYear+"/"+currM+"/"+currD; } } /** * 獲取時間中的各個元素 * dataTime 時間 * element 元素 * bg.getDateElement("2016-01-01","week"); * */ Bridge.prototype.getDateElement=function(dateTime,element){ var currM,currD,week; dateTime=new Date(dateTime); if(element=="yyyy"){ return dateTime.getFullYear(); }else if(element=="M"){ return getM(); }else if(element=="MM"){ currM=getM(); return currM<10?("0"+currM):currM; }else if(element=="d"){ return getD(); }else if(element=="dd"){ currD=getD(); return currD<10?("0"+currD):currD; }else if(element=="week"){ return dateTime.getDay(); } function getD(){ return dateTime.getDate(); } function getM(){ return dateTime.getMonth()+1; } } /** * 查詢數組中是否存在指定元素 * arr 數組 * element 指定元素 */ Bridge.prototype.inArray=function(arr,element){ try{ if(!(arr instanceof Array)){ throw new Error("請傳入數組"); } for(var i in arr){ if(arr[i]===element){ return true; } } return false; }catch(e){ alert("inArray:>>"+e.message); console.error("inArray:>>"+e.message); } } /** * 當填寫參數h后,解析你給的參數,如果為空自動從獲取瀏覽器的地址 * 測試路徑:>>>http://127.0.0.1:8020/url/index.html?id=1.2&gys=7777777777777777777777777&name=思思博士#api/126 * name是需要獲取的值, * h是指定href還是要自動獲取. * * * bg.urlResolve("param") 獲取所有參數 * bg.urlResolve("param:name") 獲取參數name */ Bridge.prototype.urlResolve=function(name,h){ if(!name){ console.error("urlResolve缺乏name參數"); return ""; } var href=h?h:window.location.href; var condition;//條件 if(name.indexOf(":")>-1){ condition=name.split(":"); name=condition[0]; condition=condition[1]; } var search=function(){ if(h){ return "?"+href.split("?")[1]; }else{ return window.location.search; } } var searchNoP=function(){//不帶問號的條件 return search().substr(1); } var getPageNameAndExtName=function(){//獲取頁面名稱和擴展名稱 var arr=href.split("?")[0].split("/"); var len=arr.length; return arr[len-1]; }; /** * 填寫了key獲取指定的參數 * 沒填寫key參數獲取所有的參數,以json格式返回 */ var getParam=function(key){//獲取參數 var query=searchNoP(); if(!query){ return null; } var params={}; var paramArr=query.split("&"); var len=paramArr.length; var params={}; var itemParam=[]; for(var i=0;i<len;i++){ itemParam=paramArr[i].split("="); params[itemParam[0]]=itemParam[1]; } if(key){ return params[key]?params[key]:""; }else{ return params; } } if(name==="href"){//獲取路徑 return href; }else if(name==="search"){// 查詢(參數)部分 帶問號的 return search(); }else if(name==="searchNo?"){//不帶問號的 return searchNoP(); }else if(name==="pathname"){//頁面路徑 url/index.html if(h){ alert("帶完善!"); }else{ return window.location.pathname; } }else if(name==="port"){//URL 的端口部分 8080 return window.location.port; }else if(name==="protocol"){//URL 的協議部分返回值 http: return window.location.protocol; }else if(name==="host"){//url主機部分返回值 127.0.0.1:8020 return window.location.host; }else if(name==="hash"){//錨點后面的值 #api/126 return window.location.hash; }else if(name==="hashNo#"){//不帶#號的錨點的值 api/126 return window.location.hash.substr("1"); }else if(name==="pageName"){//獲取頁面名稱 return getPageNameAndExtName().split(".")[0]; }else if(name==="extName"){//獲取擴展名 return getPageNameAndExtName().split(".")[1]; }else if(name==="param"){//獲取參數 return getParam(condition?condition:""); }else{ console.error("urlResolve未匹配到你要獲取的參數"); return ""; } }; window.bg=new Bridge(); })((typeof jQuery!=="undefined")?jQuery:(typeof Zepto!=="undefined"?Zepto:null)); /*bg.init({ root:"b",//項目名稱 view:"",//視圖 cross:true,//跨域 hostName:"http://192.168.1.206:8080",//主機 checkSession:false, noSession:function(data){ console.log("session失效,跳轉頁面"); } });*/ /***************************************************************************** * 調用 * <button onclick="app()">測試hb</button> ****************************************************************************** */ /*bg.init({ root:"bridge", view:"", servers:{ "s1":{hostName:"http://192.168.6.130:8080",root:"bridge",cross:true}, "s2":{hostName:"http://192.168.6.130:8080",root:"bridge2",cross:true} } }); function app(){ //打印配置信息 console.log(bg.getConfig()); bg.ajax({ type:"get", url:"Jsonp2", dataType:"text", server:"s1", cross:true, success:function(data){ console.log(data); } }); bg.ajax({ type:"get", url:"jsonp", dataType:"text", server:"s2", cross:true, success:function(data){ console.log(data); } }); bg.get("1.txt",function(data){ console.log("get1結果:>>") console.log(data); },"text"); bg.get("1.txt",{},function(data){ console.log("get2結果:>>") console.log(data); },"text"); //500錯誤 bg.post("1.txt",function(data){ console.log("post結果:>>") console.log(data); },"text"); //500錯誤 bg.load($("#msg"),"1.txt",function(data){ console.log("load結果:>>") console.log(data); }); //打印上面ajax請求的最終的請求路勁(用於測試,和調試) console.log(bg.getHttpUrl({hostName:"http://192.168.6.130:8080",cross:true,root:"bridge"},"Jsonp2",true)); console.log(bg.getHttpUrl({hostName:"http://192.168.6.130:8080",cross:true,root:"bridge2"},"jsonp",true)); }*/