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解决方案。在服务器上进行少量修改，在服务器返回的头部信息里面，添加一个header。

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

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

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

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

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>H5course-HTML5学堂</title>
<link rel="stylesheet" href="css/reset.css">
</head>
<body>
<div class="wrap"></div>
<script>
var newScript = document.createElement("script");
newScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=HTML5学堂&cb=update";
document.body.appendChild(newScript);
// 回调函数
function update(data) {
console.log(data);
}
</script>
</body>
</html>