手动实现jsonp

一、jsonp跨域原理

利用script标签的异步加载特性实现给服务端传一个回调函数，服务器返回一个传递过去的回调函数名称的JS代码。即：利用script标签的src属性，通过动态创建一个script标签，指定src属性为跨域的api，那么html会把返回的字符创当作javascript代码来进行解析，如果我们在返回的字符串中使用自定义函数形式包装起来，然后在html中调用自定义函数，即可拿到返回的字符串。

二、优点

能够直接访问响应文本，可用于浏览器与服务器间的双向通信。

三、缺点

JSONP从其他域中加载代码执行，其他域可能不安全；难以确定JSONP请求是否失败。

四、手动实现jsonp

1、 挂载回调函数

2、 将data转化成url字符串的形式

3、 处理url地址中的回调参数

4、 创建一个script的标签

5、 将script标签放到页面中

    // 手动实现jsonp跨域
    ;(function(window, name){
        var jsonp = function(url, param, callback){
            var callbackSuffix = Math.random().toString().replace('.', '');
            // console.log(callbackSuffix);  // 07626840955849186
            var callbackName = "callback_function" + callbackSuffix;
            // console.log(callbackName); // callback_function07626840955849186
            window[callbackName] = callback;
            var queryString = url.indexOf('?') == -1 ? "?" : '&';
            // console.log(queryString); // ?
            for(var key in param){
                queryString += key + '=' + param[key] + '&';
            }
            // console.log(queryString); // ?count=10&start=15&
            queryString += 'callback=' + callbackName;
            // console.log(queryString); // ?count=10&start=15&callback=callback_function07626840955849186
            var scriptElement = document.createElement('script');
            scriptElement.src = url + queryString;
            document.body.appendChild(scriptElement);
        };
        window.$jsonp = jsonp; 
    })(window, document);

测试例子：

    <div id="result"></div>

    // 使用
    (function(){
        $jsonp('http://api.douban.com/v2/movie/in_theaters', {count:10, start:15}, function(data){
            document.getElementById('result').innerHTML = JSON.stringify(data);
        });
    })();

五、使用：jquery+ajax+jsonp

$.ajax({
      type : "get",
      async: false,
      url : "ajax.ashx",
      dataType : "jsonp", // 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断
      jsonp: "callbackparam",  //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
      jsonpCallback:"success_jsonpCallback",  //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
      success : function(json){
          alert(json);
          alert(json[0].name);
      },
      error:function(){
           alert('fail');
      }
 });