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> 

  小注：跨域问题在很大程度上是后台开发者不了解浏览器兼容性造成的，这对我们这些人来说唯一的启示就是怀疑后台开发人员代码
  中存在问题的唯一方式就是自己模拟出一个相对应的东西。这是我今天解决的第二个关于浏览器兼容性的问题。