html1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- <a href="http://www.baidu.com">123123123</a> -->
<!-- <img src="https://www.baidu.com/img/dong1_a1c52951c1f40e1496b46b9ae415c121.gif" alt=""> -->
<!-- <link rel="stylesheet" href=""> -->
</body>
<!-- <script src="data/jsonp.txt"></script> -->
<!-- <script src="data/jsonp1.php"></script> -->
<script>
// http://
// www.baidu.com
// :80
ajax无法请求未经允许的跨域资源
ajax的核心XHR对象
jsonp不是ajax，没有xhr对象
jsonp利用的是某些html可以引入外部资源的特点
script标签会将引入的文本文件作为js代码解析
引入的php文件:php文件先被服务器解析，解析之后，php返回的字符，被script标签作为js代码解析
// fn();
function fn(res){
console.log(res)
}
</script>
<script src="http://127.0.0.1/jsonp/data/jsonp1.php?user=admin"></script>
</html>
php1：
<?php
// echo "hello";
// echo "console.log('hello')";
// echo "function fn(){console.log(123)}";
$u = @$_REQUEST["user"];
// $data = "3.1415926";
$data = "你哈 ".$u;
echo "fn('".$data."')";
?>
html2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
<script>
document.onclick = function(){
var url = "http://127.0.0.1/1908/jsonp/data/jsonp2.php"
jsonp(url,function(res){
console.log(res)
},{
user:"root"
})
}
function jsonp(url,cb,data){
data = data || {};
var str = "";
for(var i in data){
str += `${i}=${data[i]}&`;
}
var script = document.createElement("script");
script.src = url + "?" + str;
document.body.appendChild(script);
window.fn = function(res){
console.log(res)
}
}
</script>
</html>
jsonp2
<?php
$u = @$_REQUEST["user"];
$data = "hello ".$u;
echo "fn('".$data."')";
?>
html3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
<script>
document.onclick = function(){
var url = "http://127.0.0.1/jsonp/data/jsonp3.php"
jsonp(url,function(res){
alert(res)
},{
pass:"root",
// 5.用来保存，后台接收的回调函数名所在的字段名
// 为了给自己封装的函数传参，放置多次修改封装好的函数
columnName:"cb",
// 6.根据后台要接受的字段名,发送回调函数名,回调函数名，已经无所谓了，随机都行
cb:"sdfsdfsdf"
})
}
function jsonp(url,success,data){
// 1.处理默认参数
data = data || {};
// 2.解析数据
var str = "";
for(var i in data){
str += `${i}=${data[i]}&`;
}
// 3.创建script标签，设置src，准备开启jsonp
var script = document.createElement("script");
script.src = url + "?" + str;
document.body.appendChild(script);
// 4.定义全局函数
// window.asdasdasd = function(res){
// window["asdasdasd"] = function(res){
// window[data.callback] = function(res){
// window[data["callback"]] = function(res){
window[data[data.columnName]] = function(res){
success(res);
}
}
</script>
</html>
jsonp3
<?php
$u = @$_REQUEST["pass"];
$c = @$_REQUEST["cb"];
$data = "你好 ".$u;
echo $c."('".$data."')";
?>
jsonp封装及使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
<script>
document.onclick = function(){
var url = "http://127.0.0.1/jsonp/data/jsonp3.php"
jsonp(url,function(res){
alert(res)
},{
pass:"root",
// 5.用来保存，后台接收的回调函数名所在的字段名
// 为了给自己封装的函数传参，放置多次修改封装好的函数
columnName:"cb",
// 6.根据后台要接受的字段名,发送回调函数名,回调函数名，已经无所谓了，随机都行
cb:"sdfsdfsdf"
})
}
function jsonp(url,success,data){
// 1.处理默认参数
data = data || {};
// 2.解析数据
var str = "";
for(var i in data){
str += `${i}=${data[i]}&`;
console.log(str)
}
// 3.创建script标签，设置src，准备开启jsonp
var script = document.createElement("script");
script.src = url + "?" + str;
document.body.appendChild(script);
// 4.定义全局函数
// window.asdasdasd = function(res){
// window["asdasdasd"] = function(res){
// window[data.callback] = function(res){
// window[data["callback"]] = function(res){
window[data[data.columnName]] = function(res){
success(res);
}
}
</script>
</html>