/**
* XMLHttpRequest
* 在标准浏览器下XMLHttpRequeat对象已经是升级版本,支持更多的特性,可以跨域但是若果想实现跨域请求,还需要后端的配合才可以实现
* XMLHttpRequest:增加了很多功能,他不推荐使用onreadystatechange这个事件来监听,推荐使用onload
* 新增事件(进度事件)
* -upload.onprogress上传
* -FormData对象
* -ev.total(发送总量)、ev.loaded(已发送的总量)
* -onprogress:下载
* XMomainRequest:IE如果想实现跨域请求,则需要使用另外一个对象来实现
*/
// 标准
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechage = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
alert(xhr.responseText);
}
}
}
}
// 后端配合
//1、允许单个域名访问
指定某域名(http://a.com)跨域访问,则只需在http://server.web.com/server.php文件头部添加如下代码:
header('Access-Control-Allow-Origin:http://a.com');
//2、允许多个域名访问
指定多个域名(http://client1.web.com、http://client2.web.com等)跨域访问,则只需在http://server.web.com/server.php文件头部添加如下代码:
$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';
$allow_origin = array(
'http://client1.web.com',
'http://client2.web.com'
);
if(in_array($origin, $allow_origin)){
header('Access-Control-Allow-Origin:'.$origin);
}
//3、允许所有域名访问
允许所有域名访问则只需在http://server.web.com/server.php文件头部添加如下代码:
header('Access-Control-Allow-Origin:*');
// ie
var oXDomainRequest = new XDomainRequest();
oXDomainRequest.onload = function(){
alert(this.responseText);
}
oXDomainRequest.open('get','http://xxx.com');
oXDomainRequest.send();
html5 新特性ajax跨域的问题和处理
最新推荐文章于 2022-11-15 14:04:47 发布