直接上代码

//封装的ajax函数
// 传一个对象,所有要用的参数都在对象中 因为不写对象 实参列表个数太多,所以像jq一样,调用ajax也是把对象当实际参数传进去
// type 请求方式 默认get
// url 请求地址 这个必须要有,没有直接 return 后面都不需要判断
// async 是否异步 如果不传默认是true true是异步,false是同步 很鸡肋,既然用了ajax一般都是异步
//data : 对象的形式 用对象包裹,jq中提供了表单序列化 $(表单).serialize() 得到所以表单的键值对字符串 
//success :成功的回调函数 有参数 
//error: 失败的回调函数
// dataType: 值:xml/json/text
 
以下为代码部分: 
function ajax(options){
//如果没传参数,获取传的不是对象,那么直接return
if(!options || typeof options !== 'object'){
return;
}
var type = options.type;
var url = options.url;
//如果没有传url则直接return
if(!url){
return;
}
//获取async参数,并且做判断是否异步
var async = options.async === false ? false : true;
//由于传入的参数变成了对象,所以需要把对象转换成字符串
var params = getParams(options.data);
//1. 创建实例
var xhr = new XMLHttpRequest();
 
//增加的功能,如果不传或者传的是其他的不符合要求的就用get请求,如果传post就用post请求
type = type === 'post' ? 'post' : 'get';
// 2. 设置请求行
//判断是否是get请求,如果是get请求要拼接参数
if(type === 'get'){
url += '?' + params;
params = null;
}
xhr.open(type, url, async);
// 3. 设置请求头 post才设置
if(type === 'post'){
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
}
 
// 4. 发送请求
// if(type === 'get'){
// xhr.send();
// }else{
// xhr.send(params);
// }
 
xhr.send(params);
// 5. 监听响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
//根据dataType去做对应的处理,保证在成功的回调函数中,拿到处理后的数据
if(options.dataType === 'json'){
var result = JSON.parse(xhr.responseText);
}else if(options.dataType === 'xml'){
var result = xhr.responseXML;
}else{
var result = xhr.responseText;
}
//成功了
// 调用success的回调函数
//如果没传成功的回调函数,那么就不应该调用
options.success && options.success(result);
}else{
//失败了
options.error && options.error();
}
}
}
}
//函数的作用: 将对象转成键值对形式的字符串
//这里是原生js,所以需要封装函数将参数对象里的data数据转成字符串格式提交给后台 jq就比较方便了serialize()
function getParams(obj){
if(!obj){
return;
}
var arr = [];
for(var k in obj){
arr.push(k +'=' + obj[k]);
}
return arr.join('&');
}
结尾 var $ = {
  ajax:function(){}
}
$.ajax();是不是很像?哈哈哈

原生js封装ajax,深入理解$.ajax()的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  8. 原生Js封装的动画类

    算法用的是Tween类,需要研究的参考这篇文章: http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html 网页里常用的动画 放大 ...

  9. 用原生js封装轮播图

    原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...

  10. 使用原生JS封装一个动画函数

    最近一直在忙项目,很少有时间回顾之前的知识,今天刚好要做一个轮播,因为对兼容性有一定的要求,使用了各种插件和库中的轮播,效果都不是很理想,一怒之下,使用原生JS封装了一个轮播组件,其中重要的功能就是一 ...

随机推荐

  1. DSP、Media、AdExchanger之间的关系及交互流程

    广告商,如以下的樱花日语,淘宝卖家.其须要推广自己的产品. Zampdsp(晶赞) 是DSP平台.其与非常多广告商合作,广告商在平台上公布广告创意,并托付平台代为投放. tanx.com 是adExc ...

  2. codeforces #262 DIV2 B题 Little Dima and Equation

    题目地址:http://codeforces.com/contest/460/problem/B 这题乍一看没思路.可是细致分析下会发现,s(x)是一个从1到81的数,不管x是多少.所以能够枚举1到8 ...

  3. "Hello World " —— 深入理解程序从编译到执行

    对于C语言编写的Hello World程序(例如以下).对于程序猿来说肯定如雷贯耳,就是这样一个简单的程序,你真的了解她吗? #include <stdio.h> int main() { ...

  4. HTML网页之计算器代码

    计算器网页效果显示:点击这里! <script>  function show(){  var date = new Date(); //日期对象  var now = "&qu ...

  5. luogu2024 食物链

    题目大意 动物王国中有三类动物 A,B,C,这三类动物的食物链构成了有趣的环形.A 吃 B,B吃 C,C 吃 A.现有 N 个动物,以 1 - N 编号.每个动物都是 A,B,C 中的一种,但是我们并 ...

  6. Elasticsearch源码分析—线程池(十一) ——就是从队列里处理请求

    Elasticsearch源码分析—线程池(十一) 转自:https://www.felayman.com/articles/2017/11/10/1510291570687.html 线程池 每个节 ...

  7. BNUOJ ->Borrow Classroom(LCA)

    B. Borrow Classroom Time Limit: 5000ms Memory Limit: 262144KB 每年的BNU校赛都会有两次赛前培训,为此就需要去借教室,由于SK同学忙于出题 ...

  8. 洛谷P1077 摆花(背包dp)

    P1077 摆花 题目描述 小明的花店新开张,为了吸引顾客,他想在花店的门口摆上一排花,共m盆.通过调查顾客的喜好,小明列出了顾客最喜欢的n种花,从1到n标号.为了在门口展出更多种花,规定第i种花不能 ...

  9. mybatis一对多关系的关联查询

    问题描述:实现两张表的关联查询 学生表: 班级表: 要实现学生管理信息中有所在班级的名称,即如下图所示 1.对应学生表的pojo类写全班级表中的字段(适用于要连接的表字段较少的情况) sql语句直接在 ...

  10. A - Design Tutorial: Learn from Math(哥德巴赫猜想)

    Problem description One way to create a task is to learn from math. You can generate some random mat ...