调用请求:

var obj = {
url:"", //url地址 例如:test.php
method:"", //get或post(大小写不限) 例如:get
async:true, //true:异步请求 false:同步请求 默认true
data:{ //所需要传输的数据(被注释内容为测试所用)
// name:"战斗机",
// age:20,
// husband:null,
// arr:["one","two","three"],
// dimensional:{
// bust:100,
// waist:60,
// hipline:90
// }
},
success:function (res) { //传输成功的回调函数
//console.log(res)
},
fail:function (res) { //失败的回调函数 }
}
myAjax(obj);

封装函数:

//myAjax()
function myAjax(obj) {
// 1.创建http请求
var xmlhttp;
if (window.XMLHttpRequest) {
//兼容IE7+,firefox,chrome, opera, safari
xmlhttp = new XMLHttpRequest();
}else{
//兼容IE6,IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 1.1声明变量
var fangShi = obj.method.toUpperCase();
var url = obj.url;
var async = true;
if(obj.async == false){
async = false;
}
console.log(async);
// 1.2遍历传输内容
var data = ""; //data内容重组
(function props(a){
for(var prop in a){
if (a.hasOwnProperty(prop)) {
// console.log(prop);
// console.log(a[prop]); if (a[prop] instanceof Object && !(a[prop] instanceof Array)) {
props(a[prop]);
}else{
// 遍历出来后如果不是对象则进行拼接
data += prop + "=" + a[prop] +"&";
}
}
} //for end
return data;
}(obj.data)) // 2.发起请求
if (fangShi == "GET") { //get请求
xmlhttp.open(fangShi, url + "?" + data, async);
xmlhttp.send();
}else if (fangShi == "POST") { //post请求
xmlhttp.open(fangShi, url, async);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(data);
}else{
alert("请求方式不在支持范围")
}
// 3.接受数据
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var resp = JSON.parse(xmlhttp.responseText);
obj.success(resp);
}else{
obj.fail(resp);
}
}
}

返回值的数据类型不够齐全,如有需要再做修改

封装简单的Ajax的更多相关文章

  1. jQuery-实现简单的Ajax请求封装

    封装的意义在于复用,在于减少重复的代码. 我在项目中做了简单的Ajax请求封装,实现方式如下: //封装Ajax请求 $.extend({ ajaxDirect:function(url,type,d ...

  2. jsonp其实很简单【ajax跨域请求】

    js便签笔记(13)——jsonp其实很简单[ajax跨域请求] 前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资 ...

  3. 通过简单的ajax验证是否存在已有的用户名

    首先来说说我对ajax的理解:简单地来说就是在不重新刷新页面的情况下,实现数据的调用获得更新. 我在这里介绍的是要过jquery封装好的ajax,大家可以去了解一下使用原生的XMLHttpReques ...

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

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

  5. 不借助jquery封装好的ajax,你能用js手写ajax框架吗

    不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); ...

  6. jQuery简单的Ajax调用示例

    jQuery确实方便,下面做个简单的Ajax调用: 建立一个简单的html文件: <!DOCTYPE HTML> <html> <head> <script ...

  7. 利用jQuery与.ashx完成简单的Ajax

    在ASP.NET同样可以与其它编程语言一样,利用前台的Ajax技术,只是需要注意的是,后台的处理程序不再是一个aspx页面中的Page_Load,而且ASP.NET独有的“一般处理程序”.ashx,下 ...

  8. 简单的Ajax实例

    由于刚刚接触Ajax,所以在网上搜了一下如何实现简单的Ajax,在此写下来,也方便自己以后学习 什么是Ajax? 通过在后台与服务器进行少量的数据交换,Ajax可以使网页实现异步更新,这意味着可以在不 ...

  9. JQ简单操作Ajax笔记

    JQ对ajax进行了封装,底层$.ajax().第二层是.load(),$.get(),$.post().第三层是$.getScript()和$.getJSON(). load(url selecto ...

随机推荐

  1. [转]Eclipse插件开发之基础篇(1) 插件开发的基础知识

    原文地址:http://www.cnblogs.com/liuzhuo/archive/2010/08/13/eclipse_plugin_1_0_2.html 名词翻译 有一些名词在翻译的过程中可能 ...

  2. 新MySQL查询和删除重复记录

    在工作中,我们经常会发现表中会存在重复数据,那么如何找出和删除这些数据呢? 下面,以一个小例子来说明: 1.创建学生表 1 CREATE TABLE student( 2 id INT PRIMARY ...

  3. (入门SpringBoot)SpringBoot项目事务(三)

    Spring声明式事务的使用:由@Transactional进行标注,可以使用在类和方法上.当标注在类上,类下面所有公共非静态的方法都将启用事务功能.接下来,运行事务注解标注的方法,Spring的事务 ...

  4. RC4 对称加密

    public class RC4 { byte[] s = new byte[256]; byte[] key; byte keylen;// 4 ~ 16 int pi = 0; int pj = ...

  5. 01-CSS3-justify-content: space-around; justify-content: space-between;

    /* justify-content: space-around; 运用在父级元素上 第一个子元素距离左边的距离==最后一个子元素距离右边的距离 除第一个子元素和最后一个子元素外,第2个,第3个... ...

  6. jqs实现图片轮播--通过点击按钮来实现

    <!-- 布局思路:一个大的div,中有一个ul.和一个箭头的div css样似描述: 整个盒子距离顶部100px,又水平居中 盒子的宽高为图片的实际宽高 由于每次都是看见了一张图片:有两种方式 ...

  7. 2.Python爬虫入门_requests

    #2019-11-23 #requests的api使用非常简单 import requests import time if __name__=='__main__': # get请求 url_get ...

  8. ACM-ICPC 2018 南京网络赛

    题目顺序:A C E G I J L A. An Olympian Math Problem 打表,找规律,发现答案为n-1 C. GDY 题意: m张卡片,标号1-13: n个玩家,标号1-n:每个 ...

  9. 【Eureka篇三】Eureka服务发现(4)

    注:该知识点并不是重点. 修改子模块:microservicecloud-provider-dept-8001 1. 修改DeptController @Autowired private org.s ...

  10. 检索式chatbot:

    小夕从7月份开始收到第一场面试邀请,到9月初基本结束了校招(面够了面够了T_T),深深的意识到今年的对话系统/chatbot方向是真的超级火呀.从微软主打情感计算的小冰,到百度主打智能家庭(与车联网? ...