关于Ajax跨域请求

Posted 2021-01-04 mxblog1994

什么是跨域？

域名地址组成：

http:// www . google : 8080 / script/jquery.js

　　　　  http://              （协议号）

                www                （子域名）

                google             （主域名）

                8080                （端口号）

                script/jquery.js （请求的地址）

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

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

跨域解决办法？

1.代理

这种方式是通过后台(ASP、php、JAVA、ASP.NET)获取其他域名下的内容，然后再把获得内容返回到前端，这样因为在同一个域名下，所以就不会出现跨域的问题。

实现代码：创建一个AJAX请求（页面地址为：http://localhost/ajax/proxy.html）

    var request = null;
    if(window.XMLHttpRequest){
        request = new XMLHttpRequest;
    }else{
        request = new ActiveXObject("Microsoft.XMLHttp");
    }
    request.onreadystatechange = function{
        console.log(this.readyState);
        if(this.readyState===4 && this.status===200){
 var resultObj = eval("("+this.responseText+")");    //将返回的文本数据转换JSON对象
 document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex;    //将返回的内容显示在页面中
        }
    }
    request.open("POST","proxy.php",true);
    request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    request.send("name=吕铭印&sex=男");

创建AJAX请求。

proxy.php代码

header("Content-type:text/html;charset=utf-8");
$url = "http://localhost:63342/ajax/proxy.js";
$contents = file_get_contents($url);
echo $contents;

使用php代码获取localhost:63342下的proxy.js文件。

proxy.js代码

proxy.html运行结果

至此，使用代理实现了访问不同域之间的文件。

首先在proxy.html使用AJAX访问后台的proxy.php文件，然后proxy.php接收到请求之后去访问localhost:63342中的proxy.js文件，获取到proxy.js的内容后，将内容返回到前端页面，这就实现了跨域的功能。

如果要访问多个跨域文件，可以以参数的形式告诉后台proxy.php文件要访问的文件的地址。

2.jsonp+使用SRC属性

实现步骤：　　　

　　　　1、原有src属性的标签子带跨域功能；所以可以使用script标签的src属性请求后台数据

 　　　　　　 <script src="http://127.0.0.1/json.php">< /script>

  　　　  2、用于src在加载数据成功后，会直接将加载的内容放到script标签中；

　　　　　　   所以，后台直接返回JSON字符串将不能在script标签中解析。

  　　　　　　 因此，后台应该返回给前台一个回调函数名，并将JSON字符串作为参数传入。

  　　　　　　　　后台PHP文件中返回： echo "callback({$json})";

  　　     3、前台接收到返回的回调函数，将直接在script标签中调用。因此，需要声明这样一个回调函数，作为请求成功的回调

js代码：

 

php代码：

结果：

3.JQuery的Ajax实现jsonp

实现步骤：

       1、在ajax请求时，设置dataType为"jsonp"；

       2、后台返回时，依然需要返回回调函数名，但是，ajax在发送请求时，会默认使用get请求将回调函数名发给后台，

  　　　　 后台$_GET[‘callback‘] 取出函数名：

   　　　　　　---   echo "{$_GET[‘callback‘]}({$str})";

       3、后台返回以后，前台就可以使用ajax的success函数作为成功的回调

 　　　　　　  ---    success : function(data){}

js代码：

php文件：

结果：

4."XHR2"(XMLHttpRequest Level 2)

“XHR2” 全称 “XMLHttpRequest Level2” 是HTML5提供的方法，对跨域访问提供了很好的支持，并且还有一些新的功能。

* IE10一下的版本都不支持

* 只需要在服务器端头部加上下面两句代码：

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

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

总结：

代理实现最麻烦，但使用最广泛，任何支持AJAX的浏览器都可以使用这种方式。

JSONP相对简单，但只支持GET方式调用。

XHR2最简单，但只支持HTML5，如果你是移动端开发，可以选择使用XHR2。