简单地使用json并不能支持跨域资源请求，为了解决这个问题，需要采用jsonp数据交互协议。众所周知，js文件的调用不受跨域与否的限制，因此如果想通过纯web端跨域访问数据，只能在远程服务器上设法将json数据封装进js格式的文件中，供客户端调用和进一步处理，这就是jsonp协议的原理。 JSON 和 JSONP JSONP是一种发送JSON数据的方法，无需担心跨域问题。JSONP不使用该XMLHttpRequest对象。JSONP使用标签代替。<br>由于跨域策略，从另一个域请求文件可能会导致问题。从另一个域请求外部脚本没有此问题。JSONP使用此优势，并使用脚本标记而不是XMLHttpRequest对象请求文件。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><script src="demo_jsonp.php"></pre><div class="contentsignin">登录后复制</div></div><p style="font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft Yahei", sans-serif; -webkit-font-smoothing: antialiased; margin: 2rem 0px 1rem; padding: 0px; max-width: 100%; color: rgb(61, 70, 77); white-space: normal;"><span style="font-size: 16px;"><strong>服务器文件</strong></span></p><p>服务器上的文件将结果包装在函数调用中：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><?php $myJSON = '{"name":"John", "age":30, "city":"New York"}'; echo "myFunc(".$myJSON.");"; ?></pre><div class="contentsignin">登录后复制</div></div><p>结果返回对名为“myFunc”的函数的调用，并将JSON数据作为参数。确保客户端上存在该功能。</p><p><span style="font-size: 16px;"><strong style="color: rgb(61, 70, 77); font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft Yahei", sans-serif;">JavaScript函数</strong></span></p><p>名为“myFunc”的函数位于客户端，并准备处理JSON数据：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">function myFunc(myObj) { document.getElementById("demo").innerHTML = myObj.name; } xmlhttp.send("x=" + dbParam);</pre><div class="contentsignin">登录后复制</div></div><p style="font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft Yahei", sans-serif; -webkit-font-smoothing: antialiased; margin: 2rem 0px 1rem; padding: 0px; max-width: 100%; color: rgb(61, 70, 77); white-space: normal;"><span style="font-size: 16px;"><strong>创建动态script标记</strong></span></p><p>根据您放置脚本标记的位置，上面的示例将在页面加载时执行“myFunc”函数，这不是很令人满意。只应在需要时创建script标记：<br/>单击按钮时创建并插入<script>标记：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">function clickButton() { var s = document.createElement("script"); s.src = "demo_jsonp.php"; document.body.appendChild(s); }</pre><div class="contentsignin">登录后复制</div></div><p style="font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft Yahei", sans-serif; -webkit-font-smoothing: antialiased; margin: 2rem 0px 1rem; padding: 0px; max-width: 100%; color: rgb(61, 70, 77); white-space: normal;"><span style="font-size: 16px;"><strong>动态JSONP结果</strong></span></p><p>上面的例子仍然是非常静态的。通过将JSON发送到php文件使示例动态化，并让php文件根据获取的信息返回JSON对象。<br/>PHP文件</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><?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).")"; ?></pre><div class="contentsignin">登录后复制</div></div><p><strong>PHP文件解释：</strong><br/>使用PHP函数json_decode()将请求转换为对象 。<br/>访问数据库，并使用请求的数据填充数组。<br/>将数组添加到对象。<br/>使用json_encode()函数将数组转换为JSON 。<br/>在返回对象周围包裹“myFunc()”</p><p style="font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft Yahei", sans-serif; -webkit-font-smoothing: antialiased; margin: 2rem 0px 1rem; padding: 0px; max-width: 100%; color: rgb(61, 70, 77); white-space: normal;"><strong>JavaScript示例:</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">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; }</pre><div class="contentsignin">登录后复制</div></div><p style="font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft Yahei", sans-serif; -webkit-font-smoothing: antialiased; margin: 2rem 0px 1rem; padding: 0px; max-width: 100%; color: rgb(61, 70, 77); white-space: normal;"><span style="font-size: 16px;"><strong>回调函数</strong></span></p><p>当您无法控制服务器文件时，如何让服务器文件调用正确的函数？有时服务器文件提供回调函数作为参数：<br/>php文件将调用您传递的函数作为回调参数：<br/>PHP文件：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><?php $callback = trim($_GET('callback')); $myJSON = '{ "name":"John", "age":30, "city":"New York" }'; echo $callback."(".$myJSON.");"; ?></pre><div class="contentsignin">登录后复制</div></div><p>javascript :</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">function clickButton() { var s = document.createElement("script"); s.src = "jsonp_demo_db.php?callback=myDisplayFunction"; document.body.appendChild(s); }</pre><div class="contentsignin">登录后复制</div></div><p>更多编程相关知识，请访问：<a href="https://www.php.cn/course.html" target="_blank" textvalue="编程入门">编程入门</a>！！</p>
