跨域请求方式之Jsonp形式

在浏览器端才有跨域安全限制一说，而在服务器端是没有跨域安全限制的。

在两个异构系统（开发语言不同）之间达到资源共享就需要发起一个跨域请求。

而浏览器的同源策略却限制了从一个源头的文档资源或脚本资源与来自另一个源头的资源进行交互。在请求协议、端口以及域名（主机）相同时才是同一个源，否则不是同一个源，js无法访问不是同源的资源。

通过js发起跨域请求需要进行改造，或先将请求发到同源的服务器中，然后服务器内部进行转发请求，再将数据转发到前端进行展示。

通过Jsonp发起跨域请求 >>

Jsonp是json的的一种使用模式，jsonp基于js，如果没有js的环境就没有jsonp。jsonp能简单的解决跨域问题，主要是利用了js的一个“漏洞”，使用<script>标签的src属性来连接到不同源的服务器，并接收后台返回的数据。

第一种用法：

利用<script>标签src属性发起请求。

<script>
    //回调函数
    function test (result) {
        alert(result.key);
        var data = JSON.stringify(result); //json对象转成字符串
        alert(data);
    }
    $(document).ready(function () {
       $("#btn").click(function () {
             //向头部输入一个脚本，该脚本发起一个跨域请求 test 用来包裹json串
             <script src='http://localhost:9090/student?callback=test'></script>
       });
   });
</script>

在另一端服务器接收"test"参数并处理请求，返回一个jsonp格式即可形成一个跨域请求。

返回数据格式：test({"key":"value"})

以上这种写法是基本写法，需要自己写脚本发起请求，还要写个函数来处理数据，比较麻烦。

第二种用法：

通过jQuery发起Ajax请求的方式。

<script>
   $(document).ready(function () {
     $("#btn").click(function () {
         $.ajax({
             url: "http://localhost:8080/itemData",
             type: "GET",
             dataType: "jsonp",        //指定服务器返回的数据类型
             jsonp: "callback",        //指定参数名称（习惯一般用callback名，不写该行默认参数名就是callback参数）
             jsonpCallback: "test",    //指定回调函数名称
             success: function (data) {  //后台返回一个json数据
                 alert(data.key);
             }
         });
     });
   });
</script>

后台不改变还是以上的那种，需要拼接个jsonp格式的数据即可。

设为dataType: 'jsonp', 这个$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议.

JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求，我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。

第三中用法：

通过$.getJSONP() 方法。该方法是jQuery对ajax的一种高级封装。有些$.ajax api底层的参数就被封装而不可见了。

<script>
    //第一参数链接，第二个参数函数名称自定义    
    $.getJSONP(url,test);
</script>