js 封装ajax方法吗,类似jQuery的原生JS封装的ajax方法

一，前言：

前文，我们介绍了ajax的原理和核心内容，主要讲的是ajax从前端到后端的数据传递的整个过程。

真正的核心就是这段代码：

var xhr = new XMLHTTPRequest();

xhr.open("method", "url", "async");

xhr.send(null);

xhr.onreadystatechange = function(){

if(xhr.readystate == 4){

if(xhr.status == 200){

console.log(xhr.responseText)

}

}

}

一个对象(XMLHTTPRequest对象)、

两个方法(包括open("method", "url", "async")方法和send(content)方法)、

三个属性(readystate表示当前请求状态，status表示http请求状态码，responseText表示服务器反馈内容)，

当然还有一个事件——onreadystatechange ，是在readystate状态改变时触发的事件。具体的内容请点击链接Ajax工作原理。

二，正文：

先来看看jQuery中Ajax方法的使用：

$.ajax({

type: "GET", 　　//访问服务器的方式，GET/POST

url: "test.json", 　　//url表示访问的服务器地址

data: {username: "",

content: ""}, 　　　 //data表示传递到后台的数据，使用键值对形式传递

async: true, 　 //true表示异步，false表示同步

success: function(data){

console.log(data)

},

error: function(err){

console.log(err)

}

});

那么我们想要封装成类似JQuery的形式，供调用，怎么办呢？

function $Ajax(opt){

opt = opt || {};

opt.type = opt.type || "post";

opt.url = opt.url || "";

opt.async = opt.async || true;

opt.data = opt.data || null;

opt.success = opt.success || function(){};

opt.error = opt.error || function(){};

var xhr = new XMLHTTPRequest();

var params = {};

for(var key in opt.data){

params.push(key + "=" + opt.data[key]);

}

var sendData = params.join("&");

if(opt.type.toUpperCase() == "GET"){

xhr.open(opt.type, opt.url + "?" + sendData, opt.async);

xhr.send(null);

}else{

xhr.open(opt.type, opt.url, opt.async);

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");

xhr.send(sendData);

}

xhr.onreadystatechange = function(){

if(xhr.readystate == 4){

if(xhr.status == 200){

opt.success && opt.success(xhr.responseText);

}else{

opt.error && xhr.error(xhr.status);

}

}

}

}

已经封装好了，接下来就是调用了，就像jQuery那样使用就行：

$Ajax({

type: "GET",

url: "test.json",

data: {username: "", content: ""},

async: true,

success: function(responseText){

console.log(responseText)

},

error: function(status){

console.log(status)

}

});

二，结语：

已经很晚了，没有进行测试，也没有详细进行注释，有时间再完善吧。

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

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

使用原生JS封装一个ajax

function ajax(data){ //第一步,创建XHR对象 var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpReque ...

原生JS封装ajax方法

http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...

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

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

通过游戏认识 --- JQuery与原生JS的差异

前言 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架).jQuery设计的宗旨是“write ...

ThinkPHP 中使用 IS_AJAX 判断原生 JS 中的 Ajax 出现问题

问题: 在 ThinkPHP 中使用原生 js 发起 Ajax 请求的时候.在控制器无法使用 IS_AJAX 进行判断.而使用 jQuery 中的 ajax 是没有问题的. 在ThinkPHP中.有一 ...

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

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

JavaWeb_Ajax通过JQuery和原生js异步传输数据

菜鸟教程 传送门 AJAX 优点:在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容 XMLHttpRequest 对象 传送门 (一) [JQuery]定时发送ajax请求 (二) ...

原生JS封装简单动画效果

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

随机推荐

Swift泛型协议的N种用法

They said "you should learn a new language every year," so I  learned Swift. Now  I  learn ...

iOS 轻量级的数据库leveldb

轻量级的数据库leveldb https://github.com/google/leveldb 一:在iOS下编译leveldb 终端: 1: git clone https://github.co ...

hdu----(2222)Keywords Search(trie树)

Keywords Search Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

傅里叶变换：MP3、JPEG和Siri背后的数学

九年前,当我还坐在学校的物理数学课的课堂里时,我的老师为我们讲授了一种新方法,给我留下了深刻映像.我认为,毫不夸张地说,这是对数学理论发现最广泛的应用.应用的领域包括:量子物理.射电天文学.MP3和J ...

Android布局中的空格以及占一个汉字宽度的空格的实现

在Android布局中进行使用到空格,以便实现文字的对齐.那么在Android中如何表示一个空格呢? 空格:  窄空格:  一个汉字宽度的空格:   [用两个空格(  )占一个汉字的宽度时,两个空格比 ...

window.location.href("url") 无法在chrome和Firefoxz中使用

今天在js代码中加了一句window.location.href(‘url’)希望实现页面的跳转,IE中可以正常使用,但是Firefox却提示window.location is not a func ...

[转]OpenShift 集群搭建指南

转自:http://www.cnblogs.com/zhangning/p/7251810.html OpenShift 集群搭建指南 v1.0 搭建Hyper-v虚拟机或物理机 配置物理机静态IP, ...

Linux下的计划任务at，batch，crontab

0x00前言: 继上次的windows计划任务后,拓展研究下linux下的计划任务,能够执行计划任务有3个命令at,batch,crontab 所谓的计划任务就是定时启动某个程序,可以是一组shell ...

docker 支持ipv6 (核心要点是ndp需要把docker内的ip全部加入到ndplist中来)

IPv6 with Docker Estimated reading time: 10 minutes The information in this section explains IPv6 wi ...

apt-get 使用指南

# apt-get update——在修改/etc/apt/sources.list或者/etc/apt/preferences之後运行该命令.此外您需要定期运行这一命令以确保您的软件包列表是最新的. ...