用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{ ...
随机推荐
- 第二期,问道PC端游戏免安装,下载即可体验
最近 迷恋游戏搭建不能自拔.搭建过 手游梦幻诛仙,传奇等等. 今天还是推荐PC端的问道这款游戏,原因是个人投入修改的时间太多了.基本完善了好多.这还得感谢这都是论坛的各位大佬体验的结果. 原来这个游戏 ...
- boost asio死锁一例
socket close -> sendmessage -> io_service stop 先关闭socket句柄,再给windows窗口发送消息,然后io_service停止. 当se ...
- Scania SDP3 2.38.2.37.0 Download, Install, Activate: Confirmed
Download: Scania Diagnos & Programmer SDP3 2.38.2.37.0 free version and tested version SDP3 2.38 ...
- Learning to Promote Saliency Detectors
Learning to Promote Saliency Detectors 原本放在了思否上, 但是公式支持不好, csdn广告太多, 在博客园/掘金上发一下 https://github.com/ ...
- AHK控制鼠标与键盘
F4::clicksleep 100MouseGetPos, xpos, ypos x:=xpos+30 click 1877,51sleep 100click 115,51sleep 100clic ...
- gitlab简介与配置
版本控制介绍 版本控制是指对软件开发过程中各种程序代码.配置文件及说明文档等文件变更的管理,是软件配置管理的核心思想之一. 版本控制最主要的功能就是追踪文件的变更.它将什么时候.什么人更改了文件的什么 ...
- 离线eclipse添加web工程
下载了eclipse,先写的后台程序,后来写前台程序的时候发现没有 新建->web dynamic project,如下方式添加: 帮助->安装新软件,在work with中选择版本对应的 ...
- PHP配置文件详解php.ini
[PHP] ; PHP还是一个不断发展的工具,其功能还在不断地删减 ; 而php.ini的设置更改可以反映出相当的变化, ; 在使用新的PHP版本前,研究一下php.ini会有好处的 ;;;;;;;; ...
- 周报数据采集之生存图片(execl方法)
https://blog.csdn.net/Luzaofa/article/details/81675364 Python之Excel chart另存为图片大家好,好久没有更新博客了,这一段时间有点忙 ...
- mathematic语法基础
1. 注释,用 (*这是注释*) 2.清除空间变量 Clear["`*"] 3. 求方程组.这个方程组比较特殊,有五个方程,六个变量,求其中五个变量(因变量)用另外一个变量(自 ...