用XMLHttpRequest制作一个简易ajax

概述

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 placeholderfunction 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 placeholderfunction 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的内部原理。

用XMLHttpRequest制作一个简易ajax

原文地址：https://www.cnblogs.com/yangzhou33/p/9986655.html