/*
*
*create by royal in 2019/1/23
*
*royalAjax 自封装ajax函数
*
*paramsObj JSON类型参数
*require params:
* type : string
* url : string
* data : JSON
* success : function
*
*注:get无参请求时,data参数可以不写
*
*/
(function(){
function royalAjax(paramsObj){
//处理参数
if(paramsObj.type.toLowerCase()=='get'){
var arr=[];
for(var pro in paramsObj.data){
var str =pro+'='+paramsObj.data[pro];
arr.push(str);
}
var canshuStr = arr.join('&');
//将参数添加到url后
paramsObj.url +=paramsObj.url.indexOf('?')== -1
?'?'+canshuStr
:'&'+canshuStr;
}else if(paramsObj.type.toLowerCase()=='post'){
var formdata =new FormData();
for(var pro in paramsObj.data){
formdata.append(pro,paramsObj.data[pro]);
}
}else{
console.log("无效的请求类型!!");
} //准备xhr对象
var xhr = new XMLHttpRequest();
xhr.onreadystatechange =function(){
if(xhr.readyState==4){
if(xhr.status==200){
//请求回来后调用success
paramsObj.success(JSON.parse(xhr.responseText));
}
}
} //准备发送
xhr.open(paramsObj.type, paramsObj.url, true);
//发送请求
if(paramsObj.type.toLowerCase()=='get'){
xhr.send(null);
}else if(paramsObj.type.toLowerCase()=='post'){
xhr.send(formdata);
}else{
console.log("请求类型错误!");
}
}
window.royalAjax= royalAjax;
})();

自封装的AJAX的更多相关文章

  1. 先定一个小目标,自己封装个ajax

    你是否发现项目中有很多页面只用到了框架不到十分之一的内容,还引了压缩后还有70多kb的jquery库 你是否发现项目中就用了两三个underscore提供的方法,其他大部分的你方法你甚至从来没有看过 ...

  2. 封装的ajax请求

    在做登录注册这类提交表单数据时,我们经常需要局部刷新网页来验证用户输入的信息,这就需要用到ajax请求,我们通常需要获取表单中的数据,发起ajax请求,通过服务程序,与数据库的数据进行比对,判断信息的 ...

  3. 自己封装个ajax

    你是否发现项目中有很多页面只用到了框架不到十分之一的内容,还引了压缩后还有70多kb的jquery库 你是否发现项目中就用了两三个underscore提供的方法,其他大部分的你方法你甚至从来没有看过 ...

  4. 封装一个Ajax工具函数

    /*封装一个ajax工具函数*/ window.$ = {}; /*通过$定义一个ajax函数*/ /* * 1. type   string   请求的方式  默认是get * 2. url     ...

  5. 原生封装的ajax

    原生封装的ajax的代码如下: //将数据转换成 a=1&b=2格式; function json2url(json){ var arr = []; //加随机数防止缓存; json.t = ...

  6. 原生ajax与封装的ajax使用方法

    当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...

  7. 自己封装的AJAX (带JSON)

    最简单的封装的AJAX: function myajax(url,onsuccess,fail){ //确定是否支持xhr var xhr = new XMLHttpRequest ? new XML ...

  8. mui封装的ajax请求

    由于项目中引进MUI框架,所以就不需要引进jquery,但需要和后台交互时,常写为jquery格式:所以笔者觉得有必要将mui封装的ajax请求在这里提一下: 1,mui框架基于htm5plus的XM ...

  9. jQuery 封装的ajax

    jquery封装的ajax 具体操作: $.get(url  [,data]  [,fn回调函数]   [, dataType]); data:给服务器传递的数据,请求字符串 .json对象 都可以设 ...

  10. Jquery封装的ajax的使用过程发生的问题

    Jquery封装的ajax的使用过程发生的问题 今天在做项目的时候使用到了ajax来完成项目前后端数据交互,在之后发现在前端没有数据显示,而后端数据确实存在,在多次检查代码之后,发现代码并不存在问题, ...

随机推荐

  1. Gradle 安装(Windows)

    一.Gradle 简介 1.1 什么是 Gradle?   Gradle 是一个基于 Apache Ant 和 Apache Maven 概念的 项目自动化构建开源工具.它使用一种基于Groovy的D ...

  2. 一个经典的PHP文件上传类

    需求分析如下: (1)支持单个文件上传 (2)支持多个文件上传 (3)可以指定保存位置 可以设置上传文件允许的大小和类型 可以选择重命名和保留原名 <!-- 设计一个经典文件上传类 需求分析 ( ...

  3. POJ 2068 NIm (dp博弈,每个人都有特定的取最大值)

    题目大意: 有2n个人,从0开始编号,按编号奇偶分为两队,循环轮流取一堆有m个石子的石堆,偶数队先手,每个人至少取1个,至多取w[i]个,取走最后一个石子的队伍输.问偶数队是否能赢. 分析: 题目数据 ...

  4. Tree and Queries CodeForces - 375D 树上莫队

    http://codeforces.com/problemset/problem/375/D 树莫队就是把树用dfs序变成线性的数组. (原数组要根据dfs的顺序来变化) 然后和莫队一样的区间询问. ...

  5. ElasticSearch 全文检索— ElasticSearch概述

    ElasticSearch 产生背景 1.海量数据组合条件查询 2.毫秒级或者秒级返回数据 Lucene 定义 lucene是一个开放源代码的全文检索引擎工具包,但它不是一个完整的全文检索引擎,而是一 ...

  6. Hystrix核心基础 - 滑动窗口创建过程及demo

    前言 RxJava可能有些小伙伴没有听过是什么东西,可能是因为大家平时在做业务需求的时候对异步编程了解得比较少,而RxJava就是这么一个响应式编程框架,RxJava在安卓上面用得非常多,做安卓的朋友 ...

  7. Notepad++代码函数快速提示设置

    设置——首选项——自动完成

  8. JAVA 集合类小结

    一 集合和数组 因为本人也是个go的爱好者,所以对于集合类算是摸的比较透的. 说到集合,必须了解数组和集合. Java的数组长度固定,集合长度不定.集合是特定的数据结构的集合. 而go里面并没有集合, ...

  9. 小程序的switch组件

    小程序的switch开关组件,总结下大概有三种使用场景. 其一: 纯展示场景, 用来展示某个开关值是打开还是关闭的,这个场景比较简单,给个disabled属性就ok了: 其二: 用户点击后立即切换开关 ...

  10. 初识MAC(由window到mac的转变适应)

    * Windows上的软件可以拿到Mac上面安装吗? Windows上面的软件不能拿到Mac的操作系统上安装,除此之外,Windows里的 exe文件,在Mac下面也是无法运行的,要特別注意.如果你要 ...