请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

模板之家 首页 教程频道 查看内容

详解JS中的JSON和JSONP

模板之家 2020-10-23 19:08

分享至 : QQ空间
收藏

JSONP是一种发送JSON数据的方法,无需担心跨域问题。JSONP不使用该XMLHttpRequest对象。JSONP使用script标签代替。

简单地使用json并不能支持跨域资源请求,为了解决这个问题,需要采用jsonp数据交互协议。众所周知,js文件的调用不受跨域与否的限制,因此如果想通过纯web端跨域访问数据,只能在远程服务器上设法将json数据封装进js格式的文件中,供客户端调用和进一步处理,这就是jsonp协议的原理。

JSON 和 JSONP

JSONP是一种发送JSON数据的方法,无需担心跨域问题。JSONP不使用该XMLHttpRequest对象。JSONP使用<script>标签代替。
由于跨域策略,从另一个域请求文件可能会导致问题。从另一个域请求外部脚本没有此问题。JSONP使用此优势,并使用脚本标记而不是XMLHttpRequest对象请求文件。

<script src="demo_jsonp.php">

服务器文件

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

<?php
$myJSON = '{"name":"John", "age":30, "city":"New York"}';
echo "myFunc(".$myJSON.");";
?>

结果返回对名为“myFunc”的函数的调用,并将JSON数据作为参数。确保客户端上存在该功能。

JavaScript函数

名为“myFunc”的函数位于客户端,并准备处理JSON数据:

function myFunc(myObj) {
  document.getElementById("demo").innerHTML = myObj.name;
}
xmlhttp.send("x=" + dbParam);

创建动态script标记

根据您放置脚本标记的位置,上面的示例将在页面加载时执行“myFunc”函数,这不是很令人满意。只应在需要时创建script标记:
单击按钮时创建并插入<script>标记:

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

动态JSONP结果

上面的例子仍然是非常静态的。通过将JSON发送到php文件使示例动态化,并让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_encode()函数将数组转换为JSON 。
在返回对象周围包裹“myFunc()”

JavaScript示例:

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 + "
";
  }
  document.getElementById("demo").innerHTML = txt;
}

回调函数

当您无法控制服务器文件时,如何让服务器文件调用正确的函数?有时服务器文件提供回调函数作为参数:
php文件将调用您传递的函数作为回调参数:
PHP文件:

<?php
$callback = trim($_GET('callback'));
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
echo $callback."(".$myJSON.");";
?>

javascript :

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

更多编程相关知识,请访问:编程入门!!

以上就是详解JS中的JSON和JSONP的详细内容,更多请关注模板之家(www.mb5.com.cn)其它相关文章!


路过

雷人

握手

鲜花

鸡蛋
来自: 网络收集
文章评论0人参与
热门频道
  • ecshop微信小程序代生成服务 可选购小程序
  • 【可选购小程序】ecshop生鲜食品蔬菜水果特
  • 【可选购小程序】ecshop医药品保健药房网站
  • ecshop百货超市日用品网站 免费生成微信小
  • ecshop办公用品文具耗材设备 免费生成微信
  • 【可选购小程序】ecshop家居家纺床上用品源
  • 【可选购小程序】ecshop户外运动体育用品健
  • ecshop整站数据打包 带数据 适合申请支付、
  • ecshop跨境购海淘微信分销商城网站源码模板
  • ecshop服装服饰女装网站商城模板 oss php7
    推荐文章
  • 热门
  • 最新
返回顶部