ajax跨域請求--jsonp執行個體

標籤：ajax   jsonp   

ajax請求代碼:

//地區事件選擇配送點function changeDistrict(value){ if(value == 0){     $('#transport_node').empty();     $('#transport_node').append('<option value="0">請選擇</option>');     return; } $('#transport_node').empty(); $('#transport_node').append('<option value="0">載入中...</option>'); $.ajax({         type: 'GET',         url: "http://192.168.33.114:8080/UIDTraceAdmin/transportnode/pagelist/jsonp?callbackFunction=jsonpCallback",         async: false,         dataType: "jsonp",         jsonp: "jsonpCallback",//傳遞給請求處理常式或頁面的，用以獲得jsonp回呼函數名的參數名(一般預設為:callback)         success: function(o){},         timeout:3000       }); }function jsonpCallback(result) {    if(result.success == true){     $('#transport_node').empty();     $('#transport_node').append('<option value="0">請選擇</option>');         $.each(result.transportList, function(i, n){        var html = '<option value="'+n.nodeId+'">'+n.transportnodeName+'</option>';             $('#transport_node').append(html)          });      }else{        $('#transport_node').empty();        $('#transport_node').append('<option value="0">請選擇</option>');      } }  

要點:

1.url中的請求參數callbackFunction=jsonpCallback這是伺服器響應返回後調用的javascript方法的名稱

2.dataType要為jsonp

跨網域服務器處理代碼:

@RequestMapping("/pagelist/jsonp")public void pagelist(@ModelAttribute TransportNode node,HttpServletRequest httpReq,HttpSession session,HttpServletResponse response) {//返回頭部設定          response.setHeader("Pragma", "No-cache");          response.setHeader("Cache-Control", "no-cache");         response.setHeader("Content-type", "application/x-javascript;charset=utf-8");        response.setDateHeader("Expires", 0);                  String jsonpCallback = httpReq.getParameter("callbackFunction");//jsonp回呼函數名         JSONObject resultJson  = new JSONObject();         PrintWriter out = null;      try {out = response.getWriter();} catch (IOException e1) {e1.printStackTrace();}  try {node.setRowStart((node.getPage() - 1) * node.getRows() + 1);node.setRowEnd(node.getPage() * node.getRows());      resultJson.put("transportList", JsonUtils.toJSONList(business.getList(node)));resultJson.put("success", true);        System.out.println(resultJson.toString());        out.println(jsonpCallback+"("+resultJson.toString()+")");//返回jsonp格式資料          out.flush();          out.close();          } catch (Exception e) {LogWriter.log("/pagelist/jsonp",e);try {resultJson.put("success", false);} catch (JSONException e1) {e1.printStackTrace();}         out.println(jsonpCallback+"("+resultJson.toString()+")");//返回jsonp格式資料          out.flush();          out.close();  }

注意要點:

1.設定響應報文頭,response.setHeader("Content-type", "application/x-javascript;charset=utf-8");,消除了"Resource interpreted as Script but transferred with MIME type text/plain",同時要根據自己的編碼格式設定正確的編碼;

2.jsonp的資料格式是:jsonpCallback+"("+resultJson.toString()+")"

舉個例子:

jsonpCallback({
    "code": "aaa",
    "price": 1780,
    "tickets": 5
});