使用原生JS封装一个ajax
function ajax(data){
//第一步,创建XHR对象
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();//标准的浏览器
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');//万恶的IE浏览器
}
//第二步,准备发送前的一些配置文件
var type = data.type == 'get' ? 'get' : 'post';
var url = '';
if(data.url){
url = data.url;
if(type == 'get'){
url += "?" + data.data + "&_t + new Date().getTime();
}
}
var flag = data.asyn == 'true' ? 'true' : 'false';
xhr.open(type,url,type);
//第三步,执行发送的动作
if(type == 'get'){
xhr.send(null);
}else{
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(data.data);
}
//指定回掉函数
xhr.onreadystatechange = function(){
if(this.readyState == 4){
if(this.status == 200){
if(typeof data.success == 'function'){
var d = data.dataType == 'xml'?xhr.responseXML:xhr.responseText;
data.success(d);
}
}else{
if(typeof data.failure == 'function'){
data.failure();
}
}
}
}
}
其中传入的data属性为:
data={
data:"",
dataType:"xml/json",
type:"get/post",
url:"",
asyn:"true/false",
success:function(){},
failure:function(){}
}
使用原生JS封装一个ajax的更多相关文章
- 使用原生JS封装一个动画函数
最近一直在忙项目,很少有时间回顾之前的知识,今天刚好要做一个轮播,因为对兼容性有一定的要求,使用了各种插件和库中的轮播,效果都不是很理想,一怒之下,使用原生JS封装了一个轮播组件,其中重要的功能就是一 ...
- 类似jQuery的原生JS封装的ajax方法
一,前言: 前文,我们介绍了ajax的原理和核心内容,主要讲的是ajax从前端到后端的数据传递的整个过程. Ajax工作原理和原生JS的ajax封装 真正的核心就是这段代码: var xhr = ne ...
- JS21. 使用原生JS封装一个公共的Alert插件(HTML5: Shadow Dom)
效果预览 Shadow DOM Web components 的一个重要属性是封装--可以将标记结构.样式和行为隐藏起来,并与页面上的其他代码相隔离,保证不同的部分不会混在一起,可使代码更加干净.整 ...
- 原生JS封装ajax方法
http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- 原生JS封装创建多级菜单函数
手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构 废话不多说,展示代码. ...
- ThinkPHP 中使用 IS_AJAX 判断原生 JS 中的 Ajax 出现问题
问题: 在 ThinkPHP 中使用原生 js 发起 Ajax 请求的时候.在控制器无法使用 IS_AJAX 进行判断.而使用 jQuery 中的 ajax 是没有问题的. 在ThinkPHP中.有一 ...
随机推荐
- WaitType:SOS_SCHEDULER_YIELD
今天遇到一个query,处于SOS_SCHEDULER_YIELD 状态,physical IO 不增加,CPU的使用一直在增长.当一个sql query长时间处于SOS_SCHEDULER_YIEL ...
- Myeclipse 安装SVN步骤
非在线安装 首先来这儿下载插件 http://subclipse.tigris.org/servlets/ProjectDocumentList?folderID=2240 找个最新的下载 解压到对应 ...
- py2exe使用中遇到的几个问题
问题: 在使用py2exe对所写的python脚本打包成.exe可执行程序时,遇到两个问题: 问题1: RuntimeError: maximum recursion depth exceeded w ...
- 详解 ML2 Core Plugin(I) - 每天5分钟玩转 OpenStack(71)
我们在 Neutron Server 小节学习到 Core Plugin,其功能是维护数据库中 network, subnet 和 port 的状态,并负责调用相应的 agent 在 network ...
- php左侧分类列表显示菜单
<!DOCTYPE> <html> <head> <meta http-equiv="content-type" content=&quo ...
- ZOJ Problem Set - 1048 Financial Management
我承认这是一道水的不能再水的题,今天一下就做到了,还是无耻的帖上来吧 #include <stdio.h> int main() { double sum=0; for(int i=1;i ...
- Cesium原理篇:4Web Workers剖析
JavaScript是单线程的,又是异步的,而最新的HTML5中,通过Web Workers可以在JS中支持多线程开发.这是几个意思?异步还是单线程,这怎么理解?Web Workers又是什么原理?实 ...
- [mysql]支持emoji(字符集问题)
问题的根源 主要问题就是在字符集,一般解决这种问题都是靠试验.我实验了一通,得出的结论和大家分享一下(如有错误,还望指正): 数据库的字符集 数据库连接的字符集 配置方法 设置数据库的字符集为utf8 ...
- 关于一道PHP面试题的解法
参照一个int型数组,如int[] a1=new int[]{10,9,10,20,15,3,9,8,7,1,1},编写一个方法,要求输出不重复,且降序的拼接字符串(连接字符用逗号),如上数组,输出的 ...
- SEO技巧之WordPress篇幅
随着搜索引擎大兴, 排列在前的网站引入大量流量. 无论是搜索页面的广告还是查出来的结果, 与搜索者的目标匹配度都比较高 (如果搜索引擎足够智能), 所以通过搜索引擎而来的访客很可能会从网站上得到他想要 ...