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);}