代码学堂(uxuew.cn)提供付费解决PHP WEB开发等技术服务,如果需要请 点击加我QQ:1662935793.
>web前端 > ajax技巧 > ajax跨域请求问题解决方案之iframe应用

ajax跨域请求问题解决方案之iframe应用

ajax技巧 围观4816次 更新日期:2017-07-18 12:37:29 留下足迹

什么是跨域?

简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果。

方案:在服务器端创建一个静态的代理页面,在客户端用iframe调用这个代理,然后通过iframe的document.getElementById("proxy").contentWindow对象来请求ajax。

服务器端的代理页面:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>Ajax跨域</title> 
  6. <script src="js/jquery-1.6.4.min.js" type="text/javascript"></script> 
  7. <script type="text/javascript"> 
  8. document.domain = 'xxx.com'
  9. </script> 
  10. </head> 
  11. <body> 
  12. </body> 
  13. </html> 
  14.  
  15. 客户端ajax的调用代码示例: 
  16. 代码如下: 
  17.  
  18. <iframe src="http://weixin.goumin.com/proxy.html" id="proxy" style="display:none;" onload="loadDefaultData();"></iframe> 
  19. <script type="text/javascript"> 
  20. document.domain = "xxx.com"
  21. function loadDefaultData(){ 
  22. var iframe_jquery = document.getElementById("proxy").contentWindow.$; 
  23. iframe_jquery.ajax({ 
  24. type: "POST", 
  25. url:""+Math.random(), 
  26. data:{}, 
  27. async:false, 
  28. dataType:'json', 
  29. success:function(data){ 
  30. alert(data); 
  31. }); 
  32. </script> 
  33.  
  34. url:""+Math.random(), 

请注意加红的url这行,用一个随机函数来解决浏览器缓存的问题。让每一次请求的url不一样。

转载请注明:代码学堂>web前端 > ajax技巧 > ajax跨域请求问题解决方案之iframe应用

喜欢 (138) or 分享 (363)