本站承诺永不接任何虚假欺骗、联盟广告、弹窗广告、病毒广告、诱导充值等影响用户体验的广告,广告屏蔽插件会影响本站部分功能,还请不要屏蔽本站广告,感谢支持!

当前位置:首页 / 正文

2020-09-21 | 编程技术 | 3724 次阅读 | 等你评论 | 0 次点赞 | 繁体

使用场景

1、检查接口可用性

主要用于在没有引入 jQuery 等工具的页面上需要验证一些 api 能否调得通的时候,可以快速调出浏览器调试界面发请求。 这在判断是否存在跨域问题的场景下,特别好用。

2、验证接口用于爬虫

另外,因为在浏览器调试界面发起的请求跟页面自身的 js 发起的请求是一样的,所以可以不用关心登录状态等上下文环境的问题。这在写爬虫的时候特别实用——抓到一个链接之后,直接在浏览器上进行验证,先调用一下试试好不好用再说。

3、减少依赖
因为可以直接使用原生 js,因此无需添加 jQuery、axios 等第三方工具就可以发送 http 就请求,可以减少应用的体积。

实现

简易版

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if( xhr.readyState == 4){
         if( xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
             info.innerHTML = xhr.responseText;
          }
     }
};

// 每次需要发请求需要做两步:
xhr.open("get", url, true);
xhr.send(null);

完整版:

var http = {};
http.quest = function (option, callback) {
  var url = option.url;
  var method = option.method;
  var data = option.data;
  var timeout = option.timeout || 0;
  var xhr = new XMLHttpRequest();
  (timeout > 0) && (xhr.timeout = timeout);
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status >= 200 && xhr.status < 400) {
        var result = xhr.responseText;
        try { result = JSON.parse(xhr.responseText); } catch (e) { }
        callback && callback(null, result);
      } else {
        callback && callback('status: ' + xhr.status);
      }
    }
  }.bind(this);
  xhr.open(method, url, true);
  if (typeof data === 'object') {
    try {
      data = JSON.stringify(data);
    } catch (e) { }
  }
  xhr.send(data);
  xhr.ontimeout = function () {
    callback && callback('timeout');
    console.log('%c连%c接%c超%c时', 'color:red', 'color:orange', 'color:purple', 'color:green');
  };
};
http.get = function (url, callback) {
  var option = url.url ? url : { url: url };
  option.method = 'get';
  this.quest(option, callback);
};
http.post = function (option, callback) {
  option.method = 'post';
  this.quest(option, callback);
};

//普通get请求
http.get('http://www.baidu.com', function (err, result) {
    // 这里对结果进行处理
});

//定义超时时间(单位毫秒)
http.get({ url: 'http://www.baidu.com', timeout: 1000 }, function (err, result) {
    // 这里对结果进行处理
});

//post请求
http.post({ url: 'http://www.baidu.com', data: '123', timeout: 1000 }, function (err, result) {
    // 这里对结果进行处理
});

via:
https://blog.csdn.net/dadiyang/article/details/93383443

标签: javascript

猜你喜欢
Lazysizes.js图片懒加载的使用
lazysizes 是一种快速(无垃圾),对 SEO 友好且可自动初始化的 lazyloader,用于图像(包括响应图像 picture/ srcset),iframe,脚本/小部件等。它还通过...
通用的检测到广告屏蔽插件进行弹窗提示实现方法
用的 js 方法来检测,按理说所有博客都能使用,就是在打开网页的时候进行一次判断。如果发现没有加载广告代码,就会出来一个弹窗来提示浏览者将本站加到广告拦截插件的白名单里面。别喷我,个人站长经营实...
javascript | 原生JS多语言切换简单实现
由于项目需要实现一个前端的多语言切换,不想因为一个简单的功能就引入 jQuery,所以经过 google 编程大法摸索出一个原生 JS 就可以实现的多语言前端切换的小例子,仅供参考。<bo...
原生js实现ajax方法
由于不想多引入一个 jquery,百度了一个原生 js 实现 ajax 的方法(超简单),挺不错的,现在就分享给大家,也给大家做个参考。首先新建一个 js 文件:function ajax(){...
github 的黑夜模式小猫咪动画源码
github 上的小猫咪黑夜模式切换很可爱,想要~ 。于是花了点时间扒了下来放在了自己的博客上。秉着开源精神,将源码分享给大家。废话少说,上代码html:<!-- 暗黑模式 --> ...
仿网易评论盖楼 JS 实现 | html
看了些评论引用盖楼的网站,觉得网易的效果比较好,简单明了,让人看了就知道是引用评论,迟点准备自己也写个玩玩,应该能从中学到不少东西. 前端部分实现如下:https://www.phpvar.co...
(首次提交评论需审核通过才会显示,请勿重复提交)