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

原生ajax的get和post方法封装

时间:2020-12-31 12:23:17      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:传递   blank   name   版本   ready   pen   eth   url   new   

原生ajax的get和post方法封装:https://www.cnblogs.com/qiuxiaozhen/p/10568314.html

 

get 方法

技术图片
    function serialize (data) {
      if (!data) {
        return ‘‘;
      }
      
      var paris = [];
      for (var key in data) {
        if (!data.hasOwnProperty(key) || typeof data[key] === ‘function‘) {
          continue;
        }
        var name = encodeURIComponent(key);
        var value = encodeURIComponent(data[key].toString());
        paris.push(name + ‘=‘ + value);
      }
      return paris.join(‘&‘);
    }

    function get (url, options, callback) {
      var req;
      if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
      } else if (window.ActiveXObject) { // 兼容IE7及以下版本
        req = new ActiveXObject();
      }
      
      req.onreadystatechange = function () {
        if (req.readyState === 4) {
          if (req.status === 200) {
            console.log(‘请求成功‘);
            callback(req.response);
          }
        } else {
          console.log(‘请求中...‘);
        }
      }
      
      // 将传递的参数序列化
      if (serialize(options) !== ‘‘) {
        url = url + ‘?‘ + serialize(options);
      }

      req.open(‘get‘, url);
      req.send(null);
    }
技术图片

 post方法

技术图片
    function serialize (data) {
      if (!data) {
        return ‘‘;
      }
      
      var paris = [];
      for (var key in data) {
        if (!data.hasOwnProperty(key) || typeof data[key] === ‘function‘) {
          continue;
        }
        var name = encodeURIComponent(key);
        var value = encodeURIComponent(data[key].toString());
        paris.push(name + ‘=‘ + value);
      }
      return paris.join(‘&‘);
    }

    function post (url, options, callback) {
      var req;
      if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
      } else if (window.ActiveXObject) { // 兼容IE7及以下版本
        req = new ActiveXObject();
      }
      
      req.onreadystatechange = function () {
        if (req.readyState === 4) {
          if (req.status === 200) {
            console.log(‘请求成功‘);
            callback(req.response);
          }
        } else {
          console.log(‘请求中...‘);
        }
      }

      req.open(‘post‘, url);
      req.send(serialize(options));
    }
技术图片

get与post方法结合

技术图片
    function serialize (data) {
      if (!data) {
        return ‘‘;
      }
      
      var paris = [];
      for (var key in data) {
        if (!data.hasOwnProperty(key) || typeof data[key] === ‘function‘) {
          continue;
        }
        var name = encodeURIComponent(key);
        var value = encodeURIComponent(data[key].toString());
        paris.push(name + ‘=‘ + value);
      }
      return paris.join(‘&‘);
    }

    function request (method, url, options, callback) {
      var req;
      if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
      } else if (window.ActiveXObject) { // 兼容IE7及以下版本
        req = new ActiveXObject();
      }
      
      req.onreadystatechange = function () {
        if (req.readyState === 4) {
          if (req.status === 200) {
            console.log(‘请求成功‘);
            callback(req.response);
          }
        } else {
          console.log(‘请求中...‘);
        }
      }
      
      url = method === ‘get‘ && serialize(options) !== ‘‘ ?  url + ‘?‘ + serialize(options) : url;
      let sendParams = method === ‘get‘ ? null : serialize(options);
      
      req.open(method, url);
      req.send(sendParams);
    }
技术图片

原生ajax的get和post方法封装

标签:传递   blank   name   版本   ready   pen   eth   url   new   

原文地址:https://www.cnblogs.com/bydzhangxiaowei/p/14194087.html

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