JavaScript中的 JSON 和 JSONP
2019-08-14 10:19:24来源:博客园 阅读 ()
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文件
<?php header("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); }
更多的JSON描述
原文链接:https://www.cnblogs.com/jc2182/p/11249854.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:vscode配置eslint
下一篇:移动端点击按钮复制文本内容
- javascript面向对象入门基础详细介绍 2020-03-29
- JavaScript函数表达式详解及实例 2020-03-25
- 如何用javascript连接access数据库 2020-03-20
- js中去掉字串左右空格 2020-03-20
- Javascript中的经典技巧 2020-03-20
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash