梳理ajax

Posted 2022-06-27 jingouli

　　不讨论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，如下也是：

• 0 (未初始化) or (请求还未初始化)
• 1 (正在加载) or (已建立服务器链接)
• 2 (加载成功) or (请求已接受)
• 3 (交互) or (正在处理请求)
• 4 (完成) or (请求已完成并且响应已准备好)

 

三、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);