zoukankan      html  css  js  c++  java
  • 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> 
  • 相关阅读:
    Ant Design Vue中TreeSelect详解
    ant-design-vue 表单验证详解
    vue3跟新视图遇见神奇现象
    遇见这样的数型结构图我是这样画的
    Ant Design Vue中Table的选中详解
    2021 年百度之星·程序设计大赛
    2021 年百度之星·程序设计大赛
    2021牛客暑期多校训练营7 H. xay loves count(枚举)
    2021牛客暑期多校训练营6 H. Hopping Rabbit(扫描线)
    P1494 [国家集训队]小Z的袜子(莫队)
  • 原文地址:https://www.cnblogs.com/jenqz/p/2849582.html
Copyright © 2011-2022 走看看