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封装十字参考线插件(一)
需求来源: 拓扑图之机房平面图,显示机房长宽比例尺,房间内标注各种设备间距不易实现,特在机房平面图上层加一个十字参考线 横竖两条线垂直,在鼠标指针处交叉,显示鼠标指针坐标(相对机房平面图的坐标,不是相 ...
随机推荐
- 【uni-app】uni.request二次封装,更好的管理api接口和使用
前言 之前写了一个Vue.js的axios二次封装(点击跳转),这次是uni-app,uni-app是基于vue.js框架的,我觉得是很好用的一个框架,而且一套代码编译那么多平台,非常节省成本,当然, ...
- 终于搞明白Unicode,ASCII,UTF8,UCS2编码是啥了
[本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究.若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!] 前言 本文起因于 ...
- nmap二层发现
使用nmap进行arp扫描要使用一个参数:-sn,该参数表明屏蔽端口扫描而只进行arp扫描. nmap支持ip段扫描,命令:nmap -sn 192.168.1.0/24 nmap速度比arping快 ...
- 深入理解RocketMQ(一)---阅读源码准备
本文主要描述使用Idea获取rocketMQ源码及源码的读取. 在演示搭建源码环境前,先简要描述一下RocketMQ的设计目标. 1.架构模式 和大多数消息中间件一样,采用的是发布订阅模式,基本组件包 ...
- 不就是语法和长难句吗—笔记总结Day4
第六课 英语的特殊结构 1.强调句型 It is...that / who / which(少见)... * 强调句型可以强调句子中所有成分(唯一不能强调谓语)* It is obviously t ...
- ionic2/Angularjs cordova node.js
ionic 和 cordova 的区别 环境的搭建{node.js,jdk1.8/jdk1.7,android sdk,intellijIdea,ionic,cordova} nodejs+ionic ...
- Django项目中集成第三方登录时出现的错误
原以为是被反爬 没想到 总结:这里的http应该是https协议,以后要更加小心 了,不能犯这种低级错误
- Oracle查询表空间使用率很慢
Oracle查询表空间使用率很慢 问题描述 执行查询表空间的语句,需要接近2min的时间才能执行完成. 以前也在其他客户的生产库遇到过一样的情况,当时是由于回收站的内容过多引起的. 不过这次的情况却不 ...
- Python3笔记004 - 2.1 python的语法特点
第2章 python语言基础 python语法特点 保留字与标识符 变量 数据类型 运算符 输入和输出 2.1 python的语法特点 2.1.1 注释 注释的内容将被python解释器忽略,并不会在 ...
- Wooden Stricks——两个递增条件的线性DP
题目 一堆n根木棍.每个棒的长度和重量是预先已知的.这些木棒将由木工机械一一加工.机器需要准备一些时间(称为准备时间)来准备处理木棍.设置时间与清洁操作以及更换机器中的工具和形状有关.木工机械的准备时 ...