码迷,mamicode.com
首页 > Web开发 > 详细

梳理ajax

时间:2019-08-10 17:01:55      阅读:126      评论:0      收藏:0      [点我收藏+]

标签: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,如下也是:

  • 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

标签:date   head   send   progress   空字符串   无效   led   date()   bsp   

原文地址:https://www.cnblogs.com/jingouli/p/11332145.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!