JSONP

JSON with padding 是json的一种“使用模式”，可以解决跨域问题。
主要还是利用<scrip></scrip>标签可以不受跨域限制的特性。

1. 客户端(HTML)

写一个index.html文件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>
        <span>客户列表</span>
        <div id="customers_list"></div>
    </div>
    <script type="text/javascript"> function callbackFunction(result, methodName) { var html = '<ul>'; for (let i = 0; i < result.length; i++) { html += "<li>" + result[i] + "</li>"; } html += "</ul>"; document.getElementById("customers_list").innerHTML = html; } </script>
    <script type="text/javascript" src="http://localhost/myApplication/demo.php?jsoncallback=callbackFunction"></script>
</body>

</html>

2. 服务端(PHP)

写一个php文件，叫demo.php，放在XAMPP的htdocs文件下，启动Apache，就可以访问http://localhost/myApplication/demo.php

<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["朱鹏基","杜勇","吉启乾"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>

3. 客户端访问

如果Apache服务运行成功，用浏览器打开index.html，应该可以看到界面。

4. 动态加载script

主要是将原先写死的script标签改成动态添加标签

<script type="text/javascript" src="http://localhost/myApplication/demo.php?jsoncallback=callbackFunction"> </script>
<!-- 改成如下形式 -->
    <script> // 动态获取 function getCustomers() { var s = document.createElement("script"); s.type = "text/javascript"; s.src = "http://localhost/myApplication/demo.php?jsoncallback=callbackFunction"; document.body.appendChild(s); } </script>

5. 后记