用XMLHttpRequest制作一个简易ajax

Posted 2021-01-21 馒头加梨子

概述

jquery退出历史舞台之后，我们怎么来发送ajax请求呢？可以用相关的库，也可以自己制作一个简易的ajax。

需要说明的是，我们使用的是XMLHttpRequest 2，它几乎兼容所有主流浏览器：XMLHttpRequest advanced features

参考：

stackoverflow答案

实现get请求

先从支持get请求开始，代码如下：

function ajax(a, b, c){ // URL, callback, just a placeholder
    c = new XMLHttpRequest;
    c.open('GET', a);
    c.onload = b;
    c.send();
}

这里的c是一个占位符，可以避免我们声明变量，虽然影响了一点可读性。

进行如下测试：

ajax('https://api.github.com/repositories/91545010/issues/1', function(e) {
    console.log(this.response);
});

可以看到能够返回数据。

实现post请求

很多时候，我们需要post请求，支持post请求也很简单，代码如下：

// URL, callback, method, formdata, just a placeholder
function ajax(a, b, e, d, c){
    c = new XMLHttpRequest;
    c.open(e||'GET', a);
    c.onload = b;
    c.send(d||null);
}

可以利用如下方式发送get和post请求：

ajax(url, callback);
ajax(url, callback, 'post', {'key': 'val'});

实现错误处理

错误处理是请求api中必不可少的东西，实现也很简单，代码如下：

// URL, callback, errorCallback, method, formdata, just a placeholder
function ajax(a, b, f, e, d, c){
    c = new XMLHttpRequest;
    c.open(e||'GET', a);
    c.onload = b;
    c.onerror = f;
    c.send(d||null);
}

可以利用如下方式发送get和post请求，并且定制error错误处理回调。

function error(e){
  console.log('--Error--', this.type);
  console.log('this: ', this);
  console.log('Event: ', e)
}

ajax(url, callback, error);
ajax(url, callback, error, 'post', {'key': 'val'});

学到了什么

我学到了什么？

1. 自己一步步包装实现常用api其实没有那么难。
2. ajax的内部原理。