XMLHttpRequest 学习笔记（一）

1、XMLHttpResquest 简介

XMLHttpRequest是一个API,用于客户端和服务器之间传输数据，通 过URL获取数据简单，且不会刷新整个页面，用户发起请求后可做其他事情，不用一直等到服务器响应，具有很好的用户体验而被广泛应用。

 

2、属性和方法

       onreadystatechange

      是function类型，绑定一个函数，当请求状态（readyState）改变时，就会调用它。注意，只能在异步请求中使用。

readyState,一个无符号整数，表示请求状态。

0——UNSENT(未打开)，创建了xhr对象，open()还没调用。

1——opened(未发送)，调用了open()但是还没调用send()。
2——HEADERS_RECEIVED(已接收响应头信息)，send()被调用，响应头和响应状态已返回。
3——LOADING(下载响应中)，响应体下载中,已经从responseText中获得部分数据。
4——DONE(请求完成)，整个请求完成，不是代表请求成功了，请求失败也算完成。

 

response:

只读属性，返回接收到的数据主体，类型可是ArrayBuffer(内存缓冲区？不太理解)、Bold(不太理解)、Documnet(HTML文本或片段、XML)、JSON(JS对象)、text(字符串)，由responseType决定。请求失败或者数据不完整，该属性只为null。

 " "——字符串，默认值。

"document"——Document对象即XML、html文档或html片段。
"json"——JSON对象。
"text"——字符串。
"blod"——Bold对象（不是很明白？？）

var xhr= new XMLHttpResquest();
xhr.open("GET",URL,true);
xhr.responseType="json";

responseType 设置为 json，支持json的浏览器，主流浏览器都支持，会自动调用JSON.parese()方法，将JSON解析为JS对象，就是说 从xhr.response(不是xhr.responseText属性)属性得到的不是文本，是JS对象。

 

 

responseText，

返回的字符串，只读，请求不成功或者数据不完整，该属性为null。如果返回的是JSON格式的数据，就可以调用responseText属性。

var data = xhr.responseText;
data=JSON.parse(data);//解析JSON为JS对象。

 

 

status,

只读属性，HTTP状态码，是一个三位数的整数。

200,ok,响应成功。

301，Moved Permanently,永久移动。
302, Move temporarily，暂时移动
304, Not Modified，未修改
307, Temporary Redirect，暂时重定向
401, Unauthorized，未授权
403, Forbidden，禁止访问
404, Not Found，未发现请求资源
500, Internal Server Error，服务器发生错误

只有 2xx和304表示服务器正常。

if (ajax.readyState == 4) {
  if ( (ajax.status >= 200 && ajax.status < 300)
    || (ajax.status == 304) ) {
    // Handle the response.
  } else {
    // Status error!
  }
}

 

statusText，只读属性，一个字符串，表示服务器的状态，是一个完整信息，如 “200 OK”。

  var xhr = new XMLHttpRequest();
  xhr.ontimeout = function () { //timeout 是 xhr 的一个事件，超时时触发
    console.error("The request for " + url + " timed out.");
  };
  xhr.onload = function() { //load 是 xhr 的一个事件，表示加载
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        callback.apply(xhr, args);
      } else {
        console.error(xhr.statusText);
      }
    }
  };
  xhr.open("GET", url, true);//初始化一个请求
  xhr.timeout = timeout; //设置超时
  xhr.send(null); //发送请求
}

 

 

方法：

abort()——请求发送后，调用该方法中断，在send()之后调用，否则报错。

getAllReponseHeaders()——获取全部响应头信息，响应还没接收，返回null。

getResponseHeader(DOMString header)——返回指定的头信息，不接受或者不存在，返回null。

 

 

open(method,url,[async,uers,password])——初始一个请求，该方法用在js中，本地openRequest()。　　　　

参数：
     method：HTTP方法：GET|POST|PUT|DELETE。不是HTTP(S)的协议，忽略该参数。保持大写，否则有些浏览                   器不识别。
            url:请求服务器的页面。出于安全考虑，必须是相同域名下的页面。
        async:布尔值，表示是否采用异步请求，可选。true为默认值，表示异步。
         uesr：用户名，可选。
  password：密码，可选。

 

overrideMimeType()，

重写服务器返回的MIME type。如强制将响应流当成"text/html"来处理和解析。必须在sned()之前调用。
这个比较麻烦，一般用 responseType属性设置。

var xhr = new XMLHttpRequest();
xhr.onload = function(e) {
  var arraybuffer = xhr.response;
  // ...
}
xhr.open("GET", url);
xhr.responseType = "arraybuffer";
xhr.send();

 

send(): 发送请求，异步请求，立即返回，同步请求，直到响应完全接收后返回。所有相关的事件绑定必须在调用send()方法之前进行.

在POST方法中，向服务器提交的表单数据传入send()中，序列化和转码处理，名值对用&连接，如 "name=jack&age=20"，且在send()调用前，需要设置MIME类型：
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

GET请求中不用参数。send()或者send(null)

 

setRequestHeader()，设置HTTP请求头的信息，必须在open()之后和send()之前。

 

事件：

loadstart：请求开始，loadstart事件被触发。

  属性：

　　arget:事件目标。

　　type：事件类型。

　　loaded：大于零的数，表示已经加载的资源的字节数。

　　total：加载资源的总数。

用于 xhr请求 <img>、<video>。

progress：请求进度。
    error：请求出错时触发。
   abort：请求中断而不是因为错误，常常是用户取消。
     load:资源下载完成。
loadend:下载结束，当不再加载资源是触发，如何出现 error、abort，load。
timeout:加载超时。

上传文件时，XMLHTTPRequest对象的upload属性有一个progress，会不断返回上传的进度。

   

<progress min="0" max="100" value="0">0% complete</progress>

function upload(blobOrFile) {//定义上传文件函数
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.onload = function(e) { ... };

  // Listen to the upload progress.
  var progressBar = document.querySelector('progress');
  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) { //lengthComputable 是 progress 的一个属性，表示资源是否可计算字节流
      progressBar.value = (e.loaded / e.total) * 100;
      progressBar.textContent = progressBar.value; //有点浏览器不支持，这是后备选择
    }
  };

  xhr.send(blobOrFile);
}

upload(new Blob(['hello world'], {type: 'text/plain'}));

xhr.addEventListener("progress", updateProgress);
xhr.addEventListener("load", transferComplete);
xhr.addEventListener("error", transferFailed);
xhr.addEventListener("abort", transferCanceled);

xhr.open();

function updateProgress (oEvent) {
  if (oEvent.lengthComputable) { //可计算数据总量
    var percentComplete = oEvent.loaded / oEvent.total;
    // ...
  } else {
    // 回应的总数据量未知，导致无法计算百分比
  }
}

function transferComplete(evt) {
  console.log("The transfer is complete.");
}

function transferFailed(evt) {
  console.log("An error occurred while transferring the file.");
}

function transferCanceled(evt) {
  console.log("The transfer has been canceled by the user.");
}

 

 

今天就学到这里了，在第二篇中写一个发起请求函数。还是不太熟悉博客园的后台，用的很不习惯。