ajax简朴封装

事情之余简朴封装了ajax的要求,然则事情中照样用jquery,axios,angular内部封装好了http模块(笑)。

ajax平常分为简朴的四部:

  1. 竖立ajax对象(这里兼容ie的话要做一下处置惩罚)
  2. 衔接,即要求对象的open要领(get和post另有点差别,get参数要放在url背面,post要设置要求头)
  3. 发送,即要求对象的send函数(post参数则放在send内里)
  4. 吸收,在onreadystatechange(存储函数或函数名,每当readyState属性转变时,就会挪用该函数。)函数内里处置惩罚。

还能够加上超时这些

onreadystatechange剖析

  1. 要先推断readyState的状况(有四个状况)

    ①: 0,要求未初始化;

    ②: 1,服务器衔接已竖立;

    ③: 2,要求已吸收;

    ④: 3,要求处置惩罚中;

    ⑤: 4,要求已完成,且相应已停当

  2. 当readyState即是4时,你又要推断status的状况
  3. 要求胜利时status状况 200-300(不包括300) ,另有304(是缓存)(详细状况能够去参考文档)
  4. 在胜利(失利)的回掉函数内里将xhr.responseText的值返回出去。

代码

'use strict';

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

function ajax(options) {

  // 剖析参数
  options = options || {};
  if (!options.url) return;
  options.type = options.type || 'get';
  options.timeout = options.timeout || 0;

  // 1 竖立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 发送
    xhr.send();
  } else {
    xhr.open('post', options.url, true);

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

    // 3 发送
    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转url
function jsonToUrl(json) {
  var arr = [];
  json.t = Math.random();
  for(var name in json) {
    arr.push(name + '=' + encodeURIComponent(json[name]));
  }
  return arr.join('&');
}
    原文作者:smile
    原文地址: https://segmentfault.com/a/1190000013033689
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞