JSONP的使用

1、原生JSONP写法

 /*
  * url: jsonp地址
  * callback: 返回接收的函数名(String)
  */
 function mockJsonp(url,callback){
 	 var JSONP=document.createElement("script");
	 JSONP.type="text/javascript";
	 JSONP.src=`${url}?callback=${callback}`;
	 document.getElementsByTagName("head")[0].appendChild(JSONP);
 }
 function jsonCallBack(result){
 	console.log('jsonp原生写法');
 	console.log(result);
 }
 mockJsonp("https://api.asilu.com/geoip/",jsonCallBack.name)

2、JQuery的jsonp写法

//ajax请求
$.ajax({
	url: "https://api.asilu.com/geoip/",
	dataType: "jsonp", //指定服务器返回的数据类型
	jsonpCallback: "handleData" //指定回调函数
}).done(function(resp_data) {
	console.log("请求完成！");
})

function handleData(result) {
    console.log('jsonp的jquery写法');
 	console.log(result);
}

3、对原生jsonp的封装

function jsonp(obj) {
	//定义一个处理Jsonp返回数据的回调函数
	var callbackName = 'callback' + Math.random().toString(16).slice(2);
	window[callbackName] = function(result) {
		delete window[callbackName];
		obj.success(result);
	}
	
	//组合请求URL
	var callbackStr = "callback="+ callbackName;
	var src = obj.url.includes("?") ? (obj.url + "&" + callbackStr) : (obj.url + "?" + callbackStr);
	for(key in obj.data){
		src += ("&" + key + "=" + obj.data[key]);
	}
	
	//将创建的新节点添加到BOM树上
	var script = document.createElement("script");
	script.src = src;
	document.getElementsByTagName("body")[0].appendChild(script);
}

//调用Jsonp函数发送jsonp请求
jsonp({
	url:"https://api.asilu.com/geoip/",
	data:{
		name:"小明",
	},
	success:function(obj) {
		console.log(obj)
	}
});