用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的内部原理。
用XMLHttpRequest制作一个简易ajax的更多相关文章
- 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具
查看本章节 查看作业目录 需求说明: 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具 实现思路: 使用history对象中的 forward() 方法和 ...
- iOS:制作一个简易的计算器
初步接触视图,制作了一个简易的计算器,基本上简单的计算是没有问题的,不是很完美,可能还有一些bug,再接再厉. // // ViewController.m // 计算器 // // Created ...
- 使用Windows Form 制作一个简易资源管理器
自制一个简易资源管理器----TreeView控件 第一步.新建project,进行基本设置:(Set as StartUp Project:View/Toolbox/TreeView) 第二步.开始 ...
- Opencv探索之路(二十):制作一个简易手动图像配准工具
近日在做基于sift特征点的图像配准时遇到匹配失败的情况,失败的原因在于两幅图像分辨率相差有点大,而且这两幅图是不同时间段的同一场景的图片,所以基于sift点的匹配已经找不到匹配点了.然后老师叫我尝试 ...
- 使用jQuery制作一个简易的购物车结算流程
因为今天下午时候在网上买了东西,在结算界面的时候突发奇想的也想自己动手做一个结算界面,当然了,只是一个最简易的结算界面,有商品数量的加减,有单价和小计,单个多个删除,全选和区县全选等等一些小功能,我在 ...
- 制作一个简易计算器——基于Android Studio实现
一个计算器Android程序的源码部分分为主干和细节两部分. 一.主干 1. 主干的构成 计算器的布局 事件(即计算器上的按钮.文本框)监听 实现计算 2. 详细解释 假设我们的项目名为Calcula ...
- 通过JS制作一个简易数码时钟
设计思路: 数码时钟即通过图片数字来显示当前时间,需要显示的图片的URL根据时间变化而变化. a.获取当前时间Date()并将当前时间信息转换为一个6位的字符串; b.根据时间字符串每个位置对应的数字 ...
- VC++ 制作一个简易的控制台时钟应用
1.下载EasyX Library for C++ (http://www.easyx.cn/) 直接下载:EasyX_20151015(beta) EasyX 绘图库目前支持 Visual C++ ...
- java 用socket制作一个简易多人聊天室
代码: 服务器端Server import java.io.*; import java.net.*; import java.util.ArrayList; public class Server{ ...
随机推荐
- laraval migration 新增字段或者修改字段的方法
1.进入项目根目录执行artisan命令生成migration文件,可以指定--table和--path参数,会在对应目录下生成migration文件. php artisan make:migrat ...
- Cannot retrieve metalink for repository: epel/x86_64. Please verify its path and try again
虚拟机恢复快照后,使用yum安装软件,提示下面的信息,开始以为是yum源的问题或者DNS的问题,但是无果,最后再看一下服务器的时间,坑了,还原快照,时间变成以前的了. [root@localhost ...
- db2数据库备份及恢复
导出 1. 连接数据库,命令如下: db2 connect to db_name user user_name using password db_name 是指数据库的名字, user_name 是 ...
- docker私库Harbor部署(转载)
系统环境 centos7.3docker-ce docker version: 18.03.0docker-compose version: 1.21.0 Install Docker CE 安装依赖 ...
- LOL新版符文 怎么查看队友的符文配置?
LOL怎么看其他玩家符文? 像我这种名字都懒的打的, 直接去WeGame复制昵称. 然后在LOL主界面点生涯, 之后搜索 光头强xian生
- Python从入门到精通之Fifth!
字典 类名:dict 字典是无序的. 字典的创建 info = {"k1":{1:"abc",[1,2,3]},"k2":True} ...
- FTP模式简式:PORT/PASV/EPRT/EPSV
简介 常见FTP有两种模式:PORT(主动模式).PASV(被动模式). 而EPRT/EPSV模式出现的原因是FTP仅仅提供了建立在IPv4上进行数据通信的能力,它基于网络地址是32位这一假设.但是, ...
- 前后台分离开发时遇到循环引用问题"$ref"
1. 遇到的问题 { "errMsg": "", "data": { "baseinfo": { "freeT ...
- 28. 实现strStr()
实现 strStr() 函数. 给定一个 haystack 字符串和一个 needle 字符串,在 haystack 字符串中找出 needle 字符串出现的第一个位置 (从0开始).如果不存在,则返 ...
- php7 三元运算 精简
$abc = isset($_GET['name'])?$_GET['name']:'abc'; // 5.+ $abcd = $_GET[