【转】封装原生JS实现Ajax
function createXHR() {
if (window.XMLHttpRequest) {
//IE7+、Firefox、Opera、Chrome 和Safari
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
//IE6 及以下
var versions = ['MSXML2.XMLHttp','Microsoft.XMLHTTP'];
for (var i = 0,len = versions.length; i<len; i++) {
try {
return new ActiveXObject(version[i]);
break;
} catch (e) {
//跳过
}
}
} else {
throw new Error('浏览器不支持XHR对象!');
}
} var xhr = createXHR(); //创建XHR对象
//封装ajax,参数为一个对象
function ajax(obj) {
var xhr = createXHR();
//创建XHR对象 //通过使用JS随机字符串解决IE浏览器第二次默认获取缓存的问题
obj.url = obj.url + '?rand=' + Math.random();
obj.data = params(obj.data); //通过params()将名值对转换成字符串
//若是GET请求,则将数据加到url后面
if (obj.method === 'get') {
obj.url += obj.url.indexOf('?') == -1 ? '?' + obj.data : '&' + obj.data;
} if (obj.async === true) {
//true表示异步,false表示同步
//使用异步调用的时候,需要触发readystatechange 事件
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
//判断对象的状态是否交互完成
callback(); //回调
}
};
}
//在使用XHR对象时,必须先调用open()方法,
//它接受三个参数:请求类型(get、post)、请求的URL和表示是否异步。
xhr.open(obj.method, obj.url, obj.async);
if (obj.method === 'post') {
//post方式需要自己设置http的请求头,来模仿表单提交。
//放在open方法之后,send方法之前。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(obj.data); //post方式将数据放在send()方法里
} else {
xhr.send(null);//get方式则填null
}
if (obj.async === false) {
//同步
callback();
} function callback() {
if (xhr.status == 200) {
//判断http的交互是否成功,200表示成功
obj.success(xhr.responseText); //回调传递参数
} else {
alert('获取数据错误!错误代号:' + xhr.status + ',错误信息:' + xhr.statusText);
}
}
} //名值对转换为字符串
function params(data) {
var arr = [];
for (var i in data) {
//特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理
arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
}
return arr.join('&');
}
使用方式:
ajax({
method : 'post',
url : 'demo.php',
data : {
'name' : 'JR',
'age' : 22
},
success : function (message) {
alert(message);
},
async : true
});
【转】封装原生JS实现Ajax的更多相关文章
- javascript - 封装原生js实现ajax
1 /* * ajax方法 */ var Ajax = function() { var that = this; //创建异步请求对象方法 that.createXHR = function() { ...
- Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
- 原生js实现ajax封装
一.什么是ajax? 定义:Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并 ...
- 原生js中用Ajax进行get传参
原生js中用Ajax进行get传参 案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- 原生js写Ajax
//原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...
- 用原生JS实现AJAX和JSONP
前端开发在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的.其实,原生 ...
- 原生js实现Ajax
一般来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢? JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataT ...
- 表单验证--通过原生js模仿ajax的异步交互
今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...
- 原生JS实现Ajax及Ajax的跨域请求
前 言 如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...
随机推荐
- input输入
只能输入数字onkeyup='this.value=this.value.replace(/\D/gi,"")'限制文本框只能输入正数,小数onkeyup="value= ...
- 信贷业务(Ali)
1.信贷业务视角 信贷业务主要有两个视角,借款人和出资机构.借款人关心借多少钱,还多少钱,多少利息:机构关心信贷资产风险,收益. 领域模型上两个视角分开:个人--->账单.机构--->资产 ...
- Java基础知识笔记(五:多线程的同步问题)
编写多线程程序往往是为了提高资源的利用率,或者提高程序的运行效率,或者更好地监控程序的运行过程等.多线程同步处理的目的是为了让多个线程协调地并发工作.对多线程进行同步处理可以通过同步方法和同步语句块实 ...
- windows7 x64下maven安装和配置
http://maven.apache.org/download.cgi下载maven 环境配置 验证配置是否成功 本地仓库配置 这是原来的配置文件: 更改为: link 离线安装 eclipse m ...
- Date小技巧:set相关操作及应用_获取当前月(季度/年)的最后一天
set操作还是有不少的,具体见 http://www.w3school.com.cn/jsref/jsref_obj_date.asp, 今天我就只说 setFullYear, setMonth, s ...
- 谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo
前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...
- 【shadow dom入UI】web components思想如何应用于实际项目
回顾 经过昨天的优化处理([前端优化之拆分CSS]前端三剑客的分分合合),我们在UI一块做了几个关键动作: ① CSS入UI ② CSS作为组件的一个节点而存在,并且会被“格式化”,即选择器带id前缀 ...
- Parcelable序列化的使用,关于intent.getParcelableArrayExtra的使用
Parcelable相较于Serializable的效率更高 public class ChargeMode implements Parcelable{ public String name; pu ...
- 基于Python+Django的Kubernetes集群管理平台
➠更多技术干货请戳:听云博客 时至今日,接触kubernetes也有一段时间了,而我们的大部分业务也已经稳定地运行在不同规模的kubernetes集群上,不得不说,无论是从应用部署.迭代,还是从资源调 ...
- 机器学习实战笔记(Python实现)-04-Logistic回归
--------------------------------------------------------------------------------------- 本系列文章为<机器 ...