AJAX的跨域访问-两种有效的解决方法介绍
新的W3C策略实现了HTTP跨域访问,还亏我找了很久的资料解决这个问题:
只需要在servlet中返回的头部信息中添加Access-Control-Allow-Origin这个既可。
比如我要开放所有我本地的跨域访问,就设置如下:response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1/*");
这样我本地的A工程中的AJAX请求就可以跨域请求B工程中的servlet。
代码如下:
HTML的JS的ajax请求:
复制代码 代码如下:
/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
var url = "http://127.0.0.1:2012/esb/servlet/HttpClient?randomType=MIX";
xmlHttp.open("GET", url, true);
//Setup a function for the server to run when it's done
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
var response = xmlHttp.responseText;
alert(response);
}
}
//Send the request
xmlHttp.send(null);
servlet代码:
复制代码 代码如下:
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, java.io.IOException {
resp.setHeader("Pragma", "no-cache");
resp.setHeader("Cache-Control", "no-cache");
//下面那句是核心
resp.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1/*");
resp.setDateHeader("Expires", 0);
ServletOutputStream sos = resp.getOutputStream();
try {
sos.write(obj.toString().getBytes("GBK"));
} catch (Exception e) {
System.out.println(e.toString90)
} finally {
try {
sos.close();
} catch (Exception e) {
LOG.error(e);
}
}
}
代码在本机测试是可以的,待过两天,我把servlet放到服务器上去,然后再本地测试。
上面的方式虽然很完美的解决了问题,但是上面的文章也说了。可能存在安全问题,而且新标准是否都支持还是个问题,所以我们可以套用另外一种取巧的方式来完成同样的效果,因为js不存在跨域问题,如果我们服务器的servlet返回的是JS脚本,那就可以了。我们可以在A工程的js中使用javascript的src来访问B工程的servlet,然后通过servlet输出的js脚本来传递数据。因此根据这个思想我又做了下面代码的测试:
页面的JS代码:
复制代码 代码如下:
function loadAjax(){
id="testesbscript";
oScript = document.getElementById(id);
var head = document.getElementsByTagName("head").item(0);
if (oScript) {
head.removeChild(oScript);
}
oScript = document.createElement("script");
var url = "http://127.0.0.1:2012/esb/servlet/HttpClient?randomType=MIX&success=justHandle
oScript.setAttribute("id",id);
oScript.setAttribute("type","text/javascript");
oScript.setAttribute("language","javascript");
head.appendChild(oScript);
}
//jsutHandle这个函数是反调函数。servlet代码中会使用eval这种方式来执行。
function justHandle(dd){
alert(dd);
}
servlet的代码:
复制代码 代码如下:
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, java.io.IOException {
Object obj = "test";
ServletOutputStream sos = resp.getOutputStream();
StringBuffer sb = new StringBuffer();
resp.setCharacterEncoding("GBK");
resp.setHeader("Charset","GBK");
resp.setContentType("charset=GBK");
//下面那句表明是javascript脚本文件
resp.setContentType("text/javascript");
sb.append("eval(/""+paramMap.get("success")+"(/'"+obj.toString()+"/')/")");
try {
sos.write(sb.toString().getBytes(this.character_encoding));
} catch (Exception e) {
System.out.println(e.toString());
} finally {
try {
sos.close();
} catch (Exception e) {
System.out.println(e.toString());
}
}
}

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Dreamweaver Mac version
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

WebStorm Mac version
Useful JavaScript development tools