概述

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

用XMLHttpRequest制作一个简易ajax的更多相关文章

  1. 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具

    查看本章节 查看作业目录 需求说明: 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具 实现思路: 使用history对象中的 forward() 方法和 ...

  2. iOS:制作一个简易的计算器

    初步接触视图,制作了一个简易的计算器,基本上简单的计算是没有问题的,不是很完美,可能还有一些bug,再接再厉. // // ViewController.m // 计算器 // // Created ...

  3. 使用Windows Form 制作一个简易资源管理器

    自制一个简易资源管理器----TreeView控件 第一步.新建project,进行基本设置:(Set as StartUp Project:View/Toolbox/TreeView) 第二步.开始 ...

  4. Opencv探索之路(二十):制作一个简易手动图像配准工具

    近日在做基于sift特征点的图像配准时遇到匹配失败的情况,失败的原因在于两幅图像分辨率相差有点大,而且这两幅图是不同时间段的同一场景的图片,所以基于sift点的匹配已经找不到匹配点了.然后老师叫我尝试 ...

  5. 使用jQuery制作一个简易的购物车结算流程

    因为今天下午时候在网上买了东西,在结算界面的时候突发奇想的也想自己动手做一个结算界面,当然了,只是一个最简易的结算界面,有商品数量的加减,有单价和小计,单个多个删除,全选和区县全选等等一些小功能,我在 ...

  6. 制作一个简易计算器——基于Android Studio实现

    一个计算器Android程序的源码部分分为主干和细节两部分. 一.主干 1. 主干的构成 计算器的布局 事件(即计算器上的按钮.文本框)监听 实现计算 2. 详细解释 假设我们的项目名为Calcula ...

  7. 通过JS制作一个简易数码时钟

    设计思路: 数码时钟即通过图片数字来显示当前时间,需要显示的图片的URL根据时间变化而变化. a.获取当前时间Date()并将当前时间信息转换为一个6位的字符串; b.根据时间字符串每个位置对应的数字 ...

  8. VC++ 制作一个简易的控制台时钟应用

    1.下载EasyX Library for C++ (http://www.easyx.cn/) 直接下载:EasyX_20151015(beta) EasyX 绘图库目前支持 Visual C++ ...

  9. java 用socket制作一个简易多人聊天室

    代码: 服务器端Server import java.io.*; import java.net.*; import java.util.ArrayList; public class Server{ ...

随机推荐

  1. laraval migration 新增字段或者修改字段的方法

    1.进入项目根目录执行artisan命令生成migration文件,可以指定--table和--path参数,会在对应目录下生成migration文件. php artisan make:migrat ...

  2. Cannot retrieve metalink for repository: epel/x86_64. Please verify its path and try again

    虚拟机恢复快照后,使用yum安装软件,提示下面的信息,开始以为是yum源的问题或者DNS的问题,但是无果,最后再看一下服务器的时间,坑了,还原快照,时间变成以前的了. [root@localhost ...

  3. db2数据库备份及恢复

    导出 1. 连接数据库,命令如下: db2 connect to db_name user user_name using password db_name 是指数据库的名字, user_name 是 ...

  4. docker私库Harbor部署(转载)

    系统环境 centos7.3docker-ce docker version: 18.03.0docker-compose version: 1.21.0 Install Docker CE 安装依赖 ...

  5. LOL新版符文 怎么查看队友的符文配置?

    LOL怎么看其他玩家符文? 像我这种名字都懒的打的, 直接去WeGame复制昵称. 然后在LOL主界面点生涯, 之后搜索 光头强xian生

  6. Python从入门到精通之Fifth!

    字典  类名:dict   字典是无序的. 字典的创建  info = {"k1":{1:"abc",[1,2,3]},"k2":True} ...

  7. FTP模式简式:PORT/PASV/EPRT/EPSV

    简介 常见FTP有两种模式:PORT(主动模式).PASV(被动模式). 而EPRT/EPSV模式出现的原因是FTP仅仅提供了建立在IPv4上进行数据通信的能力,它基于网络地址是32位这一假设.但是, ...

  8. 前后台分离开发时遇到循环引用问题"$ref"

    1. 遇到的问题 { "errMsg": "", "data": { "baseinfo": { "freeT ...

  9. 28. 实现strStr()

    实现 strStr() 函数. 给定一个 haystack 字符串和一个 needle 字符串,在 haystack 字符串中找出 needle 字符串出现的第一个位置 (从0开始).如果不存在,则返 ...

  10. php7 三元运算 精简

    $abc = isset($_GET['name'])?$_GET['name']:'abc'; // 5.+ $abcd = $_GET[