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)
来源: http://blog.csdn.net/soskkk12/article/details/79226850