Ajax跨域请求

来源：互联网发布：mysql max 日期编辑：程序博客网时间：2024/06/04 19:07

一、什么是跨域请求
域名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

{    "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:代码来源于网络

0 0