自己封装一个简单的ajax插件
function myAjax(obj) {
var xmlHttp; //保存xmlHttpRequest对象
var type = obj.requestType; //保存请求方式
var cache = obj.cache || false; //get时是否使用缓存,默认否
var success = obj.success; //数据请求成功的回调方法
var error = obj.error; //发生错误的回调方法
var async = obj.async || false; //是否异步,默认否
var data = []; //存储用户发来的数据
var url = obj.url; //用户请求地址 createXmlHttp(); //执行xmlHttp创建函数 //创建xmlHttp失败
if(!xmlHttp) {
console.log("我的老哥,创建xmlHttp对象失败啦!您的浏览器不支持xmlHttpRequest对象");
} try {
//定义状态监听函数
xmlHttp.onreadystatechange = function () {
switch (xmlHttp.readyState) {
case 1:
console.log("open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。");
break;
case 2:
console.log("Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。");
break;
case 3:
console.log("所有响应头部都已经接收到。响应体开始接收但未完成。");
break;
case 4:
if (xmlHttp.status == 200) {
console.log("HTTP 响应已经完全接收。");
success(xmlHttp.responseText); //调用回调函数
}
break;
default:
error(xmlHttp.statusText);
break;
}
}; //把用户传来的数据转换成字符串
for (var i in obj.data) {
data.push(i + '=' + obj.data[i]);
}
data = data.join('&'); if (type.toUpperCase() == 'GET') { //如果是get请求
if (cache == false) { //如果get请求不使用缓存
xmlHttp.open('get', url + '?' + data + '&random=' + Math.random(), async);
xmlHttp.send('null');
} else { //如果get请求使用缓存
xmlHttp.open('get', url + '?' + data, async);
xmlHttp.send('null');
}
} else if (type.toUpperCase() == 'POST') //如果是post请求
{
xmlHttp.open('post', url, async);
xmlHttp.setRequestHeader("Content-Type"
, "application/x-www-form-urlencoded");
xmlHttp.send(data);
} else {
throw new Error('您的请求方法有误!');
}
} catch (error) {
console.log("出错啦:" + error.message);
} //创建xmlHttpRequest对象函数
function createXmlHttp() {
if(window.ActiveXObject) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} } else if (window.XMLHttpRequest){
try {
xmlHttp = new XMLHttpRequest();
} catch(e) {
xmlHttp = false;
}
}
} }
插件基本逻辑:
GET请求:
1.新建XHR对象
2.定义状态监听函数,各种状态对应各种处理
3.调用open方法启动请求,准备发送
4.使用send方法发送请求,参数为null POST请求:
1.新建XHR对象
2.定义状态监听函数,各种状态对应各种处理
3.使用open方法启动请求,准备发送
4.设置http头信息的Content-Type类型,模拟表单发送
5.使用send方法发送请求,参数为自己要发送的东西
插件使用方法:
1.在html页面引入myAjax.js文件之后就可以使用啦
2.
get方法使用例子:
myAjax({
requestType: 'get',
url: '/getFunc',
async: true,
cache: false,
data: { name: "lin", age: "20"},
success: function (data) {
alert(data);
},
error: function (statusText) {
alert("请求失败了,以下是具体信息:\n" + statusText);
}
}); post方法使用例子:
myAjax({
requestType: 'post',
url: '/postFunc',
async: true,
data: {name:"shuai", age: 10},
success: function (data) {
console.log(data);
},
error: function (statusText) {
alert("请求失败了,以下是具体信息:\n" + statusText);
}
});
这个插件主要是我为了学习原生ajax和函数封装而写的,还存在很多bug,同样在学习ajax和函数封装的同学可以参考参考,取其精华弃其糟粕,嘻嘻嘻。
myAjax.js已经在github开源,上面有实现具体例子: https://github.com/nayonglin/myAjax 记得star啊我的老哥!!!!!!
自己封装一个简单的ajax插件的更多相关文章
- 封装一个简单的ajax请求
记录自己第一次封装ajax,肯定有很多考虑不周到,如有错误请指出,本人必将虚心改正. /** * * @param {Object} obj =>header:请求头:url:请求地址:meth ...
- 使用jQuery.extend创建一个简单的选项卡插件
选项卡样式如图,请忽略丑陋的样式,样式可以随意更改 主要是基于jquery的extend扩展出的一个简单的选项卡插件,注意:这里封装的类使用的是es6中的class,所以不兼容ie8等低版本浏览器呦! ...
- 编写一个简单的Jquery插件
1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var me ...
- Directx11学习笔记【四】 封装一个简单的Dx11DemoBase
根据前面两个笔记的内容,我们来封装一个简单的基类,方便以后的使用. 代码和前面类似,没有什么新的内容,直接看代码吧(由于代码上次都注释了,这次代码就没怎么写注释o(╯□╰)o) Dx11DemoBas ...
- 网络游戏开发-服务器(01)Asp.Net Core中的websocket,并封装一个简单的中间件
先拉开MSDN的文档,大致读一遍 (https://docs.microsoft.com/zh-cn/aspnet/core/fundamentals/websockets) WebSocket 是一 ...
- 手把手制作一个简单的IDEA插件(环境搭建Demo篇)
新建IDEA插件File --> new --> Project--> Intellij PlatForm Plugin-->Next-->填好项目名OK 编写插件新建工 ...
- 代码改变世界 | 如何封装一个简单的 Koa
下面给大家带来:封装一个简单的 Koa Koa 是基于 Node.js 平台的下一代 web 开发框架 Koa 是一个新的 web 框架,可以快速而愉快地编写服务端应用程序,本文将跟大家一起学习:封装 ...
- python+selenium之自定义封装一个简单的Log类
python+selenium之自定义封装一个简单的Log类 一. 问题分析: 我们需要封装一个简单的日志类,主要有以下内容: 1. 生成的日志文件格式是 年月日时分秒.log 2. 生成的xxx.l ...
- 实现一个简单的Vue插件
我们先看官方文档对插件的描述 插件通常会为 Vue 添加全局功能.插件的范围没有限制--一般有下面几种: 1.添加全局方法或者属性,如: vue-custom-element 2.添加全局资源:指令/ ...
随机推荐
- 【quickhybrid】iOS端的项目实现
前言 18年元旦三天内和朋友突击了下,勉强是将雏形做出来了,后续的API慢慢完善.(当然了,主力还是那个朋友,本人只是初涉iOS,勉强能看懂,修修改改而已) 大致内容如下: JSBridge核心交互部 ...
- 深入理解 Python 异步编程(上)
http://python.jobbole.com/88291/ 前言 很多朋友对异步编程都处于"听说很强大"的认知状态.鲜有在生产项目中使用它.而使用它的同学,则大多数都停留在知 ...
- Oracle导入导出常用命令
-- 全量导出 exp system/manager@TEST file=d:\daochu.dmp full=y -- 将数据库中system用户与sys用户的表导出 exp system/mana ...
- Java的迭代和foreach循环
Java的迭代(interation statement) Java的迭代(interation statement) 其实就是循环控制语句while.do-while和for,因为他们会从重复地运行 ...
- Spring Boot实战:Restful API的构建
上一篇文章讲解了通过Spring boot与JdbcTemplate.JPA和MyBatis的集成,实现对数据库的访问.今天主要给大家分享一下如何通过Spring boot向前端返回数据. 在现在的开 ...
- QtCreator 断点不起作用
使用QtCreator 调试程序时一直无法进入断点,断点根本不起作用. 解决方法: 打开.pro文件 将图中的release改为debug,再次调试运行就可以进入断点了.
- Java学习笔记9(面向对象二:this、继承、抽象类)
就近原则: 类中的方法中的变量和成员变量重名时,调用类的方法时候,生效的是方法中的变量,如果方法中没有定义变量,才会去成员变量中寻找 于是,提出了this关键字,为了区分重名问题 public cla ...
- ASP.NET 设计模式:设计模式和原则简述
设计模式的概念 设计模式是高层次的.抽象的解决方案模板.可以将这些模式视为解决方案的蓝本而不是解决方案本身.通常是通过重构自己的代码并将问题泛化来实现设计模式. 软件设计中常见的模式大体分为三类: 创 ...
- 【转载】mysql主键的缺少导致备库hang
最近线上频繁的出现slave延时的情况,经排查发现为用户在删除数据的时候,由于表主键的主键的缺少,同时删除条件没有索引,或或者删除的条件过滤性极差,导致slave出现hang住,严重的影响了生产环境的 ...
- 移动端300ms点击延迟
移动端300ms点击延迟 原因:早期的苹果手机存在点击缩放,用手指在屏幕上快速双击后,iOS自带的Safari浏览器会将网页缩放至原始比例,后来很多浏览器也跟着学了. 解决方法:禁止缩放 <me ...