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封装十字参考线插件(一)
		
需求来源: 拓扑图之机房平面图,显示机房长宽比例尺,房间内标注各种设备间距不易实现,特在机房平面图上层加一个十字参考线 横竖两条线垂直,在鼠标指针处交叉,显示鼠标指针坐标(相对机房平面图的坐标,不是相 ...
 
随机推荐
- 通过el-tree 实现每次可选中一个节点方案(非checkbox)
			
<el-tree v-if="orgDrawer" :data="orgTree" size="medium" ref="o ...
 - Andrew Ng - 深度学习工程师 - Part 2. 改善深层神经网络:超参数调试、正则化以及优化(Week 2. 优化算法)
			
===========第2周 优化算法================ ===2.1 Mini-batch 梯度下降=== epoch: 完整地遍历了一遍整个训练集 ===2.2 理解Mini-bat ...
 - Mysql Workbench中EER Diagram逆向生成表
			
选择链接 选择需要生成的表
 - JavaScript 集合基本操作
			
参考 MDN 集合 Array 1. 2种创建数组的方式 var fruits = [] ; var friuits = new Array(); 2. 遍历 fruits.forEach(funct ...
 - 处理TortoiseGit一直弹出密码框的方法 -输入git@XXXX.com的密码
			
问题 :在push和pull的时候,一直都弹出这个框 1.开始处搜索TortoiseGit文件夹,找到其中的“PuTTYgen”文件,如下显示 2.运行之后在弹出的窗口中点击下方的“Generate” ...
 - SpringMVC 学习笔记(7)spring和springmvc的整合
			
58. 尚硅谷_佟刚_SpringMVC_Spring整合SpringMVC_解决方案.avi 解决办法让springmvc值扫描@Control控制层和@ControllerAdvice对应的异常处 ...
 - Spring和Springboot相关知识点整理
			
简介 本文主要整理一些Spring & SpringBoot应用时和相关原理的知识点,对于源码不做没有深入的讲解. 1. 思维导图 右键新窗口打开可以放大. 说明 使用@Configurati ...
 - laravel --- composer install之后,项目没有vender目录
			
composer install之后,项目没有vender目录 1. 原因一:PHP版本过低 PHP版本需要7.1以上,目前使用的是7.0.23
 - 关于对Entity Framework 3.1的理解与总结
			
Entity Framework Core 是一个ORM,所谓ORM也是ef的一个框架之一吧,简单的说就是把C#一个类,映射到数据库的一个表,把类里面的属性映射到表中的字段.然后Entity Fram ...
 - JavaScript基础函数的属性:记忆模式(019)
			
函数在Javascript里是有属性的,因为它们是一种特殊对象.事实上,就算是没有明确声明,函数在最初就已经包含了一些固有的属性,比如所有函数都length这个属性,它可以指出函数声明了多少个参数: ...