Javascript跨域请求常用方法总结

时间：2013-07-04 编辑：简简单单来源：一聚教程网

一、window.name

1、服务器返回

代码如下	复制代码

2、定义一个iframe，添加onload事件 <iframe width="650" height="400"></p> <table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy8759')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy8759><script type=”text/<a href="/js_a/js.html" target="_blank">javascript</a>”><br /> var load = false;<br /> function iLoad() {<br /> if(load == false) {<br /> // 同域处理，请求后会再次重新加载iframe<br /> document.getElementById(‘iframe1′).contentWindow.location = ‘/’;<br /> load = true;<br /> } else {<br /> // 获取window.name的内容，注意必须进行同域处理后方可访问！<br /> var data = document.getElementById(‘iframe1′).contentWindow.name;<br /> alert(data); // {“id”:”3″, “name”:”leisure”}<br /> load = false;<br /> }<br /> }<br /> </script></td> </tr> </table> <p>3、定义一个form，设置form的target为iframe的id，然后提交form</p> <table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy6088')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy6088> <p><form action=”url” method=”POST” target=”iframe1″><br /> <button type=”submit” value=”submit” /><br /> </form></p> </td> </tr> </table> <p><strong>二、JSONP</strong></p> <p>服务器返回</p> <table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy1003')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy1003> <p> callback({“id”: “3″, “name”: “leisure”});<br /> <script type=”text/javascript”><br /> function callback(data) {<br /> alert(data);<br /> }<br /> </script><br /> <script type=”text/javascript” src=”http://www.example.com.cn/product.jsp?id=5&jsonp=callback”></script></p> </td> </tr> </table> <p>例</p> <p>PHP页面返回的JSONP格式应该是这样的：</p> <table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy1414')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy1414><?php<br />  echo $_GET["callback"].'<br />  (<br />     {<br />         title: "The Principles of Beautiful Web Design, 2nd Edition",<br />         url: "http://www.sitepoint.com/books/design2/",<br />         author: "Jason Beaird",<br />         publisher: "SitePoint",<br />         price: {<br />             currency: "USD",<br />             amount: 39.95<br />          }<br />  }<br />  );<br />  '<br /> ?><br /> </td> </tr> </table> <p>而静态HTML发起请求的代码可以参考下面：</p> <table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy4649')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy4649> <p><script language="javascript" src="你的网址/zt/access_count/js/<a href="/list-139/" target="_blank">jquery</a>-1.4.2.min.js"></script><br /> <script language="javascript" src="你的网址/zt/access_count/js/jquery.jsonp-2.1.4.min.js"></script><br /> <script type="text/javascript"><br /> $(document).ready(function(){<br />  insert_vote();<br /> })</p> <p>function insert_vote(){<br />  var j = null;<br />  $.ajax({<br />   type:'get',<br />   url:'你的网址/zt/access_count/jsonp.php',<br />   dataType:'jsonp',<br />   jsonp:"callback",<br />   data:{"a":"insert", "type":"aa", "time":"bb", "id":"dd", "allowVote":"cc"},<br />   async: false,<br />   success:function(data){ <br />    j = data; <br />    //alert("1");<br />    alert(j.title);<br />   }<br />  }) <br /> }<br />  <br /> function init(){<br />  $.ajax({<br />     dataType: 'jsonp',<br />     data: 'id=10',<br />     jsonp: 'jsonp_callback',<br />     url: '你的网址/zt/access_count/jsonp.php',<br />     success: function () <br />      {<br />       // do stuff<br />    alert(jsonp.respond);<br />     },<br />  });<br /> }</p> <p>function init2(){<br />  $.ajax({    <br />   async:false,    <br />    url: '你的网址/zt/access_count/jsonp.php',  // 跨域URL   <br />      type: 'GET',    <br />       dataType: 'jsonp',    <br />      jsonp: 'jsoncallback', //默认callback   <br />      data: 'id=10', //请求数据   <br />       timeout: 5000,    <br />      beforeSend: function(){  <br />    //jsonp 方式此方法不被触发。原因可能是dataType如果指定为jsonp的话，就已经不是ajax事件了   <br />       },   <br />      success: function(json) { <br />    //客户端jquery预先定义好的callback函数，成功获取跨域服务器上的json数据后，会动态执行这个callback函数<br />    alert(json.respond.title);    <br />        if(json.actionErrors.length!=0)<br />    {    <br />           alert(json.actionErrors);    <br />          }    <br />   },    <br />   complete: function(XMLHttpRequest, textStatus){    <br />                  <br />   },    <br />   error: function(xhr){    <br />                //jsonp 方式此方法不被触发   <br />                //请求出错处理    <br />    alert("请求出错(请检查相关度网络状况.)");    <br />   }    <br />  });  <br /> }<br /> </script></p> </td> </tr> </table> <p>通用方法：</p> <table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy4679')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy4679> <p> // 初始化数据，同一个cookie一分钟的访问量都算一次<br />  function init_count(pageType, id){<br />   var j = null;<br />   $.ajax({  <br />          type: "get",  //使用get方法访问后台  <br />          dataType: "jsonp", //返回json格式的数据  <br />    jsonp:"callback",<br />          url: "http://app2.zhnews.net/zt/access_count/manage.php", //要访问的后台地址  <br />    data:{"opp":"main", "pageType":pageType, "id":id},<br />    async: false,<br />          success: function(data){  <br />           //alert(data.total);<br />     //$('#pc_1').html(msg.total);<br />     $.each(data, function(i, v){<br />      var tmp = v.record.split(":");<br />      var month_view = tmp[tmp.length - 1];<br />      $("label[id=pc_"+v.page_id+"]").html(v.total);<br />      $("label[id=pcm_"+v.page_id+"]").html(v.week);<br />     }) <br />          }  <br />      })  <br />  }</p> </td> </tr> </table> <p><strong>三、jQuery.getJSON</strong></p> <p>JSON是一个轻量级的数据交换格式。JSON对于JavaScript开发人员充满魅力的原因在于JSON本身就是Javascript中的对象</p> <p>首先我们来定义接口的规范，就像这样：</p> <p>http://你的网址/jsonp/ticker?symbol=IBM&callback=showPrice</p> <p>symbol是请求条件，callback是回调函数名称。</p> <p>在页面文件中，我们使用JQuery的支持：</p> <p>服务器返回 json格式数据 test({“id”: “3″, “name”: “leisure”});</p> <p>test函数名为callback参数中定义</p> <table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy4834')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy4834> <p>$.getJSON(url + “?callback=?”, data, function(data) {<br /> }</p> </td> </tr> </table> <p>例</p> <table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy2182')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy2182> <p>//JQuery JSONP Support  <br /> var url = "http://你的网址/api/suggest.php?symbol=IBM&callback=?";  <br /> jQuery.getJSON(url, function(data){  alert("Symbol:" + data.symbol + ", Price:" + data.price);  });</p> </td> </tr> </table> <p>注意callback=?这个参数必须带上，jquery会自动生成一个函数名替换这个问号！jQuery.getJSON实际上是用了JSONP方式实现。</p> <p><strong>四、<a href="/flash_a/flash.html" target="_blank">flash</a>跨域</strong>服务器添加crossdomain.xml</p> <table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy2795')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy2795> <p>http://www.example.com.cn/crossdomain.xml</p> <p><?xml version=”1.0″?><br /> <cross-domain-policy><br /> <allow-access-from domain=”*.another.com.cn” /><br /> </cross-domain-policy></p> </td> </tr> </table></td> </tr> </table> </div> <div class="pages art-detail"> </div> <ul class="TurnPage"> <li class="TurnPage-left"> <p> <span>上一个：</span> <a href="https://www.111com.net/wy/js-ajax/48473.htm" class="maxWidth">window.close的关闭窗口提示用法详解</a> </p> </li> <li class="TurnPage-right"> <p> <span>下一个：</span> <a href="https://www.111com.net/wy/wordpress/48511.htm" class="maxWidth">WordPress调取指定时间段最热文章/评论</a> </p> </li> </ul> <div class="articles"> <div class="tit02"> <h4>相关文章</h4> </div> <ul> <li> <a target="_blank" href="https://www.111com.net/wy/js-ajax/92358.htm">Javascript中实现iframe跨域通信的例子</a> <span>08-12</span> </li> <li> <a target="_blank" href="https://www.111com.net/wy/js-ajax/76798.htm">总结JavaScript跨域的问题及解决办法</a> <span>01-22</span> </li> <li> <a target="_blank" href="https://www.111com.net/wy/228472.htm">HTML简单购物数量小程序代码展示</a> <span>10-31</span> </li> <li> <a target="_blank" href="https://www.111com.net/wy/228464.htm">html canvas实现弹幕功能</a> <span>10-31</span> </li> <li> <a target="_blank" href="https://www.111com.net/wy/228463.htm">HTML中空格表示的意义</a> <span>10-31</span> </li> <li> <a target="_blank" href="https://www.111com.net/wy/228462.htm">html area标签解读</a> <span>10-31</span> </li> </ul> </div> </div> </div> </div> </div> <div class="hot-column"> <div class="cont"> <div class="tit"> <h4>热门栏目</h4> </div> <ul class="clearfix"> <li> <h6><a href="https://www.111com.net/phper/php.html" target="_blank">php教程</a></h6> <a href="https://www.111com.net/list-45/" target="_blank">php入门</a> <a href="https://www.111com.net/list-46/" target="_blank">php安全</a> <a href="https://www.111com.net/list-47/" target="_blank">php安装</a> <a href="https://www.111com.net/list-48/" target="_blank">php常用代码</a> <a href="https://www.111com.net/list-49/" target="_blank">php高级应用</a> </li> <li> <h6><a href="https://www.111com.net/net/net.html" target="_blank">asp.net教程</a></h6> <a href="https://www.111com.net/list-78/" target="_blank">基础入门</a> <a href="https://www.111com.net/list-79/" target="_blank">.Net开发</a> <a href="https://www.111com.net/list-80/" target="_blank">C语言</a> <a href="https://www.111com.net/list-81/" target="_blank">VB.Net语言</a> <a href="https://www.111com.net/list-82/" target="_blank">WebService</a> </li> <li> <h6><a href="https://www.111com.net/sj/index.html" target="_blank">手机开发</a></h6> <a href="https://www.111com.net/list-208/" target="_blank">安卓教程</a> <a href="https://www.111com.net/list-209/" target="_blank">ios7教程</a> <a href="https://www.111com.net/list-210/" target="_blank">Windows Phone</a> <a href="https://www.111com.net/list-211/" target="_blank">Windows Mobile</a> <a href="https://www.111com.net/list-212/" target="_blank">手机常见问题</a> </li> <li> <h6><a href="https://www.111com.net/cssdiv/css.html" target="_blank">css教程</a></h6> <a href="https://www.111com.net/list-99/" target="_blank">CSS入门</a> <a href="https://www.111com.net/list-100/" target="_blank">常用代码</a> <a href="https://www.111com.net/list-101/" target="_blank">经典案例</a> <a href="https://www.111com.net/list-102/" target="_blank">样式布局</a> <a href="https://www.111com.net/list-103/" target="_blank">高级应用</a> </li> <li> <h6><a href="https://www.111com.net/wy/yw.html" target="_blank">网页制作</a></h6> <a href="https://www.111com.net/list-136/" target="_blank">设计基础</a> <a href="https://www.111com.net/list-137/" target="_blank">Dreamweaver</a> <a href="https://www.111com.net/list-138/" target="_blank">Frontpage</a> <a href="https://www.111com.net/list-139/" target="_blank">js教程</a> <a href="https://www.111com.net/list-140/" target="_blank">XNL/XSLT</a> </li> <li> <h6><a href="https://www.111com.net/office/index.html" target="_blank">办公数码</a></h6> <a href="https://www.111com.net/list-236/" target="_blank">word</a> <a href="https://www.111com.net/list-237/" target="_blank">excel</a> <a href="https://www.111com.net/list-238/" target="_blank">powerpoint</a> <a href="https://www.111com.net/list-239/" target="_blank">金山WPS</a> <a href="https://www.111com.net/list-240/" target="_blank">电脑新手</a> </li> <li> <h6><a href="https://www.111com.net/jsp/jsp.html" target="_blank">jsp教程</a></h6> <a href="https://www.111com.net/list-68/" target="_blank">Application与Applet</a> <a href="https://www.111com.net/list-69/" target="_blank">J2EE/EJB/服务器</a> <a href="https://www.111com.net/list-70/" target="_blank">J2ME开发</a> <a href="https://www.111com.net/list-71/" target="_blank">Java基础</a> <a href="https://www.111com.net/list-72/" target="_blank">Java技巧及代码</a> </li> </ul> </div> </div> <div class="footer"> <div class="cont"> <p> <a href="https://www.111com.net/" target="_self">一聚教程网</a>| <a href="https://www.111com.net/us/us.html" class="about" target="_self">关于我们</a>| <a href="https://www.111com.net/us/me.html" class="contact" target="_self">联系我们</a>| <a href="https://www.111com.net/us/ads.html" class="gg_contact" target="_self">广告合作</a>| <a href="https://www.111com.net/us/link.html" class="friend_link" target="_self">友情链接</a>| <a href="https://www.111com.net/us/bcinfo.html" class="copyright_notice" target="_self">版权声明</a> </p> <p> <span>copyRight@2007-2024 www.111COM.NET AII Right Reserved <a href="https://beian.miit.gov.cn/" target="_blank" class="beian">苏ICP备17065847号-2</a> </span> </p> <p> <span> 网站内容来自网络整理或网友投稿如有侵权行为请邮件:yijucomnet@163.com 我们24小时内处理 </span> </p> </div> </div> <script src="https://assets.111com.net/js/stat.js?v=2024022101"></script> <script src="https://api.111com.net/api/stat/hits?type=article&id=48475"></script> </body> </html>

推荐专题

最新下载

热门教程

Javascript跨域请求常用方法总结