HTML5学堂-码匠 HTML5学堂

您当前位于:AJAX数据交互 ——> AJAX | 跨域的基本知识、如何解决跨域问题

AJAX | 跨域的基本知识、如何解决跨域问题

2015/05/19 19:04:34 | 作者:HTML5学堂(码匠) | 分类:AJAX数据交互 | 关键词:AJAX,JSONP,域名,跨域

AJAX跨域相关问题

HTML5学堂:AJAX跨域相关问题。在AJAX交互中,实现了网页的异步交互。但是,如果需要向非同域名下发送请求时,涉及到了AJAX跨域。本文主要讲解了跨域的解决方法。

什么是跨域

跨域可以简单的理解为从一个域名访问另一个域名,出于安全考虑,浏览器不允许这么做。如:localhost/XXX和http://www.baidu.com。

跨域分为跨域和跨子域,如mp3.baidu.com和www.baidu.com

跨域解决办法

HTML5-服务器修改配置

最新的为HTML5解决方案。在服务器上进行少量修改,在服务器返回的头部信息里面,添加一个header。

JSONP

JSONP为当下常见的解决方案。它实际上是动态创建一个script标签,将请求的URL设置为这个标签的SRC。而非ajax访问。这种方式需要前端和后端代码都进行相应的修改和实现。不是特别理想。不过目前流行的框架,都封装了JSONP的实现,因此前端无需太大的改动。反而是后台需要多一步实现。

iframe

iframe也是比较常见的一种。通过动态创建iframe标签并访问url。却没有JSONP好使。

服务器代由

服务器代由访问:在A域要访问B域不可以,那就在A域的服务器上再加一个后台接口,由A域的JS AJAX访问A域提供的接口,然后后台再去访问B域,再将得到的数据返回给A域前端。这个方法对前端影响不大,后台会麻烦点。

Flash

FLASH,因为局限性比较大,这里就不一一介绍了

跨域demo实例

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>H5course-HTML5学堂</title>
  6.  <link rel="stylesheet" href="css/reset.css">
  7. </head>
  8. <body>
  9.  <div class="wrap"></div>
  10.  <script>
  11.   var newScript = document.createElement("script");
  12.  
  13.   newScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=HTML5学堂&cb=update";
  14.   document.body.appendChild(newScript);
  15.  
  16.   // 回调函数
  17.   function update(data) {
  18.    console.log(data);
  19.   }
  20.  </script>
  21. </body>
  22. </html>
微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS