Ajax跨域问题浏览器兼容性的模拟和解决

Origin null is not allowed by Access-Control-Allow-Origin.Uncaught SyntaxError: Unexpected token
在跨域问题中，这个提示基本没有作用,除了查看网上的解决方案我们还有必要进行的是模拟相应的环境。
Origin null is not allowed by Access-Control-Allow-Origin. 提示这是一个跨域访问的问题。
一般在IE浏览器下采用ajax提交不会出现该问题，有很多人提出用jsonp来实现，我是没有成功的，
最终的仍旧采用一个简单的ajax进行实现（其实我一直怀疑后台存在的问题在形象前台的兼容性）：

跨域的问题困了我将近一天，最后决定进行模拟，找出前台和后台寻在的一些问题，事实证明确实找到了。
一个简单的html:

<form id="mainform">
 name:<input id="name" name="name" type="text"/>
 age:<input id="age" name="age" type="type"/>
 <span onclick="jiance()">tijiao</span>
 </form>
</body>
<script type="text/javascript">
function jiance(){
var form=$("#mainform");
$.ajax({//ajax提交方式
type:"get",
url:"http://localhost:8080/jiance/login",
data:form.serialize(),//序列化form中的所有input参数
success:function(data){
alert(data);
//alert(data.substr(11,7));
var str=eval("("+data+")");
alert(str.name);
//alert(str);
},
error:function(){
alert("The form submit Failed");
}
});
} 
如果担心出现ajax兼容性问题，可以采用以下方式提交数据，效果与ajax一样
function loadXMLDoc(url)
{
xmlhttp=null;
var form=$("#mainform");
if (window.XMLHttpRequest)
 {// code for IE7,Firefox,Opera,etc.
 xmlhttp=new XMLHttpRequest();
 }
else if (window.ActiveXObject)
 {// code for IE6,IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
if (xmlhttp!=null)
 {
 xmlhttp.onreadystatechange=state_Change;
 var url=url+form.serialize();
 xmlhttp.open("GET",url,true);
 xmlhttp.send(null);
 }
else
 {
 alert("Your browser does not support XMLHTTP.");
 }
} 
function state_Change()
{
if (xmlhttp.readyState==4)
 {// 4 = "loaded"
 if (xmlhttp.status==200)
 {// 200 = "OK"
 alert(xmlhttp.responseText); 
 }
 else
 {
 alert("Problem retrieving XML data:" + xmlhttp.responseText);
 }
 }
}

这是在一个简单的静态页面上写的ajax,在页面的头上确实需要加上：
<Meta http-equiv="Access-Control-Allow-Origin" content="*">这是前台的解决兼容性的方式
整个前台代码就是这样。为了解决和模拟这个跨域的问题，我特意写了一个后台代码，最终将所有的问题都显示在了自己面前，
 public class ActionServlet extends HttpServlet{
public void service(HttpServletRequest req,HttpServletResponse response)
throws servletexception,IOException {
//response.setHeader("Access-Control-Allow-Origin","*");

String name=req.getParameter("name");
String age=req.getParameter("age");
Person per=new Person();
per.setAge(age);
per.setName(name);
String str="{'name':'"+name+"','age':'"+age+"'}";
PrintWriter out=response.getWriter();
if(name.equals("name")&&age.equals("age")){
System.out.println(per.toString());
out.write(str);
}
}
}

这是一个简单的servlet服务器代码，这里重点的是添加了response.setHeader("Access-Control-Allow-Origin","*");
如果没有这句在IE没有任何问题，在非IE浏览器下会出现跨域的问题。而且其他浏览器的ajax中服务端callback回掉的data值为null,
这样让我们很难判断问题所在。怀疑浏览器兼容问题时必要的，但是大多数浏览器并不像IE这样简单的设置就能顺利通过。
这里只是用实际行动讲述如何解决跨域的问题。
web.xml简述:
<servlet> <servlet-name>ServletTest</servlet-name> <servlet-class>trs.pojo.ActionServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ServletTest</servlet-name> <url-pattern>/login</url-pattern> </servlet-mapping> 
 小注：跨域问题在很大程度上是后台开发者不了解浏览器兼容性造成的，这对我们这些人来说唯一的启示就是怀疑后台开发人员代码 中存在问题的唯一方式就是自己模拟出一个相对应的东西。这是我今天解决的第二个关于浏览器兼容性的问题。