用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'});
学到了什么
我学到了什么?
- 自己一步步包装实现常用api其实没有那么难。
- ajax的内部原理。