jsonp基础原理

• jsonP实现的效果和ajax非常类似，但jsonP并不是ajax的一部分。
• jsonP主要用于解决跨站数据请求，它的基本原理是：利用了script标签无跨域限制，这一特点来实现的。
• jsonP的英文是json padding 意思是将内容嵌入到script中，实现跨站的请求。

本次实例，将getData.php放在两个不同的域名下，从而实现跨域的演示。本实例需要用到的本地服务器环境是XAMPP，因为php文件必须在服务器环境运行。

getData.php 文件的代码：

<?php
$t = isset($_GET['t']) ? $_GET['t'] : 'num';
$callback = isset($_GET['callback']) ? $_GET['callback'] : 'fn1';

$arr1 = array('111111','22222222','33333333','4444444','555555555555555555555');
$arr2 = array('aaaaaaaaaaaa','bbbbbbbb','cccccccccccc','ddddddddd','eeeeeeeeeeee');

if ($t == 'num') {
    $data = json_encode($arr1);
} else {
    $data = json_encode($arr2);
}

echo $callback.'('.$data.');';

html代码：

<p>jsonp跨域加载的基本用法，getdata.php不在当前域下</p>

<input type="button" id="btn1" value="无参加载数字(getData.php)">

<ul id="ul1"></ul>

<input type="button" id="btn2" value="有参加载字母（getData.php?callback=fn2&t=str）">

<ul id="ul2"></ul>

<input type="button" id="btn3" value="有参加载数字(getData.php?callback=fn3&t=num)">

<ul id="ul3"></ul>

css代码：

暂无..

javascript代码：

<script>
        function fn1(data) {
            var oUl1 = document.getElementById('ul1');
            var html='';
            for(var i=0;i<data.length;i++){
                html += "<li>"+data[i]+"</li>";
            }
            oUl1.innerHTML = html;
        }

        function fn2(data) {
            var oUl2 = document.getElementById('ul2');
            var html='';
            for(var i=0;i<data.length;i++){
                html += '<li>'+data[i]+'</li>';
            }
            oUl2.innerHTML = html;
        }

        function fn3(data) {
            var oUl3 = document.getElementById('ul3');
            var html ='';
            for (var i=0;i<data.length;i++){
                html += '<li>'+data[i]+'</li>';
            }
            oUl3.innerHTML = html;
        }

        window.onload = function () {
            var oBtn1 = document.getElementById('btn1');
            oBtn1.onclick = function () {
                var oScript = document.createElement('script');
                oScript.src = '../jsonPBaidu/getData.php';
                document.body.appendChild(oScript);
            }

            var oBtn2 = document.getElementById('btn2');
            oBtn2.onclick = function () {
                var oScript = document.createElement('script');
                oScript.src = '../jsonPBaidu/getData.php?callback=fn2&t=str';
                document.body.appendChild(oScript);
            }

            var oBtn3 = document.getElementById('btn3');
            oBtn3.onclick = function () {
                var oScript = document.createElement('script');
                oScript.src = '../jsonPBaidu/getData.php?callback=fn3&t=num';
                document.body.appendChild(oScript);
            }

        }
    </script>

效果展示：

初始状态 加载成功状态