一懦尝、什么是AJAX毁欣？
Asynchronous JavaScript and XML (Ajax ) 是驅(qū)動(dòng)新一代 Web 站點(diǎn)（流行術(shù)語(yǔ)為 Web 2.0 站點(diǎn)）的關(guān)鍵技術(shù)嘉栓。Ajax 允許在不干擾 Web 應(yīng)用程序的顯示和行為的情況下在后臺(tái)進(jìn)行數(shù)據(jù)檢索炕淮。使用 XMLHttpRequest
函數(shù)獲取數(shù)據(jù)，它是一種 API抗悍，允許客戶端 JavaScript 通過(guò) HTTP 連接到遠(yuǎn)程服務(wù)器滤否。Ajax 也是許多 mashup 的驅(qū)動(dòng)力脸狸，它可將來(lái)自多個(gè)地方的內(nèi)容集成為單一 Web 應(yīng)用程序。
二藐俺、為什么會(huì)有這個(gè)問(wèn)題炊甲？
ajax本身實(shí)際上是通過(guò)XMLHttpRequest對(duì)象來(lái)進(jìn)行數(shù)據(jù)的交互，而瀏覽器出于安全考慮欲芹，不允許js代碼進(jìn)行跨域操作卿啡，所以會(huì)警告。
三菱父、常見(jiàn)解決辦法
1牵囤、使用script標(biāo)簽
script調(diào)用沒(méi)有域的限制，我們可以將輸出的數(shù)據(jù)偽裝成script的變量滞伟。
2、服務(wù)端腳本中轉(zhuǎn)
服務(wù)端腳本使用XMLHTTP沒(méi)有域的限制炕贵，但是耗費(fèi)服務(wù)器的資源梆奈。
3、利用iframe
在同一個(gè)域名的各個(gè)子域名下称开，如果設(shè)置了document.domain亩钟，那么是可以相互調(diào)用JS的。
4鳖轰、JSONP
這個(gè)方法也是最解決正常AJAX和多人使用的清酥。
JSONP(JSON with Padding)是一個(gè)非官方的協(xié)議，它允許在服務(wù)器端集成Script tags返回至客戶端蕴侣，通過(guò)javascript callback的形式實(shí)現(xiàn)跨域訪問(wèn)（這僅僅是JSONP簡(jiǎn)單的實(shí)現(xiàn)形式）焰轻。
首先在客戶端注冊(cè)一個(gè)callback, 然后把callback的名字傳給服務(wù)器。
此時(shí)昆雀，服務(wù)器先生成 json 數(shù)據(jù)辱志。
然后以 javascript 語(yǔ)法的方式蝠筑，生成一個(gè)function , function 名字就是傳遞上來(lái)的參數(shù) jsonp.
最后將 json 數(shù)據(jù)直接以入?yún)⒌姆绞剑胖玫?function 中揩懒，這樣就生成了一段 js 語(yǔ)法的文檔什乙，返回給客戶端。
客戶端瀏覽器已球，解析script標(biāo)簽臣镣，并執(zhí)行返回的 javascript 文檔，此時(shí)數(shù)據(jù)作為參數(shù)智亮，傳入到了客戶端預(yù)先定義好的 callback 函數(shù)里.（動(dòng)態(tài)執(zhí)行回調(diào)函數(shù)）忆某。
5、CORS
這也是我們這次采用的解決辦法鸽素。
CORS-CrossOrigin Resources Sharing褒繁，也即跨源資源共享，它定義了一種瀏覽器和服務(wù)器交互的方式來(lái)確定是否允許跨域請(qǐng)求馍忽。它是一個(gè)妥協(xié)棒坏，有更大的靈活性，但比起簡(jiǎn)單地允許所有這些的要求來(lái)說(shuō)更加安全遭笋。簡(jiǎn)言之坝冕，CORS就是為了讓AJAX可以實(shí)現(xiàn)可控的跨域訪問(wèn)而生的。
但是CORS也具有一定的風(fēng)險(xiǎn)性瓦呼，比如請(qǐng)求中只能說(shuō)明來(lái)自于一個(gè)特定的域但不能驗(yàn)證是否可信喂窟，而且也容易被第三方入侵。
四央串、在jfinal中使用CORS
在jfinal中使用cors非常簡(jiǎn)單磨澡，這是得益于有cors的支持庫(kù)。我們也將這個(gè)支持庫(kù)上傳到了我們的CDN服務(wù)器上
1质和、在開(kāi)發(fā)項(xiàng)目中加入支持庫(kù)
2稳摄、修改web.xml，增加以下代碼
<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的攔截需要在jfinal之前饲宿！
3厦酬、使用例子，我們這里用的是jQuery瘫想，其它框架類似仗阅。
$("#login").click(function() {
$.ajax("http://測(cè)試地址", {
type: "POST",
xhrFields: {
withCredentials: true,
useDefaultXhrHeader: false
},
data: {
username: "測(cè)試",
password: "測(cè)試"
},
crossDomain: true,
success: function(data, status, xhr) {
}
});
});
*** 轉(zhuǎn)自：https://my.oschina.net/tbaby/blog/501333 ***
