标签：date head send progress 空字符串 无效 led date() bsp
不讨论IE
什么是ajax：ajax是异步到javascript和XML。简单点说，就是使用 XMLHttpRequest 对象与服务器通信。主要使用其两个特性做以下事：
1.在不重载页面到情况下发送请求，
2.接受并使用从服务器发来到数据。
一、怎样发送http请求：
1.先要创建一个XMLHttpRequest实例：
var httpRequest=new XMLHttpRequest();
2.请求发送后，会收到响应，这时要告诉XMLHttp请求对象是由哪一个函数进行处理，在设置了对象的 onreadystatechange 属性后给它命名，即当请求状态改变时调用
httpRequest.onreadystatechange=func; // 或使用匿名函数 httpRequest.onreadystatechange=function(){/* something */};
3.声明接到响应后要做的事，需要发送一个实际的请求，调用http的open()和send()方法
httpRequest.open(‘GET‘, ‘test.txt‘,true); httpRequest.send(); /* *open() 的第一个参数是请求方法，有GET,POST,HEAD和其他服务器支持的方法； *第二个参数是URL ； *第三个参数是可选，设置请求是否是异步，默认为true */
二、处理服务器响应
1.在发送请求时，你提供的函数负责处理响应
httpRequest.onreadystatechange = func;
首先要检查请求的状态，如果状态是 XMLHttpRequest.DONE （对应数字4），意味着服务器响应收到了并且是没问题的，然后就可以继续执行。
if (httpRequest.readyState === XMLHttpRequest.DONE) { // Everything is good, the response was received. } else { // Not ready yet. }
全部readyState状态值都在 XMLHTTPRequest.readyState，如下也是：
三、responseType 属性
XMLHttpRequest.responseType 属性是一个枚举类型的属性，返回响应数据的类型。它允许我们手动的设置返回数据的类型。如果我们将它设置为一个空字符串，它将使用默认的"text"类型。
| 值 | 数据类型 |
| ‘’ | DOMString (这个是默认类型) |
| arraybuffer | ArrayBuffer对象 （用于处理二进制数据） |
| blob | Blob对象 （二进制大数据对象） |
| document | document对象 （responseXML，也就是可以解析为XML的数据） |
| json | JS 对象 ， 解析得到的从服务器返回来的JSON字符串 |
| text | DOMString(等同于js中的字符串) |
四、监测进度
var req = new XMLHttpRequest(); req.addEventListener("progress", updateProgress, false); // 进度 req.addEventListener("load", transferComplete, false); // 完成 req.addEventListener("error", transferFailed, false); // 出错 req.addEventListener("abort", transferCanceled, false); // 取消 req.open();
注意：需要在open()之前监听。
上传相关监测事件：
var req = new XMLHttpRequest(); req.upload.addEventListener("progress", updateProgress); req.upload.addEventListener("load", transferComplete); req.upload.addEventListener("error", transferFailed); req.upload.addEventListener("abort", transferCanceled); req.open();
注意：progress 事件在使用 file: 协议的情况下是无效的
使用 loadend 事件可以侦测到所有的三种加载结束条件（abort、load、error）：
req.addEventListener("loadend", loadEnd, false);
function loadEnd(evt) {
alert("The transfer finished (although we don‘t know if it succeeded or not).");
}
五、绕过缓存
一般地，如果缓存中有相应内容， XMLHttpRequest 会试图从缓存中读取内容
方法：给url添加时间戳
http://foo.com/bar.html?12345 http://foo.com/bar.html?foobar=baz&12345 var req = new XMLHttpRequest(); req.open("GET", url += ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), false); req.send(null);
标签：date head send progress 空字符串 无效 led date() bsp
原文地址：https://www.cnblogs.com/jingouli/p/11332145.html
