JS跨域请求封装

原创
2016/08/23 09:22
阅读数 782

因为要用到JS的跨域所以封装了一下:直接上代码

/**
 * 异步请求JS
 * url:执行跨域请求的url
 * blankurl:跨域过程中请求域中的空白页面(空白即可) 必须要的
 * data:跨域post请求的参数{"a":"1","b","2"}格式
 * fn:请求之后的回掉函数
 * @author :LYH
 */
var sync={
		post:function (url,blankurl, data, fn){
			  var form = document.createElement("form");
			  form.id = form.name = 'postForm';
			  //创建表单数据
			  if (data) {
			    for(var key in data) {
			      var input = document.createElement("input");
			      input.type = "hidden";
			      input.name = key;
			      input.value = data[key];
			      form.appendChild(input);
			    }
			  }
			  //创建iframe
			  var iframe = null;
			  //try&catch是为了解决IE67创建iframe新开窗问题
			  try {
			    iframe = document.createElement('<iframe name="postIframe">');
			  } catch (ex) {
			    iframe = document.createElement('iframe');
			  }
			  iframe.id = iframe.name = "postIframe";
			  iframe.width = "1";
			  iframe.height = "1";
			  iframe.style.display = "none";
			  document.body.appendChild(iframe);
			  //表单提交
			  document.body.appendChild(form);
			  form.action = url;
			  form.target = iframe.name;
			  form.method = "post";
			  form.submit();
			  //事件处理
			  if(iframe.attachEvent){
			    iframe.attachEvent("onload", _loadFn);
			  }else{
			    iframe.onload = _loadFn;
			  }
			//记录iframe的状态
			iframe.state = 0;
			function _loadFn(){
				if(iframe.state == 1){
					var data = '';
					try{
						data = iframe.contentWindow.name;
					}catch(e){
						console.log(e);
					}
					
					//执行回掉
					fn && fn(data);	
					//清除iframe;
					iframe.onload = null;
					document.body.removeChild(iframe);
				}else if(iframe.state == 0){
					iframe.state = 1;
					iframe.contentWindow.location = blankurl
				}
			}
		}
}

把上面代码放到一个js文件中命名位 asyncpost.js 然后页面引用 例如:

<script type="text/javascript" src="${resSys}/asyncpost.js"></script>
<script type="text/javascript">
//加载完开始执行
window.onload = function(){
	sync.post("${config.siteLoginurl}","sso_blank.jspx",{
		"${config.siteAccount}":"${username}",
		"${config.sitePassword}":"${password}",
		<#list param_list?keys as key>
		"${key}":"${param_list[key]}",
		</#list>
		},function(data){
			console.log(data);
			window.location.href="${config.siteIndexurl}";
	});
}
</script>

 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
返回顶部
顶部