直接上代码

//封装的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. Skia图片解码模块流程分析

    我在在PPAPI插件中使用Skia画图中说能够在PPAPI插件内使用Skia来画图.这里面会有一个与色彩空间(像素格式)相关的问题.在那篇文章里我们在PPAPI中使用PPB_ImageData创建2D ...

  2. Oracle 自己主动内存管理 SGA、PGA 具体解释

    ASMM自己主动共享内存管理: 自己主动依据工作量变化调整 最大程度地提高内存利用率 有助于消除内存不足的错误 SYS@PROD>show parameter sga NAME          ...

  3. 以"小刀会“的成败论当今创业成败

    讲起"小刀会",熟悉的人或许非常熟悉,不熟悉的人或许根本不知道清末有这样一个组织. 依据翻查史料,最初的小刀会是在福建成立的,来源有两个.一个是天地会的分支,一个是白莲教分支. 而 ...

  4. Android中检測字符编码(GB2312,ASCII,UTF8,UNICODE,TOTAL——ENCODINGS)方法(一)

    package com.android.filebrowser;   import java.io.*; import java.net.*;   public class FileEncodingD ...

  5. 123D

    后缀数组+单调栈 看了好长时间,最后看了张神的程序才搞懂 意思就是求所有子串*n*(n+1)/2 n是子串出现次数 事实上,lcp可以看成宽度为1,高度为lcp值的长方形,所有lcp放在一起就是一堆长 ...

  6. Transaction count after EXECUTE indicates a mismatching number of BEGIN and COMMIT statements

    Transaction count after EXECUTE indicates a mismatching number of BEGIN and COMMIT statements 开始想写一个 ...

  7. JavaScript alert()函数的使用方法

    这里向大家简单介绍一下JavaScript alert()函数的使用,alert--弹出消息对话框,并且alert消息对话框通常用于一些对用户的提示信息. JavaScript alert()函数 a ...

  8. office 2010 破解

    使用Rearm命令激活延迟重置Office 20101.安装Offcie 2010 安装Offcie 2010,默认30天的试用期,这里要注意,上文提供的Office 2010是零售版,所以没有序列号 ...

  9. # --with-http_stub_status_module模块

    作用: 查看nginx的客户端状态 环境检测 nginx -V 查看nginx已经编译的模块中是否包含--with-http_stub_status_module 语法: 效果

  10. UML基本关系

    UML-Unified Model Language 统一建模语言,又称标准建模语言.是用来对软件密集系统进行可视化建模的一种语言.UML的定义包括UML语义和UML表示法两个元素. UML是在开发阶 ...