JSONP操作02_jQ-jsonp操作_封装jsonp

利用jquery框架实现jsonp访问数据

1.本地访问

php数据文件用于访问本地数据库，并将数据返回给回调函数

query("set names utf8");
$cb = $_GET['cb'];//获取函数名

$sql = "SELECT * FROM user";
$ret = $conn->query($sql);
$arr = array();
while($row = $ret->fetch_assoc()){
    $arr[] = $row;
}
//数组转换为json格式
$str = json_encode($arr);
echo $cb."({$str})";

利用jquery框架进行jsonp访问代码格式类似于ajax

$.ajax({
    //jsonp只有get
    url: "jsonp.php",
    dataType: "jsonp",
    jsonp: "cb",//
传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(
一般默认为:callback) 
    data:{},
    success: function (data) {
       console.log(data);
    },
    error: function () {
        console.log('fail');
    }
});

此外，如果不使用ajax中的success返回数据，也可以用jsonpCallback函数返回结果

$.ajax({
    //jsonp只有get
    url: "jsonp.php",
    dataType: "jsonp",
    jsonp: "cb",//
传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(
一般默认为:callback)
    jsonpCallback: "abc"//自定义的jsonp回调函数名称，默认为jQuery自动生成
的随机函数名，也可以写"?"，jQuery会自动为你处理数据
});
//不用sucess用jsonpCallback也可以
function abc(data){
    console.log(data);
}

两种返回数据方法获取的本域数据形式相同

2.跨域访问

方法与非跨域访问类似，返回数据可用success接收或者回调函数接收

$.ajax({
    //jsonp只有get
    url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/
su?wd=游戏&cb=abc",
    dataType: "jsonp",
    jsonp: "cb",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名
(一般默认为:callback)
    jsonpCallback: "abc",//自定义的jsonp回调函数名称，默认为jQuery自动生成
的随机函数名，也可以写"?"，jQuery会自动为你处理数据
});
//不用sucess用jsonpCallback也可以
function abc(data){
    console.log(data);
}

3.jsonp封装

jsonp({
	url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
	jsonp:"cb",
	data:{wd:"动画"},
	sucess:function(data){
		console.log(data);
	}
})
//封装函数
function jsonp(option){
	//定义一个函数名,加了时间戳为了防止命名冲突
	var cb = "json"+new Date().getTime();//
定义cb函数,使用时间使名字不一样,防止冲突
	//将cb转化为全局函数
	window[cb] = option.sucess;
	//用来传输数据给后台,用于调用该函数传数据参数
	option.data[option.jsonp] = cb;
	//把json格式的data数据转为类似{"name":"dada","age":12,"cb":cb}格式
	var arr = [];
	for(var key in option.data){
		arr.push(key+"="+option.data[key]);
	}
	var str = arr.join("&");
	//var str = "name=dada&age=12&cb=jsonp12331232132";
	//script标签跨域请求数据
	var script = document.createElement("script");
	script.src = option.url+"?"+str;
	document.body.appendChild(script);
	document.body.removeChild(script);
}