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封装十字参考线插件(一)
需求来源: 拓扑图之机房平面图,显示机房长宽比例尺,房间内标注各种设备间距不易实现,特在机房平面图上层加一个十字参考线 横竖两条线垂直,在鼠标指针处交叉,显示鼠标指针坐标(相对机房平面图的坐标,不是相 ...
随机推荐
- redis概要学习
redis 概要学习 redis简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis 与其他 key - value 缓存产品有以下三个特点: Re ...
- Nginx 如何自定义变量?
之前的两篇文章 Nginx 变量介绍以及利用 Nginx 变量做防盗链 讲的是 Nginx 有哪些变量以及一个常见的应用.那么如此灵活的 Nginx 怎么能不支持自定义变量呢,今天的文章就来说一下自定 ...
- Java架构师如何学习?
引言 古人云:"活到老,学到老."互联网算是最辛苦的行业之一,"加班"对工程师来说已是"家常便饭",同时互联网技术又日新月异,很多工程师都疲 ...
- CSV文件导入到数据库中读取数据详解(接着上个帖子)
一.controller层 二.SERVICE层 @Overridepublic Result importJinjiangAssessResult(MultipartFile file) throw ...
- [ C++ ] 勿在浮沙筑高台 —— 内存管理(1~8p)primitives(上)
C++ memory primitives(原语) new 若malloc失败会调用 int _callnewh(size_t t); 即调用用户设定的handler(回调函数指针),可用于内存回收防 ...
- Java WebService _CXF、Xfire、AXIS2、AXIS1_四种发布方式(优缺点对比)
xis,axis2,Xfire以及cxf对比 http://ws.apache.org/axis/ http://axis.apache.org/axis2/java/core/ http://xfi ...
- android 中IntentService的使用场景
IntentService是继承并处理异步请求的一个类,在IntentService内有一个工作线程来处理耗时操作,启动IntentService的方式和启动传统的Service一样,同时,当任务执行 ...
- Spring IoC bean 的创建(上)
前言 本系列全部基于 Spring 5.2.2.BUILD-SNAPSHOT 版本.因为 Spring 整个体系太过于庞大,所以只会进行关键部分的源码解析. 本篇文章主要介绍 Spring IoC 容 ...
- 入门大数据---Hive分区表和分桶表
一.分区表 1.1 概念 Hive 中的表对应为 HDFS 上的指定目录,在查询数据时候,默认会对全表进行扫描,这样时间和性能的消耗都非常大. 分区为 HDFS 上表目录的子目录,数据按照分区存储在子 ...
- yqq命令
用 apt-get install 安装时 ,会有一个提问,问是否继续,需要输入 yes.使用 yqq 的话,就没有这个提问了,自动 yes . 例如下面的更新和安装nginx: apt-get -y ...