hanyeah

JSONP(JSON with Padding) 是一种跨域请求方式。

利用了script 标签可以跨域请求的特点来实现。

平时都是用jquery来实现，其实自己写也很简单。就是创建一个script标签，设置src，src添加一个callback参数，参数的值对应一个function的名字，加载完成之后就会自动调用callback指定的function了。

jquery实现。

<script type="text/javascript" src = 'jquery.js'></script>
<script type="text/javascript">

var url = "https://books.google.com/books";

$.ajax(url, {
    data:{
      id: '6IUarHeMWpAC',
      h1: 'zh-CN',
      pg: 'PP1',
      jscmd: 'click3'
    },
    dataType: 'jsonp',
    crossDomain: true,
    success: function(data) {
      console.log('jquery',data);
    },
    error:function(e){
      console.log(e);
    }
  }); 
</script>

自己用js实现。

<script type="text/javascript">

var url = "https://books.google.com/books";

jsonp({
	url: url,
	time: 10000,
	data:{
		id: '6IUarHeMWpAC',
		hl: 'zh-CN',
		pg: 'PP1',
		jscmd: 'click3'
	},
	fail:(obj)=>{
		console.log('超时');
	},
	success:(json)=>{
		console.log(json);
	}
});

function jsonp(options) {
        options = options || {};
        if (!options.url) {
            throw new Error("参数不合法");
        }

        //创建 script 标签并加入到页面中
        var callbackName = ('jsonp_' + Math.random()).replace(".", "");
        var oHead = document.getElementsByTagName('head')[0];
        options.data['callback'] = callbackName;
        var params = formatParams(options.data);
        var oS = document.createElement('script');
        oHead.appendChild(oS);

        //创建jsonp回调函数
        window[callbackName] = function (json) {
            oHead.removeChild(oS);
            clearTimeout(oS.timer);
            window[callbackName] = null;
            options.success && options.success(json);
        };

        //发送请求
        oS.src = options.url + '?' + params;

        //超时处理
        if (options.time) {
            oS.timer = setTimeout(function () {
                window[callbackName] = null;
                oHead.removeChild(oS);
                options.fail && options.fail({ message: "超时" });
            }, options.time);
        }
    };

    //格式化参数
    function formatParams(data) {
        var arr = [];
        for (var name in data) {
            arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
        }
        return arr.join('&');
    }

     
</script>

直接在页面中的script的src中加callback。

<script type="text/javascript">
    function jsonpCallback(json){
    	console.log('jsonpCallback:', json);
    }
</script>
<script type="text/javascript" src = "https://books.google.com/books?id=6IUarHeMWpAC&hl=zh-CN&pg=PP1&jscmd=click3&callback=jsonpCallback"></script>

以上测试用的谷歌图书的地址，需要翻墙，不能翻墙的话，可以自己换个测试地址。

参考：https://www.cnblogs.com/greatluoluo/p/6295082.html