ajax跨域請求的三種方式(js+java)

1 : 採用jsonp (只支持get請求,後端返回的jsonp格式json,後端無需做請求放行操作)

 /* $.ajax({
        type: "GET",    // 此處只能是get請求 post請求後端即使修改(method = RequestMethod.POST)了也不行
        async: false,
        url: "http:localhost:8080/APmanager-webapp/api/simCard/table?id=1&serial=123",
        dataType: "jsonp",
        jsonp: "callback",
        jsonpCallback:"flightHandler",
        success: function(json){
          alert('您查詢到航班信息:票價: ' + json[0] + ' 元,餘票: ' + json[1] + ' 張。');
        },
        error: function(){
          alert('fail');
        }
      }); */
    // Java 後端
 /* @RequestMapping(value = { "/simCard/table" }, produces = "application/json; charset=UTF-8",method = RequestMethod.GET)
    @ResponseBody //flightHandler
    public String save1(@RequestParam(value = "id", required = false) String id,
            @RequestParam(value = "serial", required = false) String serial,
            HttpServletRequest request, HttpServletResponse response) {
        JSONObject resultObj = new JSONObject();
        JSONArray arr = new JSONArray();
        arr.add("a");
        arr.add("b");
        arr.add("c");
        System.out.println(id);
        System.out.println(serial);
        return "flightHandler(" + arr.toString() + ")";
    } */

2 : 採用原始ajax (後端需要攔截請求 設置指定路由放行)

// Java後端代碼必須設置response.setHeader("Access-Control-Allow-Origin","*");
                         //response.setHeader("Access-Control-Allow-Methods","GET,POST"); 請求放行
/*  $.ajax({
        type: "POST",   // get post 方法都是一樣的
        async: false,
        url: "http:localhost:8080/APmanager-webapp/api/simCard/table?id=1&serial=123",
        dataType: "json",
        success: function(json){
          alert("success");
          alert('票價: ' + json['flightHandler'][0] + ' 元,餘票: ' + json['flightHandler'][1] + ' 張。');
        },
        error: function(){
          alert('fail');
        }
      });  */

    // Java 後端
/*  @RequestMapping(value = { "/simCard/table" }, produces = "application/json; charset=UTF-8",method = RequestMethod.GET)
    @ResponseBody //flightHandler
    public String save1(@RequestParam(value = "id", required = false) String id,
            @RequestParam(value = "serial", required = false) String serial,
            HttpServletRequest request, HttpServletResponse response) {
            // 一般在請求攔截器中設置
        response.setHeader("Access-Control-Allow-Origin","*");   
        response.setHeader("Access-Control-Allow-Methods","GET,POST");        //請求放行
        JSONObject resultObj = new JSONObject();
        JSONArray arr = new JSONArray();
        arr.add("a");
        arr.add("b");
        arr.add("c");
        resultObj.put("flightHandler", arr);
        System.out.println(id);
        System.out.println(serial);
        return resultObj.toString();
    } */

3 : XHR2(XMLHttpRequest Level 2)

// 出處地址 http://www.cnblogs.com/bigbearbb/p/4274470.html
// 需要設置後端請求放行
//response.setHeader(“Access-Control-Allow-Origin”,”*”);
//response.setHeader(“Access-Control-Allow-Methods”,”GET,POST”);
//此對象相較於 level 1 版本的 增強
/* 1 可以獲取服務器端的二進制數據。
2 可以友好的提交表單數據
3 可以上傳文件(內置控制上傳進度事件邏輯)
4 使用HTML表單來初始化一個FormData對象 */

4 : ajax jsonp 增強插件
https://github.com/congmo/jquery-jsonp

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