ajax原生js封装
不带注释的
function ajax(json) {
json.type = json.type ? json.type : 'get';
json.async = json.async == false ? false : true;
json.contentType = json.contentType ? json.contentType : 'application/x-www-form-urlencoded';
json.data = json.data ? json.data : '';
var ajax = new XMLHttpRequest();
if (json.type.toLowerCase() == 'post') {
ajax.open('post', json.url, json.async);
ajax.setRequestHeader('Content-type', json.contentType + ';charset=utf-8');
ajax.send(json.data);
} else {
ajax.open('get', json.url + '?' + json.data, json.async);
ajax.send();
}
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
json.success(ajax.response);
}
}
}
带注释的
// ajax封装
/*
请求方式: type 非必传,默认get
请求地址: url 必传
是否异步: async 非必传
设置头请求: contentType 非必传
请求数据: data 非必传
*/
function ajax(json) {
// 如果没传类型,则默认get方式
json.type = json.type ? json.type : 'get';
// 是否异步传送 布尔值
json.async = json.async == false ? false : true;
//设置头请求 get非必须 post方式必须设置
json.contentType = json.contentType ? json.contentType : 'application/x-www-form-urlencoded';
//传送数据
json.data = json.data ? json.data : '';
//创建异步对象
var ajax = new XMLHttpRequest();
// 判断是get还是post请求
//如果是post请求
if (json.type.toLowerCase() == 'post') {
//设置请求类型、请求地址、是否异步
ajax.open('post', json.url, json.async);
//post请求一定要在send前设置请求头才行,不然会报错 + 编码方式
ajax.setRequestHeader('Content-type', json.contentType + ';charset=utf-8');
//发送请求,数据作为参数传入
ajax.send(json.data);
} else {//不是post就为get(第一步设置的)
//设置请求类型、请求地址(可以带参数)、请求数据、是否异步
ajax.open('get', json.url + '?' + json.data, json.async);
//发送请求
ajax.send();
}
//注册事件 onreadystatechange状态改变就会调用
ajax.onreadystatechange = function () {
//判断服务器是否正确响应
if (ajax.readyState == 4 && ajax.status == 200) {
//用success作为成功后的回调函数
json.success(ajax.response);
}
}
}
ajax原生js封装的更多相关文章
- 第110天:Ajax原生js封装函数
一.Ajax的实现主要分为四部分: 1.创建Ajax对象 // 创建ajax对象 var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHtt ...
- ajax 原生js封装ajax [转]
/* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @ ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选 实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...
- 原生JS封装创建多级菜单函数
手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构 废话不多说,展示代码. ...
- 基于原生JS封装数组原型上的sort方法
基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...
- 原生js封装十字参考线插件(一)
需求来源: 拓扑图之机房平面图,显示机房长宽比例尺,房间内标注各种设备间距不易实现,特在机房平面图上层加一个十字参考线 横竖两条线垂直,在鼠标指针处交叉,显示鼠标指针坐标(相对机房平面图的坐标,不是相 ...
随机推荐
- Golang实现数的几种遍历
目录 PreOrder recursive Iterative InOrder Iterative PostOrder Iterative PreOrder recursive package mai ...
- 从 0 开始机器学习 - 神经网络反向 BP 算法!
最近一个月项目好忙,终于挤出时间把这篇 BP 算法基本思想写完了,公式的推导放到下一篇讲吧. 一.神经网络的代价函数 神经网络可以看做是复杂逻辑回归的组合,因此与其类似,我们训练神经网络也要定义代价函 ...
- C常见错误小记(未完)
1.指针与NULL 下面这段代码会报错: { int *a = NULL; *a = ; printf("%d",*a); } 指针初始化为NULL,还是没有分配内存,所以会报错. ...
- 安卓开发,Service 服务
Service 服务 是一种应用组件,可长时间后台运行,不提供用户界面.如音乐播放器/下载程序.不能自己运行. 使用Service的方式: (一)startService(): 调用者和服务之间没有联 ...
- Python 为什么不支持 i++ 自增语法,不提供 ++ 操作符?
在 C/C++/Java 等等语言中,整型变量的自增或自减操作是标配,它们又可分为前缀操作(++i 和 --i)与后缀操作(i++ 和 i--),彼此存在着一些细微差别,各有不同的用途. 这些语言的使 ...
- PHP丨PHP基础知识之数据类型
PHP的数据类型主要有三大种:(细分的话8小种) 一.标量数据类型 标量数据类型包括以下几种: (1)BOOLEAN:布尔型 布尔变量是PHP变量中最简单的: 它保存一个TRUE或者FALSE值: 其 ...
- 9、ssh的集成方式1
集成方式1:核心 我们没有创建applicationContext-action.xml配置文件,在该配置文件里面让Spring去管理我们的AddUserAction,但是AddUserAction的 ...
- 深入理解JVM(③)虚拟机的类加载过程
前言 上一篇我们介绍到一个类的生命周期大概分7个阶段:加载.验证.准备.解析.初始化.使用.卸载.并且也介绍了类的加载时机,下面我们将介绍一下虚拟机中类的加载的全过程.主要是类生命周期的,加载.验证. ...
- JavaScript基础正则表达式的字面声明(012)
不出所料,正则表达式也是JavaScript的一种对象.构造正则表达式也有两种,一种是使用JavaScript内置的 new RegExp() 构造函数,另一种是我们推荐的字面声明方式: // reg ...
- js进度条
第一步//====================.wrap,.circle,.percent{ position: absolute; ...