ajax 跨域請求

有兩種解決辦法 
1:jQuery jsonp方式(據說不支持 POST,即使將 type 的值修改爲 POST ,也會被當成 GET 請求) 
js示例代碼 
function ajaxJsonp() { 
$.ajax({ 
url : “http://web2.lp.com:8080/MytestWeb/setcookie?ajaxType=jsonp” , 
type : “GET”, 
async : false, 
dataType : “jsonp”, 
jsonpCallback : “jsonpCallback”,//自定義的jsonp回調函數名,默認爲jquery自動生成的隨機函數 
jsonp : “callback”,//傳遞給請求處理程序或頁面的,用以獲得jsonp回調函數名的參數名(默認爲callback) 
success : function(data) { 
alert( “服務器連接成功 ajaxJsonp” ); 
}, 
error : function(data) { 
alert( “服務器連接失敗 ajaxJsonp” ); 

}); 
}

服務器端實例代碼 
System.out.println(“servlet get jsonp”); 
String jsonp = request.getParameter( “callback”); 
response.setContentType( “text/html;charset=UTF-8”); 
PrintWriter out = response.getWriter(); 
out.write(jsonp + “({\”name\”:\”joy\”})” ); 
out.flush(); 
out.close();

2:CROS方式(如果要支持post請求,將ajax的type修改爲 POST 就可以了) 
js示例代碼,就是普通的ajax請求 
function ajax() { 
var url; 
url = “http://web2.lp.com:8080/MytestWeb/setcookie?ajaxType=native” ; 
$.ajax({ 
url : url, 
type : “GET”, 
async : false, 
success : function(data) { 
alert( “服務器連接成功 ajax” ); 
}, 
error : function(data) { 
alert( “服務器連接失敗 ajax” ); 

}); 
}

服務器端實例代碼 
//Access-Control-Allow-Origin 頭的值爲 * 表示服務器接受所有的不用源的請求,也可以是特定的域 例如:http://duobao.jd.com:8976(如果不是80端口, 
//一定要將端口號寫上),注意 http 只能有一個 Access-Control-Allow-Origin頭,頭的值 只能是 * 或者 一個域(例如:http://duobao.jd.com:8976 )。 
response.setHeader( “Access-Control-Allow-Origin”, “*” ); 
PrintWriter out = response.getWriter(); 
out.write(“{\”name\”:\”joy\”}” ); 
out.flush(); 
out.close();

注意事項 
如果ajax中包含,contentType: “application/json” 請求方式爲 POST 那麼需要重寫HttpServlet 中的 doOptions 方法

@Override 
protected void doOptions(HttpServletRequest request, HttpServletResponse response) { 
System. out.println( “doOptions request method ” + request.getMethod()); 
response.setHeader( “Access-Control-Allow-Origin”,”*” ); 
response.setHeader( “Access-Control-Allow-Headers”, “Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type”); 
}

同時 doPost 方法也要包含 方法 response.setHeader( “Access-Control-Allow-Origin”, “*” ) 代碼

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章