梳理ajax

Posted jingouli

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了梳理ajax相关的知识,希望对你有一定的参考价值。

  不讨论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); 

 

以上是关于梳理ajax的主要内容,如果未能解决你的问题,请参考以下文章

从零开始学 Web 之 AjaxAjax 概述,快速上手

AJAX

Ajax及跨域

Django的日常-AJAX

jQuery中的Ajax以及请求函数

webpack基础配置梳理梳理