jsonp 跨域原理分析

jquery 是如何把 jsonp 封装到ajax里面的？

一般情况下jqury 生成的访问 远程站点的 url
默认情况下：（我所在的实际项目中的使用）

http://web.k3k.net/haila3/pt/tp/index.php/Home/User/getusergoto/?callback=jQuery191028614189839964865_1497261919344&token=420171c8-031a58667e64&_=1497261919346

上述代码请求生成的url（设置 jsonpCallback的值为 GetData ）

http://web.k3k.net/haila3/pt/tp/index.php/Home/User/getusergoto/?callback=GetData&token=420171c8-00b8-031a58667e64&_=1497261919346

最后 一个 _=1497261919346 k v 是为了防止浏览器缓存，而由 jquery 自动增加上的。

所以相当于 在 前端文件中引入了 一个这样的js文件

这里有2个重要的参数

jsonp：
在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，
比如{jsonp:"onJsonPLoad"}会导致将"onJsonPLoad=?"传给服务器。

jsonpCallback：
为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。
这主要用来让jQuery生成一个独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。

你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。

从jQuery 1.5开始，你也可以使用一个函数作为该参数设置，在这种情况下，该函数的返回值就是jsonpCallback的结果。

通过一开始 jsonp 原理的分析，可以得出：

当我们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据。
而我们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码

所以我们可见服务器代码最后一行

echo $_GET["$callback"])."(". json_encode({code:0,msg:"success"}) .")";

就是执行的 getdata，然后把数据通过回调的方式传递过去

OK，就是整个流程就是：

客户端发送一个请求，规定一个可执行的函数名
（这里就是jQuery做了封装的处理，自动帮你生成回调函数并把数据取出来供success属性方法来调用,不是传递的一个回调句柄），
服务端接受了这个 getdata 函数名，然后把数据通过实参的形式发送出去

以上是 jquery 封装的 ajax方法里面的 jsonp 请求，说来说去，自己都好像忘记了普通的 ajax请求

js原生 ajax 请求

        //1.创建对象
        var ajax = "";

        if(window.XMLHttpRequest){
            ajax = new XMLHttpRequest();    /* 现代浏览器 *／
        }else if(window.ActiveXObject){
            ajax = new ActiveXObject("Microsoft.XMLHTTP");  /* 万恶的ie浏览器 *／
        }

        //2.创建请求

        //get请求方法(拼接url参数)
//      var url="login.php?name="+name+"&password="+pass;
//      ajax.open("GET",url,true);

        //post请求
        ajax.open("POST","login.php",true);
        ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        var data="name="+name+"&password="+pass;

        //3.发送请求
//      ajax.send();        //get 方式发送请求
        ajax.send(data);    //post 方式发送请求

        //4.捕获请求状态、onreadystatechange表示当前请求状态

        ajax.onreadystatechange=function(){
            //5.判断请求状态
            if(ajax.readyState==4){
                //6.判断请求结果
                if(ajax.status==200){
                    //请求成功将结果 responseText 放入回调函数中
                    succ(ajax.responseText);
                }
            }
        }

注意

通过检测window对象是否有XMLHttpRequest属性来确定浏览器是否支持标准的XMLHttpRequest。
注意，不要根据浏览器的navigator.userAgent来检测浏览器是否支持某个JavaScript特性，一是因为这个字符串本身可以伪造，二是通过IE版本判断JavaScript特性将非常复杂。

当创建了XMLHttpRequest对象后，要先设置onreadystatechange的回调函数。在回调函数中，通常我们只需通过readyState === 4判断请求是否完成，
如果已完成，再根据status === 200判断是否是一个成功的响应。

XMLHttpRequest对象的open()方法有3个参数，
第一个参数指定是GET还是POST，
第二个参数指定URL地址，
第三个参数指定是否使用异步，默认是true，所以不用写。

注意，千万不要把第三个参数指定为false，否则浏览器将停止响应，直到AJAX请求完成。
如果这个请求耗时10秒，那么10秒内你会发现浏览器处于“假死”状态。

最后调用send()方法才真正发送请求。
GET请求不需要参数，
POST请求需要把body部分以字符串或者FormData对象传进去。

后台 php 代码

当然实现跨域的方法还有很多，html5规范 的 CORS(全称Cross-Origin Resource Sharing)，是HTML5规范定义的如何跨域访问资源。

了解CORS前，我们先搞明白概念：
Origin表示本域，也就是浏览器当前页面的域。当JavaScript向外域（如sina.com）
发起请求后，浏览器收到响应后，首先检查Access-Control-Allow-Origin是否包含本域，
如果是，则此次跨域请求成功，如果不是，则请求失败，JavaScript将无法获取到响应的任何数据。

假设本域是my.com，外域是sina.com，只要响应头Access-Control-Allow-Origin为http://my.com，或者是*，本次请求就可以成功。

可见，跨域能否成功，取决于对方服务器是否愿意给你设置一个正确的Access-Control-Allow-Origin，决定权始终在对方手中。

1、ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；

2、ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XMLHttpRequest获取非本页内容，而jsonp的核心则是通过HTTP来动态添加