不带注释的

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封装的更多相关文章

  1. 第110天:Ajax原生js封装函数

    一.Ajax的实现主要分为四部分: 1.创建Ajax对象 // 创建ajax对象 var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHtt ...

  2. ajax 原生js封装ajax [转]

    /* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @ ...

  3. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  4. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

  5. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  6. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

  7. 原生JS封装创建多级菜单函数

    手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构 废话不多说,展示代码. ...

  8. 基于原生JS封装数组原型上的sort方法

    基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...

  9. 原生js封装十字参考线插件(一)

    需求来源: 拓扑图之机房平面图,显示机房长宽比例尺,房间内标注各种设备间距不易实现,特在机房平面图上层加一个十字参考线 横竖两条线垂直,在鼠标指针处交叉,显示鼠标指针坐标(相对机房平面图的坐标,不是相 ...

随机推荐

  1. python中列表,元组,字符串 互相转换

    #-*-coding:utf-8-*- #1.字典dict = {'name': 'Zara', 'age': 7, 'class': 'First'} #字典转为字符串,返回:<type 's ...

  2. Domain Adaptive Faster R-CNN:经典域自适应目标检测算法,解决现实中痛点,代码开源 | CVPR2018

    论文从理论的角度出发,对目标检测的域自适应问题进行了深入的研究,基于H-divergence的对抗训练提出了DA Faster R-CNN,从图片级和实例级两种角度进行域对齐,并且加入一致性正则化来学 ...

  3. 原生PHP连接MySQL数据库

    <?php //1.连接数据库 // mysqli_connect('主机名','用户名','密码'); $link = @mysqli_connect('localhost','usernam ...

  4. IDEA2019版中文汉化包

    废话不多说,上才艺   E G M~~~~~ 2020版的IDEA大佬可以无视........ 1.打开IDEA文件目录 2.打开lib目录--将汉化版复制到该目录下 3.打开IDEA查看效果 高铁链 ...

  5. Win8.1安装配置64位Oracle Database 11g的详细图文步骤记录

    在开始Oracle数据安装之前建议:1.关闭本机的病毒防火墙.2.断开互联网. 这样可以避免解压缩丢失文件和安装失败. Step1 Oracle官网下载好Windows系统64位的安装包,下载速度慢的 ...

  6. SQL注入之注入点的寻找

    注入点的判断 判断一个链接是否存在注入漏洞,可以通过对其传入的参数(但不仅仅只限于参数,还有cookie注入,HTTP头注入等) 进行构造,然后对服务器返回的内容进行判断来查看是否存在注入点. 注入点 ...

  7. LeetCode57. 插入区间

    对于新插入的区间newInterval,原区间列表intervals可以分为三个部分: 左边与newInterval不重合的区间,这些区间直接加入结果数组中: 中间与newInterval重合的区间, ...

  8. JavaScript基础对象创建模式之链式调用模式(Chaining Pattern)(029)

    链式调用模式允许一个接一个地调用对象的方法.这种模式不考虑保存函数的返回值,所以整个调用可以在同一行内完成: myobj.method1("hello").method2().me ...

  9. docker 运行镜像

    docker run -e "环境变量=值“ --nam 别名 -v /etc/localtime:/etc/localtime:ro [时区保持跟宿主机器一致]-d -p 21021:80 ...

  10. Dubbo远程调用之公司内部提供的服务

    公司内部提供的服务 一家对外提供服务的公司,例如百度,腾讯,阿里,京东,58 同城等,公司内部有多个事业群,事业部门,每个事业部门内部又有若干个子部门,子部门里面有多个不同的小组负责各自的业务.提供对 ...