日期:2014-05-16  浏览次数:20468 次

解决javascript跨域问题

??? 浏览器出于安全方面的考虑,禁止了javascript跨域访问,但是在我们实际的开发中确经常需要跨域,这就给我们开发中带来了很大的困难。不多说了,直接上代码说明跨域的解决方案吧~

?

function KQAjaxRequest() {
	this.LocationUrl="http://www.192.168.1.28:8080";
   	this.userAgent = {};
   	this.appVersion = {};
   	this.onReceivedResponse = null;
}

KQAjaxRequest.prototype.targetObj = null;
KQAjaxRequest.connectionContext = new Array(); 

KQAjaxRequest.prototype.isIE = function () {
  	return document.all?true:false;
};
KQAjaxRequest.prototype.scriptRequest = function (url) {
	var headTag = document.getElementsByTagName("head")[0];
 	var scriptTag = document.createElement("script");
  	scriptTag.type = "text/javascript";
  	scriptTag.charset = "UTF-8";
	url = url + "&" + Math.random();;
   
  	scriptTag.src = url;
  	var scriptTagOnLoad = function () {
    	scriptTag.onload = null;
    	var scriptTagParent = scriptTag.parentNode;
    	scriptTagParent.removeChild(scriptTag);
    	delete scriptTag;
  	};
  	var scriptTagOnReady = function (scriptTagParent) {
    	var eventSource = (scriptTagParent ? scriptTagParent : window.event).target ? (scriptTagParent ? scriptTagParent : window.event).target : (scriptTagParent ? scriptTagParent : window.event).srcElement;
    	if (eventSource.readyState == "loaded" || eventSource.readyState == "complete") {
      		eventSource.onreadystatechange = null;
     		setTimeout(scriptTagOnLoad, 5000);
   	 	}
 	};
  	if (this.isIE) {
		scriptTag.onreadystatechange = scriptTagOnReady;
  	} else {
    	scriptTag.onload = scriptTagOnLoad;
  	}
  	headTag.appendChild(scriptTag);
};
KQAjaxRequest.prototype.sendRequest = function (url) {
  	var contextNo = KQAjaxRequest.setConnectionContext(this);
 	url =this.LocationUrl+ url + "&ctx=" + contextNo;
    this.scriptRequest(url);
	setTimeout(KQAjaxRequest.connectionContext[contextNo].timeOut, 8000);
};
KQAjaxRequest.setConnectionContext = function(context)
{
  	var isFindSpace = false;
 	var id = null;
  	if (KQAjaxRequest.connectionContext.length) {
    	for (var i = 0; i < KQAjaxRequest.connectionContext.length; i++) {
      		if (KQAjaxRequest.connectionContext[i] == null) {
        		KQAjaxRequest.connectionContext[i] = context;
        		id = i;
        		isFindSpace = true;
        		break;
      		}
    	}
  	}
  	if (!isFindSpace) {
    	id = KQAjaxRequest.connectionContext.length;
    	KQAjaxRequest.connectionContext.push(context);
  	}
	KQAjaxRequest.connectionContext[id].timeOut = function () {
		try {
			var data = new Object;
			data.command = "search failed";
			data.errorCode = "服务器忙,请稍后重试";
			var requestObj = KQAjaxRequest.connectionContext[parseInt(id)];
			requestObj.onReceivedResponse.call(requestObj.targetObj, data);
		}catch(e){}
	}
  	return id;
};

KQAjaxRequest.ReturnData = function(contextNo, data)
{
  var no = 0;
  if (contextNo)
  {
  	  no = parseInt(contextNo);
  }
  try {
  	var requestObj = KQAjaxRequest.connectionContext[no];
  	KQAjaxRequest.connectionContext[no] = null;
  	requestObj.onReceivedResponse.call(requestObj.targetObj, data);
  }catch(e){}
};
KQAjaxRequest.prototype.setResponseHandler = function(fun, obj) {
  	this.onReceivedResponse = fun;
 	this.targetObj = obj;
};

?

外面要使用到的函数说明:

???? setResponseHandler()方法中的参数,fun为服务器返回结果后触发的方法。obj为调用该方法的对象,直接写上this就行。

???? sendRequest()为你需要调用的URL。

?

使用方法:

???????????? 首先实例化KQAjaxRequest类获取到该类的句柄。如:var reqs=new KQAjaxRequest();

???????????? this.url=funcUrl+"?"+"logicX="+x*86400+"&logicY="+y*86400;

???????????? reqs.setResponseHandler(this.callbackFunctionName,this);
??????????? ?reqs.sendRequest(this.url);

注:callbackFunctionName为自己定义的一个方法。在这里的URL没有域,因为域写在了KQAjaxRequest中的LocationUrl中,后面自己可以改写。还有在服务器返回中需要做一些处理:

S