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
});