寫一個jsonp的例項來實現跨域
阿新 • • 發佈：2020-12-07
技術標籤：javascriptjavascript
由於瀏覽器同源策略的限制，非同源下的請求，都會產生跨域問題，jsonp即是為了解決這個問題出現的一種簡便解決方案。
前輩們發現不管是script標籤的src還是img標籤的src，或者說link標籤的href他們沒有被通源策略所限制，於是我也來湊湊熱鬧，用script標籤來寫一個簡單的例子：
頁面程式碼：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> </head> <body> <p id="txt"></p> <button onclick="do_jsonp()">獲取資料</button> </body> <script> function _doJsonP(url,data,callback){ var me=this; //產生隨機數 var fnSuffix=Math.random().toString().replace('.',''); //回撥函式名 var cb='jsonp_cb_'+fnSuffix; // 將data轉化成url字串的形式 var param=url.indexOf('?')==-1?'?':'&'; for(var key in data){ param+=key+'='+data[key]+'&'; } //將需要回調的函式名傳到後臺 param+='cb='+'jsonp_cb.'+cb; //建立一個script的標籤 var scriptElement=document.createElement('script'); //設定src scriptElement.src=url+param; //將script標籤放到頁面中 var head = document.getElementsByTagName('head'); var scriptContainer = head ? head[0] : document.body; scriptContainer.appendChild(scriptElement); window['jsonp_cb']={}; //建立回撥函式 window['jsonp_cb'][cb] = function(res){ //呼叫回撥函式 callback(res); delete window['jsonp_cb'][cb]; //將此script元素刪除 scriptContainer.removeChild(scriptElement); } } function do_jsonp(){ var url="http://192.168.56.1:8080/yszdServer/entry?method=test_jsonp"; var data={'a':1,b:'2'}; _doJsonP(url,data,function(text){ document.getElementById("txt").innerText=JSON.stringify(text); }); } </script> </html>
後臺java程式碼：
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setContentType("text/html;charset=utf-8"); resp.addHeader("Access-Control-Allow-Origin", "*"); req.setCharacterEncoding("utf-8"); resp.setCharacterEncoding("utf-8"); String dataString = ""; String callback = (String)req.getParameter("cb"); String a = (String)req.getParameter("a"); String b = (String)req.getParameter("b"); dataString = "{\"a\":\""+a+"\",\"b\":\""+b+"\"}"; PrintWriter out = resp.getWriter(); if(callback!=null && callback.length()>0){ dataString =callback+"("+dataString+")"; } out.println(dataString); out.close(); }
測試一下 ：
