JQuery ajax 与java TOMCAT实现跨域资源共享（CORS）踩坑总结。

1.前端：
前端的ajax请求和普通JQuery下的ajax请求没有什么大区别。

$.ajax({
    url:url,
    type:"get",
    dataType:"json",
    data:{filename:week()+'.json'},//ajax的cors请求，和普通ajax请求一样把参数放进data属性里，且不需要在URL添加callback参数。
    success:function (result) {//那么ajax的cors请求和普通请求又有什么区别呢？仅仅只是在java tomcat中配置允许2个包就可
        alert("success 函数已经成功调用！");
        for(i in result.theTeams){

            alert(result.theTeams[i].teamname);

        }


    },
    error:function (jqxtr,status) {alert("请求失败，status:"+jqxtr.status+status+"  readystate:"+jqxtr.readyState+"    status TEXT:"+jqxtr.statusText，errorThrown);

    }//我要对error返回函数的参数有更深刻的认识！这样才能debug！
    //debug完成了，是服务器端错误，如果callback我留空不写，那么就会造成错误，我要去看日志。
    //日志错误找到了，发现是因为不了解servlet中getParameter返回值，如果没有这个值就会返回null而不是空字符串对象“”


});

-------------------可略过-----------------------------------------------------------------------
为了方便debug，记得了解一下error function（）的三个输入参数。

第一个参数 jqXHR jqXHR：这里的jqXHR是一个jqXHR对象，在Jquery1.4和1.4版本之前返回的是XMLHttpRequest对象，1.5版本以后则开始使用jqXHR对象，该对象是一个超集，就是该对象不仅包括XMLHttpRequest对象，还包含其他更多的详细属性和信息。

这里主要有4个属性：

readyState :当前状态,0-未初始化，1-正在载入，2-已经载入，3-数据进行交互，4-完成。
status  ：返回的HTTP状态码，比如常见的404,500等错误代码。
statusText ：对应状态码的错误信息，比如404错误信息是not found,500是Internal Server Error。
responseText ：服务器响应返回的文本信息

第二个参数 String textStatus：返回的是字符串类型，表示返回的状态，根据服务器不同的错误可能返回下面这些信息：“timeout”（超时）, “error”（错误）, “abort”(中止), “parsererror”（解析错误），还有可能返回空值。

第三个参数 String errorThrown：也是字符串类型，表示服务器抛出返回的错误信息，如果产生的是HTTP错误，那么返回的信息就是HTTP状态码对应的错误信息，比如404的Not Found,500错误的Internal Server Error。
-------------------可略过-----------------------------------------------------------------------

后端JAVA tomcat（7.0）需要处理的就是在tomcat和你的webapp中配置两个包就可以。
cors-filter-1.7.jar
java-property-utils-1.9.jar
【后续版本请https://mvnrepository.com/search?q=java-property-utils在maven仓库网搜索下载】
上传到

1. tomcat/lib里面
2. webapp/你的应用/WEB-INF/你的lib里面。
3. 配置你应用的web.xml
   配置方法：
   添加下面的filter作为你的第一个filter【必须是第一个】。

<filter>       
       <filter-name>CORS</filter-name>
       <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
       <init-param>
        <param-name>cors.allowOrigin</param-name>
           <param-value>*</param-value>
       </init-param>
       <init-param>
        <param-name>cors.supportedMethods</param-name>
           <param-value>GET, POST, HEAD, PUT, DELETE</param-value>
       </init-param>
       <init-param>
        <param-name>cors.supportedHeaders</param-name>
           <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
       </init-param>
       <init-param>
           <param-name>cors.exposedHeaders</param-name>
           <param-value>Set-Cookie</param-value>
       </init-param>
       <init-param>
           <param-name>cors.supportsCredentials</param-name>
           <param-value>true</param-value>
       </init-param>
   </filter>
  
   <filter-mapping>
       <filter-name>CORS</filter-name>
       <url-pattern>/*</url-pattern>
   </filter-mapping>

然后CORS的配置就算是完成啦！你的api就能轻松被其他域的前端调用了。

---

最后，稍微提一下另一种跨域解决方案JSONP。
JSONP 通过传script的方法来达成跨域，在JQuery的ajax中也有一定程度的封装。
在JQuery ajax中把ajax dataType改为 dataType：“jsonp”便可以正常使用。 他会默认给你一个系统生成的callback函数名称（可以理解为success参量的函数），然后请求完了之后就把数据放进你success函数里，过程是自动化的很方便。至于其他参数什么的，只需要在data参量中{参量名：参量值，参量名：参量值}就可以了，跟普通ajax一样的。