http的基础请求和响应架构非常简单且易于使用,但是在实践中会伴随着各种复杂问题:
1,客户端和服务器交换cookie
2,服务器重定向浏览器到其他服务器
3,缓存某些资源而剩下的不缓存
4,某些客户端通过代理服务器发送所有的请求等
xml不是协议级的http api 而是浏览器级的api
浏览器需要考虑cookie,重定向,缓存和代理,但是代码只需要担心请求和响应
一,指定请求
创建xmlhttprequesd对象之后,下一步调用对象的open()方法去指定这个请求的两个必须部分:方法和url;
request.open("get","data.csv")
第一个参数不区分大小写,但是通常大家使用大写字母来匹配http协议
get、post方法是得到广泛支持的
post方法常用于html表单,在请求主体中包含额外的数据(表单数据)且这些数据通常存储到服务器上的数据库中。相同url的重复post请求可能从服务器得到得响应可能不同,同同时不应该缓存使用这个方法的请求。
如果有请求头的话,post请求需要设置request.setrequestheader("content-type","text/plain")
不能自己指定content-length,date,referer,user-agent头,xmlhttprequest将自动添加这些头而防止伪造他们
如果请求一个受密码保护的url,把用户名和密码作为第4个和第5个参数传递给open(),xmlhttprequest会设置合适的头
请求主体:get请求绝对没有请求主体,post请求有,同时应该设置setrequestheader()指定的content-type头
顺序问题:调用xmlhttprequest方法的顺序必须必须匹配http请求的架构,否则将抛出异常
二,指定主体
1.表单编码的请求
2.json.stringfy()编码请求主体
3.xml编码的请求
4.上传文件
5.multipart/form-data多请求主体
三,http进度事件
调用send时——触发loadstart()事件
正在加载——触发progress事件
加载完成——触发load()事件
一个请求完成不一定是成功的请求,load事件应该检查xmlhttprequest对象的status状态码
请求无法完成对应3种情况:1,请求超时——timeout事件
2,请求中止——abort事件
3,太多重定向等网络错误阻止请求完成——error事件
对于任何具体请求,浏览器只会处理load/abort/timeout/error中的一个
一旦这些事件中的一个被触发后浏览器将触发loadend事件
上传进度事件
xhr2给出用于监控http请求上传的事件,xmlhttprequest对象有upload属性,upload属性值是一个对象,它定义了addeventlistener()方法和整个progress事件集合,比如onprogress和onload
中止请求和超时
可以通过调用xmlhttprequest对象的abort()方法来取消正在进行的http请求,调用abor()方法在这个对象上触发abort事件
调用abort的主要原因是:完成取消或者超时请求消耗的时间太长或者响应变得无关时。
假设使用xmlhttprequest为文本输入域请求自动完成推荐,如果用户在服务器的建议达到之前输入了新字符,这时等待请求不再有趣,应该中止
跨域http请求
同源策略不允许xmlhttprequest进行跨域请求
xhr2允许在http响应中发送合适的cors允许跨域访问网站,那么同源策略不放宽就会正常工作
给xmlhttprequest的open()方法传入用户名和密码,他们绝对不会通过跨域请求发送,跨域请求通常也不会包含其他任何的用户证书:cookie和http身份验证令牌(token)通常不会作为请求的内容部分发送且任何作为跨域响应来接受的cookie都会被丢弃
如果需要,必须设置xmlhttprequest的withcredentials为true
借助script标签发送http请求:jsonp
好处:1,不受同源策略的影响
2,包含json编码数据的响应体会自动解码
脚本和安全性:使用该技术意味着必须web页面可以执行远程服务器发送过来的任何js代码,意味着对于不可信的服务器,不能采取该技术