利用script的src属性实现jsonp跨域

不多说据体看源码
js部分:

(function(window) {
	window._ = {
/********************是否为json**************************/
		/*
		*参数json:可以是obj也可以是string
		*/
		isJSON : function(json){
			//obj的判断
			if(typeof(json) == "object" && Object.prototype.toString.call(json).toLowerCase() == "[object object]" && !json.length) {
				return true;
			}
			//string的判断
			if(typeof(json) == "string") {
				try {
		            var obj = JSON.parse(json);
		            if(typeof obj == 'object' && obj ){
		                return true;
		            } else {
		                return false;
		            }
		        } catch(e) {
		            return false;
		        }
			}
			//不是ojb json也不是string json
			return false;
		}

/********************是否为json**************************/
		
		/********************jsonp**************************/
	
		/*匿名或不匿名回调函数*/
,		fn : null , 
		
		/*临时节点*/
		temp : null , 
		
		/*
		*config参数列表:url、data、callBack
		*url:请求地址
		*data:请求参数列表可以是:json对象、json字符串、字符串请求参数串
		*callBack:回调函数,可以是匿名或不匿名函数
		*/
		jsonp : function(config) {
			//匿名或不匿名回调函数
			this.fn = config.callBack;
			//参数列表数组
			var arr = new Array();
			//是json对象或json字符串
			if(this.isJSON(config.data)) {
				//json字符串转成json对象
				if(typeof(config.data) == "string") {
					config.data = JSON.parse(config.data);
				}
				//json转换成字符串数组
				for(var key in config.data) {
					arr.push(key + "=" + config.data[key]);
				}
			} else if(typeof(config.data) == "string") {
				//string请求参数串
				arr.push(config.data);
			}
			//避免请求被缓存
			arr.push("time=" + new Date().getTime());
			//创建临时节点
			this.temp = document.createElement("script");
			//利用script标签src属性的特性进行跨域
			this.temp.src = config.url + "?callBack=_.callBack&" + arr.join("&");
			document.body.appendChild(this.temp);
		} ,
		
		/*回调函数*/
		callBack : function(data) {
			//回调
			this.fn && this.fn(data);
			//删除临时节点
			this.temp.parentNode.removeChild(this.temp);
		}
		
/********************jsonp**************************/
		
	}
})(window);


服务端测试部分:

@RequestMapping("/jsonp")
	public void jsonp(HttpServletResponse response,String callBack,String username,String password , String time) throws IOException {
		response.setContentType("text/javascript");
		String cb = callBack + "({'username':'" + username + "','password':'" + password + "','result':'200'});";
		Writer out = response.getWriter();
		out.write(cb);
		System.out.println(time);
	}		

HTML测试部分:
var url = "http://localhost:8080/jsonp";
var json = {"username":"zhangshang","password":"123456abc"};
 _.jsonp({
		url : url , 
		data : json ,
		callBack : function(data) {
			for(var key in data) {
				console.log(key + " : " + data[key]);
			}
		}
	});

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值