Ajax跨域请求

本文和大家分享的主要是前端开发中，ajax跨域请求相关内容，希望对大家学习ajax有所帮助。

  一、什么是跨域请求

  域名http://www.maiziedu:8080/script/jquery.js，它由http://(协议)、www(子域名)、baidu(主域名)以及8080(端口号)组成，当另一个域名与其中任意一项对应不等的话，那么我们说两个域名就是跨域的。

  如http://www.maiziedu:8080的页面上我们要请求数据到http://www.sohu:8080上去，那么就说这种请求是跨域请求。

  二、为什么要讲跨域请求

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

  三、json和jsonp

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

  json

  {

  "message":"获取成功",

  "state":"1",

  "result":{"name":"工作组1","id":1,"description":"11"}

  }

  jsonp

  callback({

  "message":"获取成功",

  "state":"1",

  "result":{"name":"工作组1","id":1,"description":"11"}

  })

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

  四、如何使用jsonp进行跨域访问

  例：

  页面js请求

  $(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);

  }});

  });

  后台接收数据

  @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还提供了专门用于跨域请求的方法：

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

  }

  });

  ps:代码来源于网络

 

来源：搬砖工