window.onload=function(){
var ok=document.getElementById('ok');
ok.addEventListener('click',function(ev){
// console.log(ev)
var xhr=new XMLHttpRequest();
xhr.open('get','https://www.easy-mock.com/mock/594fa9d19adc231f3569cdfc/example/proxy');
// xhr.setRequestHeader("X-HTTP-Method-override",'DELETE')
// 现在虽然发送的是get请求，但是下面我已经把他覆盖为delete请求了。
xhr.timeout=3000;
// 过了这个时间，就自动停止请求，触发timeout事件。
// xhr.responseType='blob';
// 表示服务器传回的是二进制对象。
// 接受
// var blob=new Blob([res.response],{type:'image/png'})
xhr.setRequestHeader('Cache-Control','no-cache');
// 不缓存请求的内容
// 覆盖请求的http方法：很多主流的web技术只支持GET和post，而且不少的防火墙只允许GET和POST请求通过。
xhr.onerror=function(e){
console.log(e);
}
xhr.onload=function(e){
// console.log(e.target.response)
// 为什么错误也是从这个里面给出的，请求地址的错误是服务器给的么？
}
xhr.ontimeout=function(e){
console.log('请求超时！')
}
// 超时
xhr.onprogress=function(e){
console.log(e);
// lengthComputed:可以计算将要返回的数据量true.
// loaded:当前已载入的数据
// total:返回可用的数据总量
if(e.lengthComputable){
var precentComplate=Math.floor((e.loaded/e.total)*100)+'%';
console.log(precentComplate)
}
}
var headers=xhr.getAllResponseHeaders()
// console.log(headers)
// console.log(xhr)
// 新版本的优点：
// 1：增加了请求的时限
// 2：新增了传递表单数据的对象
// 3：接受二进制数据
// var formDate=new FormDate();
// 然后添加信息
// formDate.append('username','name1');
// formDate.append('psd',1231231);
// xhr.send(formDate);
// 和表单发送是一样的。这个还可以发送file文件。
// 上传文件
// 上传进度的显示
// upload=xhr.upload;
// upload.onprocess=function(e){
}
// ======跨域请求
xhr.send();
})
}
1 .xhr是浏览器提供的应用api。这就意味着浏览器会自动帮我们完成所有的底层连接管理，协商管理，http请求格式化。
2 .浏览器根据http的content-type首部来推断适当的数据类型，应用也可以在发起xhr的请求时显示重写数据类型
旧版本写法
xhr.responseType='Blob'
window.onload=function(){
var XHR=null;
if (window.XMLHttpRequest) {
// 非IE内核
XHR = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE内核,这里早期IE的版本写法不同,具体可以查询下
XHR = new ActiveXObject("Microsoft.XMLHTTP");
} else {
XHR = null;
}
if(XHR){
XHR.open("GET", "https://www.easy-mock.com/mock/594fa9d19adc231f3569cdfc/example/proxy");
// XHR.open("GET", "https://www.easy-mock.com/mock/594fa9d19adc231f3569cdfc/example/proxy",true,'adam','secret');
//是否异步发送，发送给服务器的用户名和密码
// XHR.setRequestHeader('Content-Range','365')
XHR.onreadystatechange = function () {
// readyState值说明
// 0,初始化,XHR对象已经创建,还未执行open
// 1,载入,已经调用open方法,但是还没发送请求
// 2,载入完成,请求已经发送完成
// 3,交互,可以接收到部分数据
// status值说明
// 200:成功
// 404:没有发现文件、查询或URl
// 500:服务器产生内部错误
if (XHR.readyState == 4 && XHR.status == 200) {
// 前一个代表请求完成，后一个代表请求成功
// 这里可以对返回的内容做处理
// 一般会返回JSON或XML数据格式
// 返回的内容不会直接在页面上显示出来，必须要用js通过XHRd对象接收。
console.log(XHR);
// 主动释放,JS本身也会回收的
XHR = null;
}
};
XHR.send();
console.log(XHR.getAllResponseHeaders())
//获取所有的响应首部
// 以上是老版本的xml对象。具有以下缺点
// 1：只能传送文本数据，无法读取和上传二进制文件。
// 2：传送和接受数据时，没有进度信息，只能提示有没有完成。
// 3:受到“同域限制”，只能像同一域名的服务器请求数据。
}
}
1 .使用promise封装ajax.
ajax优化
1 .交互的及时性可能比后台传输数据更加重要。
2 .如何处理失败的影响
2 .ajax如何改掉用户后退的习惯，让后推按钮失效。history api。在不刷新的条件下，改变浏览器地址显示的url.
异步交互引擎
1 .在客户端嵌入一个中间件，ajax引擎，专门为客户端与服务端之间进行通信服务，这样即使不刷新页面，浏览器也能通过ajax引擎随时与服务器端通信，这样就不需要刷新数据了。
2 .利用隐藏框架实现异步请求。
3 .用《script》标签作为异步交互的工具。
4 .js请求一个函数并执行。服务端定义这个函数并且返回需要的参数信息。