ajax的跨域请求

一、什么叫跨域

　　域当然是别的服务器 (说白点就是去别服务器上取东西) 只要协议、域名、端口有任何一个不同，都被当作是不同的域。

　　总而言之，同源策略规定，浏览器的ajax只能访问跟它的HTML页面同源（相同域名或IP）的资源。

二、解决方案

　　服务端解决方案：

respons.setHeader("Access-Control-Allow-Origin", "*");

Access-Control-Allow-Origin:* 表示允许任何域名跨域访问

如果需要指定某域名才允许跨域访问，只需把Access-Control-Allow-Origin:*改为Access-Control-Allow-Origin:允许的域名

　　此方式无需改动前台代码，但包含安全隐患。

　　客户端解决方案：（JSONP）

　　　　1.何谓JSONP

　　　　　　JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

　　　　　　引用网友的解释：http://kb.cnblogs.com/page/139725/

　　　　　　JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别，但其实他们根本不是一回事儿：

　　　　　　JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。

比较一下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比json外面有多了一层，callback()。

注意这里需要先将查询结果转换我json格式，然后用参数callback在json外面再套一层，就变成了jsonp。指定数据类型为jsonp的ajax就可以做进一步处理了。

　　　　2.JSONP有何作用

　　　　　　由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

　　　　　　故核心原理是Web页面上调用js文件时则不受是否跨域的影响

　　　　引用知乎网友的回答：

　　 ajax的跨域请求

　　　3.如何实现

　　　　实例：http://www.cnblogs.com/yangzhilong/p/4826902.html

　　　　前台代码：

 $.ajax({
 type : "get",
 url : "http://localhost:8080/jeesite/f/order/takeOrder",
 data: {'tableNum':'8'},
 dataType : "jsonp",//数据格式为JSONP
            jsonp: "jsonpCallback",////服务端用于接收callback调用的function名的参数 
            success : function(result) {
 alert(result.id);
 },
 error : function() {
 alert('fail');
 }
 });

　　　　服务端代码：

　　　　　　讲到底就是拼接字符串，拼接为如下格式即可：

flightHandler({
"code": "CA1998",
"price": 1780,
"tickets": 5
});

　　　　  PrintWriter out = response.getWriter();
// 客户端请求参数
        String jsonpCallback = request.getParameter("jsonpCallback");
// 转换对象为JSON格式
        ObjectMapper mapper = new ObjectMapper();
 String jsonString = mapper.writeValueAsString(map);
// 返回jsonp格式数据
        out.print(jsonpCallback + "(" + jsonString + ")");
 out.flush(); 
 out.close();

　　　　由浅入深理解JSONP请看上文引用处

秒客网

ajax的跨域请求

相关文章