xhr.onreadystatechange=function(){} 在open之前调用
xhr.open('get',url, boolean(是否异步请求))
此时可以设置http头部(例如cookie),用setRequestHeader(key,value)
GET:xhr.send(null) POST:xhr.send(new FormData(form))
xhr.status 状态码>200&&<300接受成功
xhr.readystate:
0.未初始化,还没有调用open()
1.启动,调用open()
2.发送,调用send()
3.接收,正在接收数据
4.接收完成。
Cookie补充:
cookie每次随HTTP请求一起发送.
可以在js中设置document.cookie="key=value",每次设置一个。键值对都要使用encodeURIComponent() 来编码
http-only设置为true后,只能通过http访问,不能通过document.cookie获取,防止XSS获取cookie
CORS(Cross-Origin Resource Sharing ) 支持所有HTTP请求
实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信
浏览器将CORS请求分为简单请求和非简单请求。
简单请求:(1)请求方法是三种之一:get,post,head (2)http头部信息不能超过以下几种字段:Accept,Accept-Language,
Content-Language, Last-event-ID,Content-Type:只限于三个值application/x-www-form-urlencoded
、multipart/form-data
、text/plain
其他都是非简单请求
如果浏览器发现这个请求是简单请求,就自动在头部信息中添加origin字段,说明本次请求来自哪个源(协议+域名+端口),服务器根据这个值来决定是否同意这个请求。如果响应的http头部没有Access-Control-Allow-Origin字段,说明出错。如果Orign指定的源在许可范围内,则在响应头部中会多出字段:
1.Access-control-allow-origin
该字段必须.值要么是请求时Origin字段的值,要么是*表示接受任意域名
2.Access-control-allow-credential
可选。是否允许发送cookie
3.Access-control-expose-headers
如果是非简单请求,浏览器会先发送一个“预检”请求(包括origin),要求服务器确认可以这样请求,包括两个特殊字段:
1.Access-control-request-method
表示HTTP方法
2.Access-control-request-headers
表示额外的头部信息字段
如果服务器同意请求,则返回
Access-control-allow-origin字段,否则没有任何CORS相关的头信息字段
其他返回字段有
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000
一旦通过预检请求,以后每次浏览器正常的CORS请求,都跟简单请求一样,会有Origin字段
JSONP 只支持get请求,优势在于支持老式浏览器,但是如果其他域有恶意代码,就会不安全
利用了script标签没用同源限制
在客户端动态创建script,并在src属性中设置好url喝callback函数,并创建好callback函数,如function(data){}.
在服务端返回的是callback(data)