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> 
  • 相关阅读:
    Asp.Net构架(Http请求处理流程)、(Http Handler 介绍)、(HttpModule 介绍)
    JQuery中的事件(三)
    关于asp.net mvc中的httpModules 与 httpHandler
    jQuery中的CSS(二)
    JQuery选择器(一)
    JavaScript中利用Ajax 实现客户端与服务器端通信(九)
    JavaScriptDom操作与高级应用(八)
    oracle(二)V$lock 视图中ID1 , ID2 列的含义
    关于static、内部类
    oracle(一)复习起航
  • 原文地址:https://www.cnblogs.com/jenqz/p/2849582.html
Copyright © 2011-2022 走看看