Ajax实现跨域的三种方法

一、什么是跨域？

给出一个域名地址：http://www.google:8080/script/jquery.js

一个域名是由http://（协议号）、

                    www（子域名）、

                    google（主域名）、

                    8080（端口号）、

                    script/jquery.js（请求地址）组成

当协议、子域名、主域名、端口号中任意一各不相同时，都算不同的“域”。

不同的域之间相互请求资源时，就叫“跨域”。

比如：http://www.abc.com/index.html 请求 http://www.def.com/sever.php

二、处理跨域的第一种方法----代理

比如在北京和上海都有一台服务器，北京的后端直接访问上海的服务器进行数据获取，北京的前端只需要对北京的服务器进行数据请求即可返回数据；他属于后台的技术

2、实现跨域的第二种方法-----JSONP

假设在http://www.aaa.com/index.php这个页面中向http://www.bbb.com/getinfo.php提交GET请求，那么我们在www.aaa.com页面中添加如下代码：

?

1 2 3 4 5 6 7

var eleScript= document.createElement( "script" ); //创建一个script元素   eleScript.type = "text/javascript" ; //声明类型、   eleScript.src = "http://www.bbb.com/getinfo.php" ; //添加src属性 引入跨域访问的url   document.getElementsByTagName( "HEAD" )[0].appendChild(eleScript); //在页面中添加新创建的script元素

当GET请求从http://www.bbb.com/getinfo.php返回时，可以返回一段JavaScript代码，这段代码会自动执行，可以用来负责调用http://www.aaa.com/index.php页面中的一个callback函数。看下面一个列子：

在www.aaa.com页面中：

?

1 2 3 4 5 6 7 8 9 10 11

<script>   　　 function jsonp( json ){   　　　　document.write( json.name ); //输出周星驰   }   <script>   <script src= "http://www.bbb.com/getinfo.php" ></script>

在www.bbb.com页面中：

　　jsonp({ "name":"周星驰","age":45 });

也就是在www.aaa.com页面中声明，在www.bbb.com页面中调用。但是JSONP只支持 “GET” 请求，但不支持 “POST” 请求。

JSONP的实现原理就是动态生成js文件，然后嵌入到html中进行渲染，从而实现跨域

但目前JSONP只支持get请求而不支持post请求；

在jquery中，将jsonp归入了ajax格式，而在本质上他们两个是不同的东西；ajax的核心是

通过XMLHttpRequest获取非本页内容，而jsonp的核心是动态添加。

3、实现跨域的第三种方法-----XHR2

“XHR2"全称“XMLHttpRequest Level2”,是HTML5提供的方法

IE10以下的版本都不支持

只需要在服务器端头部加上

header("Access-Contorl-Allow-Origin:*");

header("Access-Control-Allow-Methods:POST,GET");

两句代码。

• response.setHeader( "Access-Control-Allow-Origin:*" );
• response.setHeader( "Access-Control-Allow-Methods:POST,GET" );

源文档参考自：http://www.jb51.net/article/68424.htm