首页
会员中心
到顶部
到尾部
CSS教程

JSONP

时间:2020/11/2 12:57:58  作者:  来源:  查看:0  评论:0
内容摘要:JSONPJSON HTMLjQuery 选择器JSONP 是一种无需考虑跨域问题即可传送 JSON 数据的方法。JSONP 不使用 XMLHttpRequest 对象。JSONP 使用 <script> 标签取而代之。JSONP 简介JSONP 指的是 JSON w...

JSONP

JSONP 是一种无需考虑跨域问题即可传送 JSON 数据的方法。

JSONP 不使用 XMLHttpRequest 对象。

JSONP 使用 <script> 标签取而代之。

JSONP 简介

JSONP 指的是 JSON with Padding。

从另一个域请求文件会引起问题,由于跨域政策。

从另一个域请求外部脚本没有这个问题。

JSONP 利用了这个优势,并使用 script 标签替代 XMLHttpRequest 对象。

<script src="demo_jsonp.php">

Server 文件

服务器上的文件在函数调用中封装结果:

实例

<?php$myJSON = '{ "name":"Bill Gates", "age":62, "city":"Seattle" }'; echo "myFunc(".$myJSON.");";?>

显示 PHP 文件

结果返回对名为 "myFunc" 的函数的调用,其中的 JSON 数据为参数。

请确保客户端存在该函数。

JavaScript 函数

函数 "myFunc" 位于客户端,用于处理 JSON 数据:

实例

function myFunc(myObj)  {    document.getElementById("demo").innerHTML =  myObj.name;}

亲自试一试

创建动态脚本标签

上例会在页面加载时执行 "myFunc" 函数,根据您放置脚本标签的位置,这样不很令人满意。

Script 只应该在需要时创建:

实例

在按钮被点击时创建和插入 <script> 标签:

function clickButton() {    var s = document.createElement("script");    s.src = "demo_jsonp.php";    document.body.appendChild(s);}

亲自试一试

动态 JSONP 结果

上例仍然是静态的。

可通过向 PHP 文件发送 JSON 来创建动态的例子,然后根据这个 php 文件获得的信息让它返回一个 JSON 对象。

PHP 文件

<?phpheader("Content-Type: application/json; charset=UTF-8");$obj =  json_decode($_GET["x"], false); $conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");$result = $conn->query("SELECT name FROM ".$obj->$table." LIMIT ".$obj->$limit);$outp = array();$outp = $result->fetch_all(MYSQLI_ASSOC);echo "myFunc(".json_encode($outp).")";?>

PHP 文件解释:

  • 把请求转换为对象,使用 PHP 函数 json_decode()
  • 访问数据库,并用被请求的数据填充数组。
  • 向对象添加数组。
  • 使用 json_decode() 函数把该数组转换为 JSON。
  • 用 "myFunc()" 封装返回对象。

JavaScript 实例

将从 php 文件调用 "myFunc" 函数:

function clickButton() {    var obj, s    obj = { "table":"products", "limit":10 };    s =  document.createElement("script");    s.src = "jsonp_demo_db.php?x="  + JSON.stringify(obj);    document.body.appendChild(s); }function myFunc(myObj)  {    var x, txt = "";    for (x in myObj)  {        txt += myObj[x].name + "<br>";     }    document.getElementById("demo").innerHTML = txt;}

亲自试一试

回调函数

如果您无法控制服务器文件,那么如何使服务器文件调用正确的函数呢?

有时服务器文件提供回调函数作为参数:

实例

PHP 文件会调用您作为回调参数传递的函数:

function clickButton() {    var s = document.createElement("script");    s.src = "jsonp_demo_db.php?callback=myDisplayFunction";    document.body.appendChild(s);}

亲自试一试



相关评论
广告联系QQ:45157718 点击这里给我发消息 电话:13516821613 杭州余杭东港路118号雷恩国际科技创新园  网站技术支持:黄菊华互联网工作室 浙ICP备06056032号