版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_39921345/article/details/78786260
//jsonp
原理： 通过
src
属性发出去的请求，是没有跨域限制的，
//jsonp
其实就是利用了这个特性，动态的创建一个
script
标签，通过
script
标签的
src
属性发送请求
//
最终返回回来的数据是一个函数调用
function
jsonp
(
url
,
params
,
callback
){
//1.
先创建一个
script
标签
var
script
=
document
.
createElement
(
"script"
);
//
生成一个随机的唯一的函数名
var
cbName
=
"jsonp"
+
parseInt
(
Math
.
random
()
*
100000000000
+
10000000000
)
+
(
+
new
Date
());
//
以
cbName
作为名字将
callback
存到
window
中去
window
[
cbName
]
=
function
(
data
){
callback
(
data
);
//
删除掉当前
script
标签
document
.
head
.
removeChild
(
script
);
//
删除掉
window
中的
cbName
对应的函数
delete
window
[
cbName
];
};
//2.
做参数处理
// http://xxxx.com/xxx/xx?key=value&key=value
var
paramsStr
=
""
;
for
(
var
k
in
params
){
paramsStr
+=
k
+
"="
+
params
[
k
]
+
"&"
;
}
//3.
将参数和
url
地址进行拼合
url
=
url
+
"?"
+
paramsStr
;
//
将
cbName
通知给后台，让后台指定的调用我们自己已经存好的函数
url
=
url
+
"callback="
+
cbName
;
//4.
给
script
标签设置
src
属性
script
.
src
=
url
;
//5.
将
script
标签加入到页面中
document
.
head
.
appendChild
(
script
);
}
//另一种封装方法
this
.
myJsonp
=
function
(
url
,
data
,
callback
){
var
fnName
=
'myJsonp_'
+ Math
.
random
().
toString
().
replace
(
'.'
,
''
);
window
[
fnName
]
=
callback
;
var
querystring
=
''
;
for
(
var
attr
in
data
){
querystring
+=
attr
+
'='
+
data
[
attr
]
+
'&'
;
}
var
script
=
document
.
createElement
(
'script'
);
script
.
src
=
url
+
'?'
+
querystring
+
'callback='
+
fnName
;
script
.
onload
=
function
(){
document
.
body
.
removeChild
(
script
);
}
document
.
body
.
appendChild
(
script
);
}