ajax簡單封裝

caoym 發(fā)布于2019-08-26 11:31 / 2031人閱讀

摘要：工作之余簡單封裝了的請求，但是工作中還是用，，內(nèi)部封裝好了模塊笑。代碼解析參數(shù)創(chuàng)建高級瀏覽器和以上連接發(fā)送請求頭發(fā)送接收完成清除定時器成功超時超時了終止轉(zhuǎn)

工作之余簡單封裝了ajax的請求，但是工作中還是用jquery，axios，angular內(nèi)部封裝好了http模塊（笑）。

ajax一般分為簡單的四部：

創(chuàng)建ajax對象（這里兼容ie的話要做一下處理）

連接，即請求對象的open方法（get和post還有點不同，get參數(shù)要放在url后面，post要設(shè)置請求頭）

發(fā)送，即請求對象的send函數(shù)（post參數(shù)則放在send里面）

接收，在onreadystatechange（存儲函數(shù)或函數(shù)名，每當readyState屬性改變時，就會調(diào)用該函數(shù)。）函數(shù)里面處理。

還可以加上超時這些

onreadystatechange分析

要先判斷readyState的狀態(tài)（有四個狀態(tài)）

①： 0，請求未初始化；

②： 1，服務(wù)器連接已建立；

③： 2，請求已接收；

④： 3，請求處理中；

⑤： 4，請求已完成，且響應(yīng)已就緒

當readyState等于4時，你又要判斷status的狀態(tài)

請求成功時status狀態(tài) 200-300（不包括300），還有304（是緩存）（具體狀態(tài)可以去參考文檔）

在成功（失敗）的回掉函數(shù)里面將xhr.responseText的值返回出去。

代碼

"use strict";

var $ = {};
$.ajax = ajax;

function ajax(options) {

  // 解析參數(shù)
  options = options || {};
  if (!options.url) return;
  options.type = options.type || "get";
  options.timeout = options.timeout || 0;

  // 1 創(chuàng)建ajax
  if (window.XMLHttpRequest) {

    // 高級瀏覽器和ie7以上
    var xhr = new XMLHttpRequest();
  } else {

    //ie6,7,8
    var xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
  }

  // 2 連接
  var str = jsonToUrl(options.data);
  if (options.type === "get") {
    xhr.open("get", `${options.url}?${str}`, true);

    // 3 發(fā)送
    xhr.send();
  } else {
    xhr.open("post", options.url, true);

    // 請求頭
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    // 3 發(fā)送
    xhr.send();
  }

  // 接收
  xhr.onreadystatechange = function() {

    // 完成
    if (xhr.readyState === 4) {

      // 清除定時器
      clearTimeout(timer);

      if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {

        // 成功
        options.success && options.success(xhr.responseText);
      } else {
        options.error && options.error( xhr.status );
      }
    }
  };

  
  // 超時
  if (options.timeout) {
    var timer = setTimeout(function(){ 
            alert("超時了");
            xhr.abort(); // 終止
        },options.timeout);
  }
}


// json轉(zhuǎn)url
function jsonToUrl(json) {
  var arr = [];
  json.t = Math.random();
  for(var name in json) {
    arr.push(name + "=" + encodeURIComponent(json[name]));
  }
  return arr.join("&");
}