ajax简单封装

caoym 发布于2019-08-26 11:31 / 1900人阅读

摘要：工作之余简单封装了的请求，但是工作中还是用，，内部封装好了模块笑。代码解析参数创建高级浏览器和以上连接发送请求头发送接收完成清除定时器成功超时超时了终止转

工作之余简单封装了ajax的请求，但是工作中还是用jquery，axios，angular内部封装好了http模块（笑）。

ajax一般分为简单的四部：

创建ajax对象（这里兼容ie的话要做一下处理）

连接，即请求对象的open方法（get和post还有点不同，get参数要放在url后面，post要设置请求头）

发送，即请求对象的send函数（post参数则放在send里面）

接收，在onreadystatechange（存储函数或函数名，每当readyState属性改变时，就会调用该函数。）函数里面处理。

还可以加上超时这些

onreadystatechange分析

要先判断readyState的状态（有四个状态）

①： 0，请求未初始化；

②： 1，服务器连接已建立；

③： 2，请求已接收；

④： 3，请求处理中；

⑤： 4，请求已完成，且响应已就绪

当readyState等于4时，你又要判断status的状态

请求成功时status状态 200-300（不包括300），还有304（是缓存）（具体状态可以去参考文档）

在成功（失败）的回掉函数里面将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("&");
}

云服务器海外云主机一个封装的Ajax类原生js封装ajax js ajax 请求数据封装封装成

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107044.html

回调、使用Promise封装ajax()、Promise入门

摘要：回调使用封装入门回调是啥看这里回调是什么方应杭知乎是一种特殊的函数，这个函数被作为参数传给另一个函数去调用。回调、使用Promise封装ajax()、Promise入门 1 回调是啥 call a functioncall a function back callback 看这里:Callback（回调）是什么？---方应杭知乎 callback 是一种特殊的函数，这个函数被作为参数...

godlong_X 2019-08-23 10:50 评论0 收藏0
ajax封装和跨域知识

摘要：封装和跨域知识使用还是是通过参数传递到当前脚本的变量数组。对所发送信息的数量也有限制。请求成功时触发，。允许一个域上的网络应用向另一个域提交跨域请求。 ajax封装和跨域知识 ajax 使用get还是post $_GET 是通过 URL 参数传递到当前脚本的变量数组。 $_POST 是通过 HTTP POST 传递到当前脚本的变量数组。何时使用 GET？通过 GET 方法从表单...

Shihira 2019-08-19 18:14 评论0 收藏0
二次封装 query ajax 办法

摘要：本次二次封装，参考可以添加中间件处理数据，返回对象，减少回调，写更加简洁优雅。痛点但是在项目中使用它还是有一些痛点的就是现在基本所有项目的返回的数据也是进行了二次封装，加入了后台在处理业务逻辑时的信息。前言在我们前端处理数据的时候免不了要 ajax 与后台通信， ajax 是通过 XMLHttpRequest 对象与服务器进行通信的， jquery 在 XMLHttpReaque...

zr_hebo 2019-08-20 17:44 评论0 收藏0
Ajax在vue中的封装及使用

摘要：今天给大家写一篇关于在中的应用及封装，有些同学可能会有疑问，因为熟悉的都知道，中有和是专门用于交互的，那么岂不是多此一举吗其实不然，有的优势，并且小编本身对有着特殊的感情，今天就给大家详细详解在中的应用。今天给大家写一篇关于ajax在vue中的应用及封装，有些同学可能会有疑问，因为熟悉vue的都知道，vue中有vue-resource和axios是专门用于http交互的，那么ajax...

godruoyi 2019-08-23 15:33 评论0 收藏0
Ajax在vue中的封装及使用

摘要：今天给大家写一篇关于在中的应用及封装，有些同学可能会有疑问，因为熟悉的都知道，中有和是专门用于交互的，那么岂不是多此一举吗其实不然，有的优势，并且小编本身对有着特殊的感情，今天就给大家详细详解在中的应用。今天给大家写一篇关于ajax在vue中的应用及封装，有些同学可能会有疑问，因为熟悉vue的都知道，vue中有vue-resource和axios是专门用于http交互的，那么ajax...

pingink 2019-08-02 14:22 评论0 收藏0