JavaScript中的 JSON 和 JSONP
程序员文章站
2022-03-23 13:33:15
由于跨域策略,从另一个域请求文件可能会导致问题。从另一个域请求外部脚本没有此问题。JSONP使用此优势,并使用脚本标记而不是XMLHttpRequest对象请求文件。 ......
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); }
上一篇: WordPress实现中英文数字之间自动加空格排版
下一篇: js计算得来的属性