博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript中的 JSON 和 JSONP
阅读量:4313 次
发布时间:2019-06-06

本文共 1669 字,大约阅读时间需要 5 分钟。

JSON 和 JSONP

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

由于跨域策略,从另一个域请求文件可能会导致问题。从另一个域请求外部脚本没有此问题。JSONP使用此优势,并使用脚本标记而不是XMLHttpRequest对象请求文件。

服务器文件

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

 

结果返回对名为“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文件

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文件:

 

javascript :

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

 

转载于:https://www.cnblogs.com/jc2182/p/11249854.html

你可能感兴趣的文章
Linux下获取本机IP地址的代码
查看>>
(C#)调用Webservice,提示远程服务器返回错误(500)内部服务器错误
查看>>
flex布局
查看>>
python-----python的文件操作
查看>>
java Graphics2d消除锯齿,使字体平滑显示
查看>>
控件中添加的成员变量value和control的区别
查看>>
Spring Boot Docker 实战
查看>>
Div Vertical Menu ver3
查看>>
Git简明操作
查看>>
InnoDB为什么要使用auto_Increment
查看>>
课堂练习之买书打折最便宜
查看>>
定义函数
查看>>
网络虚拟化技术(二): TUN/TAP MACVLAN MACVTAP
查看>>
MQTT协议笔记之mqtt.io项目HTTP协议支持
查看>>
(转)jQuery中append(),prepend()与after(),before()的区别
查看>>
Tecplot: Legend和图像中 Dashed/Dash dot/Long dash 等虚线显示没有区别的问题
查看>>
win8 开发之旅(2) --连连看游戏开发 项目错误的总结
查看>>
视频转换工具ffmpeg
查看>>
一、 object c -基础学习第一天 如何定义一个类
查看>>
C#调用C++编译的DLL详解
查看>>