用XMLHttpRequest制作一个简易ajax

概述

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

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

参考:

*答案

实现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的内部原理。
上一篇:从零开始学 Web 之 CSS3(五)transform


下一篇:[C语言]链表实现贪吃蛇及部分模块优化