关于跨域请求和JSONP

一、跨域请求：

（这里主要指js中的ajax请求）

请求：在某个url（源url）下向另一个url（目标url）发出请求；

跨域：如果目标url和源url有下列中的任意一种情况则为跨域：

1.源url和目标url使用的协议不一致（如：http和https）

2.源url和目标url的主机名不一致（如http://a.x.com/和http://b.x.com/）

3.源url和目标url端口号不一致（如http://x.x.com:81/和http://x.x.com/）

* 由以上三点可知跨域最高限制到端口级别（因为同一端口下只有一个程序）

二、跨域请求的限制是出于对安全的考虑，浏览器有同源策略限制 防止其他域下的的非法请求

三、那么问题来了，有时候我们有跨域请求的需求

方案1.服务器端代理：可以在当前域的服务器端设置一个代理，由服务器端向跨域下的网站发出请求，再将请求结果返回给当前域

方案2.JSONP,最流行的一种方案，也是本笔记的重点内容。

下面详细介绍JSONP

*名称：JSON with Padding，JSON填充的意思，可以理解为回调时填充了数据

*原理：请求不同域上的数据是不可以的，但是通过src引用不同域上的js脚本是可以的，

  并且凡是拥有src属性的标签都有跨域的能力

*通过上面的原理我们就可以通过引用js脚本的方式来请求数据啦

*前端：

<!--当下面的js脚本加载完毕后就会回调getData方法，数据被传入-->

<script src="http://www.xx.com/t/c?callback=getData"></script>

<script>

    function  getData(respData){

       //respData就是我们要请求的数据

       //做点啥...

    }

</script>

*后端：

主机地址：www.xx.com

@RequestMapping("/t")

@Controller

   ... ...

@RequestMapping("/c")

@ResponseBody

public String getCallback(@RequestParam("callback")
String func){

   //要返回的json数据
 
 String respData="{name: 'jack' , age: 25}"
   //拼接js代码
 
 return func+"("+respData+");";  //getData({name: 'jack' , age: 25}); //这段代码会在前端执行
   //最后要返回js文件哟，具体实现略

//这一段的springMVC提供的支持，返回JSONPObject,自动处理成一个js文件返回
  ModelAndView
model = new ModelAndView(); 
  List l=new ArrayList(); 
  for(int i=0;i<2;i++){ 
     Otc otc = new Otc(); 
     otc.setName("测试1"); 
     otc.setId(i+1); 
     l.add(otc); 
  } 
  model.addObject("data", l); 
  return new JSONPObject(func, model); 
}

*JSONP总结：
1.JSONP使用了JSON，从名称可以看出（json其实就是js对象，回调时可以直接传入，这是它流行的原因）
2.JSONP根本不是一个AJAX请求，它只是对js脚本的一个资源请求
3.jQuery的AJAX中封装了JSONP，自动完成了上面的前端完成的代码，
让人误以为它是一个AJAX请求，这是一个误会，因为AJAX跨域请求是不被允许的
4.后端的js拼接是需要我们自己完成的，当然也有框架可以自动完成
5.JSONP只是我们跨域请求获得数据的一个媒介，我们真正关心的是数据，
所以jQuery中屏蔽了具体过程是正确的