ajax跨域请求

一、什么是跨域请求
域名http://www.baidu:8080/script/jquery.js，它由http://(协议)、www(子域名)、baidu(主域名)以及8080(端口号)组成，当另一个域名与其中任意一项对应不等的话，那么我们说两个域名就是跨域的。
如http://www.baidu:8080的页面上我们要请求数据到http://www.sohu:8080上去，那么就说这种请求是跨域请求。

二、为什么要讲跨域请求
因为在一般的请求条件下，我们的请求都是访问到原有服务。当服务有分开的时候，就必然会使用跨域请求。如果用原有的请求方式去请求跨域域名，请求是不能成功发送到后台。因此，对于ajax跨域请求有独特的方法使用。

三、json和jsonp
web开发很多时候都会用到json数据，那jsonp是干嘛的？jsonp是ajax提供的一种跨域请求实现的方式。首先我们看一下json和jsonp的数据格式
json

1 2 3 4 5

{      "message" : "获取成功" ,      "state" : "1" ,      "result" :{ "name" : "工作组1" , "id" :1, "description" : "11" } }

jsonp

1 2 3 4 5

callback({      "message" : "获取成功" ,      "state" : "1" ,      "result" :{ "name" : "工作组1" , "id" :1, "description" : "11" } })

大家发现，jsonp其实就是callback(json)。

四、如何使用jsonp进行跨域访问
例：
页面js请求

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$(document).ready( function (){ var url= 'http://localhost:8080/WorkGroupManagment/open/getGroupById"     +"?id=1&callback=?' ; $.ajax({   url:url,   dataType: 'jsonp' ,   processData: false ,   type: 'get' ,   success: function (data){     alert(data.name);   },   error: function (XMLHttpRequest, textStatus, errorThrown) {     alert(XMLHttpRequest.status);     alert(XMLHttpRequest.readyState);     alert(textStatus);   }}); });

后台接收数据

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

@RequestMapping (value = "/getGroupById" ) public String getGroupById( @RequestParam ( "id" ) Long id,    HttpServletRequest request, HttpServletResponse response)    throws IOException {      String callback = request.getParameter( "callback" );      ReturnObject result = null ;      Group group = null ;      try {        group = groupService.getGroupById(id);        result = new ReturnObject(group, "获取成功" , Constants.RESULT_SUCCESS);      } catch (BusinessException e) {        e.printStackTrace();        result = new ReturnObject(group, "获取失败" , Constants.RESULT_FAILED);      }      String json = JsonConverter.bean2Json(result);      response.setContentType( "text/html" );      response.setCharacterEncoding( "utf-8" );      PrintWriter out = response.getWriter();      out.print(callback + "(" + json + ")" );      return null ; }

这样，就可以达到跨域请求的目的了，这里注意的是。因为我们ajax里面请求的数据格式是jsonp，那么返回的数据格式就是callback(json)，如果直接返回json会报转换类型失败。

五、jQuery插件-jquery-jsonp
jQuery还提供了专门用于跨域请求的方法：

1 2 3 4 5 6 7 8 9 10 11

var url= "http://localhost:8080/WorkGroupManagment/open/getGroupById"      + "?id=1&callback=?" ; $.jsonp({    "url" : url,    "success" : function (data) {      $( "#current-group" ).text( "当前工作组:" +data.result.name);    },    "error" : function (d,msg) {      alert( "Could not find user " +msg);    } });