JSONP 教程

本章节我们将向大家介绍 JSONP 的知识。

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。

同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。

JSONP 应用

1. 服务端 JSONP 格式数据

如客户想访问 : https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction。

假设客户期望返回数据：["customername1","customername2"]。

真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。

服务端文件 jsonp.php 代码为：

jsonp.php 文件代码

<?php

header
(
'
Content-type: application/json
'
)
;
//
获取回调函数名


$jsoncallback
=
htmlspecialchars
(
$_REQUEST

[
'
jsoncallback
'
]
)
;
//
json数据


$json_data
=
'
["customername1","customername2"]
'
;
//
输出jsonp格式的数据


echo

$jsoncallback
.
"
(
"
.
$json_data
.
"
)
"
;
?>

2. 客户端实现 callbackFunction 函数

<
script

type
=
"
text/javascript
"
>
function

callbackFunction
(
result
,
methodName
)

{

var

html
=
'
<ul>
'
;
for
(
var

i
=
0
;
i
<
result
.
length
;
i
++
)

{

html
+=
'
<li>
'
+
result
[
i
]
+
'
</li>
'
;
}

html
+=
'
</ul>
'
;
document
.
getElementById
(
'
divCustomers
'
)
.
innerHTML
=
html
;
}
</
script
>

页面展示

<
div

id
=
"
divCustomers
"
>
</
div
>

客户端页面完整代码

<
!
DOCTYPE

html
>

<
html
>

<
head
>

<
meta

charset
=
"
utf-8
"
>

<
title
>
JSONP 实例
</
title
>

</
head
>

<
body
>

<
div

id
=
"
divCustomers
"
>
</
div
>

<
script

type
=
"
text/javascript
"
>
function

callbackFunction
(
result
,
methodName
)

{

var

html
=
'
<ul>
'
;
for
(
var

i
=
0
;
i
<
result
.
length
;
i
++
)

{

html
+=
'
<li>
'
+
result
[
i
]
+
'
</li>
'
;
}

html
+=
'
</ul>
'
;
document
.
getElementById
(
'
divCustomers
'
)
.
innerHTML
=
html
;
}
</
script
>

<
script

type
=
"
text/javascript
"

src
=
"
https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction
"
>
</
script
>

</
body
>

</
html
>

jQuery 使用 JSONP

以上代码可以使用 jQuery 代码实例：

<
!
DOCTYPE

html
>

<
html
>

<
head
>

<
meta

charset
=
"
utf-8
"
>

<
title
>
JSONP 实例
</
title
>

<
script

src
=
"
https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js
"
>
</
script
>

</
head
>

<
body
>

<
div

id
=
"
divCustomers
"
>
</
div
>

<
script
>
$.
getJSON
(
"
https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?
"
,
function
(
data
)

{

var

html
=
'
<ul>
'
;
for
(
var

i
=
0
;
i
<
data
.
length
;
i
++
)

{

html
+=
'
<li>
'
+
data
[
i
]
+
'
</li>
'
;
}

html
+=
'
</ul>
'
; $
(
'
#divCustomers
'
)
.
html
(
html
)
;
}
)
;
</
script
>

</
body
>

</
html
>