写一个jsonp的实例来实现跨域

Myth丶恋晨 2021-07-24 11:13 298阅读 0赞

### **由于浏览器同源策略的限制，非同源下的请求，都会产生跨域问题，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();
    }

测试一下 ：

![2020120621192937.png][]

### **点击按钮后将传到后台的数据a、b获取到，并展示！** ###

# ***欢迎指正，谢谢点赞！*** #

[2020120621192937.png]: /images/20210724/4f670e8b8afa4c76868f7d6f252051ab.png