jsonp的实现原理

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" >
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <head>
     <title>jsonp测试例子</title>
     <script type="text/javascript" src="http://www.yzswyl.cn/js/jquery.min.js"></script>
     <script type="text/javascript">
     function CallJSONPServer(url){                                 // 调用JSONP服务器,url为请求服务器地址    
        var oldScript =document.getElementById(url);       // 如果页面中注册了调用的服务器,则重新调用
        if(oldScript){
        oldScript.setAttribute("src",url);
        return;
        }
        var script =document.createElement("script");       // 如果未注册该服务器,则注册并请求之
        script.setAttribute("type", "text/javascript");
        script.setAttribute("src",url);
        script.setAttribute("id", url);
        document.body.appendChild(script);
    }
 
    function OnJSONPServerResponse(data){
        var $ul = $("<ul></ul>");
        $.each(data,function(i,v){
            $("<li/>").text(v["id"] + " " + v["name"]).appendTo($ul)
        });
        $("#remote").append($ul);
    }
     </script>
     </head>
  <body>
  <input type="button" value="点击获取远程数据" onclick="CallJSONPServer('http://www.yzswyl.cn/demos/jsonp_original.php')" />
  <div id="remote"></div> 
  </body>
 </html> 
原文地址:https://www.cnblogs.com/jenqz/p/2849582.html