版权声明:内容多为自言自语,请自行判断有无价值。 https://blog.csdn.net/weixin_41702247/article/details/83660524
背景知识:
Http的8种请求类型:
HEAD、GET、POST、OPTION、PUT、DELETE、TRACE、CONNECT
一、常规Ajax
<script>
function loadXMLDoc(){
var xhr;
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xhr=new XMLHttpRequest();
}else{
// IE6, IE5 浏览器执行代码
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange=function(){
if (xhr.readyState==4 && xhr.status==200){
document.getElementById("myDiv").innerHTML=xhr.responseText;
}
}
xhr.open("GET","相对路径",true);
xhr.send();
}
</script>
二、浏览器跨域发送请求
产生跨域的原因:浏览器为保护用户数据安全而采取的同源策略(请求方与被请求方,只要协议、域名、端口不一致则报错)
解决办法:
- 通过cmd禁用浏览器同源策略,实用性不高,不可能每个人都特地设置浏览器再发请求
- Flash插件发送请求,依赖Flash,基本被放弃
- 同源域名下搭建代理服务器转发请求,因为服务器 不受同源策略限制,但需额外开发服务器端(反向代理)
4.JSONP
- 使用绝对路径
- 兼容性好,但只能发送GET请求,且需要服务端配合;
- 通过动态添加script标签,并加入一个callback回调函数,获取到的数据被当作参数传入回调函数;
5.CORS(验证请求类型采取不同方式)
var url = '绝对路径';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('自定义头信息', 'value');
xhr.send();
- 是一个W3C标准,允许浏览器跨域发送请求,需要浏览器和服务器同时支持,其代码与AJAX完全一致;
- 一旦浏览器发现发出的请求是跨域的,就会附加头信息,如果是非简单请求还会附加一次预检请求,因此关键在服务器
- 默认不发送cookie和HTTP认证信息,除非客户端在Ajax请求中设置withCredentials和服务端Access-Control-Allow-Credentials都为true
简单请求的标准:
- 请求方法:GET、POST、HEAD
- HTTP头信息字段:Accept、Accept-Language、ContentType-Language、Last-Event-ID、Content-Type
实现方式:
- 简单请求:浏览器在请求头中添加origin字段,如果返回头中Access-Control-Allow-Origin字段中包含请求地址或是通配符*,则同意请求,同时会在返回头中添加Access-Control相关字段
- 非简单请求:会增加一次HTTP查询请求(OPTION),如果origin在服务端允许的范围内才会正式发送Ajax请求