浏览器出于安全方面的考虑,禁止了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这里。
好了整体就是这些了。