芒果团子的博客

ajax总结（三）

字数统计: 978阅读时长: 4 min
2018/10/19 Share

跨域问题，CORS

CORS（跨源资源共享），使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是成功或失败。

  • IE实现CORS
    1
    2
    3
    4
    5
    6
    7
    // ie中使用XDR
    var xdr = new XDomainRequest();
    xdr.onload = function(){
        alert(xdr.responseText);
    }
    xdr.open('get', 'http://www.ajax.com/page');
    xdr.send();

只能访问响应的原始文本，无法确定响应的状态码

1
2
3
4
// 指定一个error处理
xdr.onerror = function(){
    alert('error');
}

xdr支持超时属性及超时事件处理。
对于post请求，使用contentType来表示发送数据的格式。

1
2
3
xdr.open('post', 'http://www.ajax.com/page');
xdr.contentType = 'application/x-www-form-urlencoded';
xdr.send('name=1&value=2');

  • 其他浏览器对CORS的实现

使用标准的xhr对象，在open中传入绝对的url

1
2
3
4
5
6
7
8
9
10
11
12
var xhr = createXHR();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 ){
            alert(xhr.responseText)
        } else {
            alert('unsuccessful' + xhr.status);
        }
    }
}
xhr.open('get', 'http://www.ajax.com/page');
xhr.send(null);
  • 两种对CORS的实现的区别（简单请求）

XDR:

  1. cookie不会随请求发送，不会随响应返回。
  2. 只能设置请求头部信息中的Content-Type。
  3. 不能访问响应头部信息。
  4. 只支持GET和POST。
  5. 请求都是异步执行，不可以用来创建同步请求
  6. open方法只接受两个参数：请求的类型和url

XHR:

  1. 可以访问status和statusText
  2. 支持同步请求
  3. 不可使用setRequestHeader()设置自定义头部。
  4. 不能发送和接收cookie。
  5. 调用getAllResponseHeaders() 总返回空字符串

建议在请求本地资源时，使用相对URL，远程资源使用绝对URL。

  • 跨浏览器的CORS

关于withCredentials：
默认情况下，一般浏览器的CORS跨域请求都是不会发送cookie等认证信息到服务端的，除非指定了xhr.withCredentials = true，但是只有客户端单方面的设置了这个值还不行，服务端也需要同意才可以，所以服务端也需要设置好返回头Access-Control-Allow-Credentials: true；还有一点要注意的，返回头Access-Control-Allow-Origin的值不能为星号，必须是指定的域，否则cookie等认证信息也是发送不了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function createCORSRequest(method,url){
    var xhr = new XMLHttpRequest();
    // 存在withCredentials属性，xhr就支持CORS的最简单方式
    if('withCredentials' in xhr){
        xhr.open(method, url, true);
    } else if(typeof XDomainRequest != 'undefined'){
        vxhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        xhr = null;
    }
    return xhr;
}

var request = createCORSRequest('get', 'http://www.ajax.com/page');
if(request){
    request.onload = function(){
        // 对request.responseText 进行处理
    }
    reques.send();
}

其他跨域技术

  • 图像ping

只能是get请求，无法访问响应文本，且只能用于浏览器与服务器间的单项通信。

1
2
3
4
5
var img = new Image();
img.onload = img.onerror = function(){
    alert('done');
}
img.src = 'http://www.ajax.com/page';
  • JSONP

JSON with padding（参数式JSON），是被包含在函数调用中的JSON。
由两部分组成：回调函数和数据，通过动态的

原文作者：sylvanas

原文链接：https://sylvanase.github.io/2018/10/19/ajax总结（三）/

发表日期：October 19th 2018, 2:03:03 pm

更新日期：March 29th 2018, 11:13:02 am

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 跨域问题，CORS
  2. 2. 其他跨域技术
Total : 14
Invalid date
2018
Invalid date
2018
Invalid date
Invalid date
2018
Invalid date
Invalid date