解决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中，后面自己可以改写。还有在服务器返回中需要做一些处理：

String str="KQAjaxRequest.ReturnData("+this.ctx+","+results.toString()+")";
response.getWriter().write(str);

我这里后台服务器使用的是java，主要在KQAjaxRequest.ReturnData这里。

 

 

好了整体就是这些了。

 

评论

2 楼 清水上人 2011-07-04  

panshunchang 写道

先看看，希望以后有用，谢了！

绝对好用，我现在用的就是这个，目前我用到的所有浏览器都支持。

1 楼 panshunchang 2011-07-04  

先看看，希望以后有用，谢了！