原生js实现ajax请求封装,类似于jquery的操作

时间: 2017-10-19阅读: 1604标签: 封装

js实现ajax的原理:通过XMLHttpRequest对象向服务器发送异步请求,从服务器获得数据,然后使用js操作DOM更新数据。该对象是ajax的核心机制,他是在IE5中首先引入的,是一种支持异步请求的技术。通过ajax可以及时的向服务器提出请求和处理响应,而不阻塞用户,达到无刷新更新部分页面的效果。

XMLHttpRequest这个对象的属性有
    onreadystatechange 每次状态改变所触发事件的事件处理程序;
    responseText 从服务器进程返回数据的字符串形式;
    responseXML 从服务器进程返回的DOM兼容的文档数据对象;
    status 从服务器返回的数字代码,常见的200(客户端请求成功,已就绪)和404(请求资源不存在)
    statusText 伴随状态码的字符串信息 (eg:200 OK)

readyState 对象状态值
    0(未初始化状态)对象已建立或已被abort()方法重置,尚未调用open方法。
    1(初始化状态)open()方法已经调用,但是send()方法为调用。请求还没有被发送。
    2(发送数据)send()方法法以调用,HTTP请求已发送到Web服务器。未接收到响应。
    3(数据传送中)所有响应头部都已经接收到。响应体开始接受但未完成。
    4(完成加载)HTTP响应已经完全接收。

代码实现
var _url=www.***.com;//请求地址
function ajax(conf) { //ajax封装,url参数必填,
	var url=conf.url.indexOf('http://')>=0 || conf.url.indexOf('https://')>=0?conf.url:(_url+conf.url);
	var data=conf.data;
	var send_data=[];//封装后的数据
	var async=conf.async!=undefined ? conf.async : true;// ture为异步请求 
	var type=conf.type || 'get';
	var dataType=conf.dataType || 'json';
	var contenType =  conf.contenType || 'application/x-www-form-urlencoded';
	var beforeSend=conf.beforeSend;//post请求头部
	var success=conf.success;
	var error=conf.error;	
	if(data==null){
		send_data="";
	}else if( typeof data=="object"){//如果data是对象,转换为字符串
		for (var k in data){
			//send_data.push(k + '=' + data[k]);
			send_data.push(encodeURIComponent(k) + '=' + encodeURIComponent(data[k]));
 		}
		send_data=send_data.join('&');
	}
	var xhr=""; // 创建ajax引擎对象
	try {
		xhr=new ActiveXObject("microsoft.xmlhttp"); //IE内核系列浏览器
	}catch(e1){
		try {
			xhr=new XMLHttpRequest(); //非IE内核浏览器
		}catch(e2){
			if(error!=null){error("您的浏览器不支持ajax!请更换!");}
		}
	}
	if(type=="get"){	
		xhr.open(type, url+'?'+send_data, async);
		xhr.send(null);
	}else{//post,put,delete等请求

                xhr.open(type, url, async); 
		xhr.setRequestHeader("content-type", contenType);
		if(beforeSend!=null && beforeSend!=undefined){
			beforeSend(xhr);
		}
		xhr.send(send_data);
    }
	xhr.onreadystatechange=function() {
		if(xhr.readyState==4){
			if(xhr.status>=200 && xhr.status<300){
				if(dataType=="text" && success!=null){
					success(xhr.responseText);
				};
				if(dataType=="xml" && success!=null){
					success(xhr.responseXML);
				};
				if(dataType=="json" && success!=null){
					success(eval("(" + xhr.responseText + ")")); //将json字符串转换为js对象  
				};
			}else{
				if(error!=null){error("通讯失败!请联系网站管理员,错误代码:"+xhr.status);}
			}
		}
	};
},
使用方法
ajax({
	url:'',//地址
	type:'post',//方式
	data:{},//数据
	success:function(r){
		
	},
	error:function(r){
		
	}
});



吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/3

原生JS实现动画函数的封装

封装了一个JS方法,支持元素的基本动画:宽、高、透明度...等,也支持链式动画和同时运动。获取元素的属性的函数并进行了兼容性处理:

ant design vue 表格a-table二次封装,slots渲染问题

目的就是对a-table进行二次封装,但是在如何显示a-table的slot时遇到了问题,原本想法是在a-table内把$slots都渲染,期望在使用该组件时能正确渲染,然而。。。并不会正确渲染

JS封装getScroll函数 & 案例:固定导航栏

封装getScroll函数:1. 获取页面向上或者向左卷曲出去的距离的值,2. 浏览器的滚动事件。固定导航栏获取scrollTop值后判断高度大于导航栏的高,就设置样式固定住

JS多态封装继承

JS是一种基于对象的语言,在JS中几乎所有的东西都可以看成是一个对象,但是JS中的对象模型和大多数面向对象语言的对象模型不太一样,因此理解JS中面向对象思想十分重要,接下来本篇文章将从多态、封装、继承

JS防抖函数、节流函数工具类封装

当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次, 如果设定时间到来之前,又触发了事件,就重新开始延时。也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于既定时间

使用Promise封装小程序wx.request

现在尝试把wx.request简单的封装了一下,调用一个request方法,每次请求自动携带header头信息,这样就省事多了,包含了常见的get post put delete 四种请求方法,支持Promise方式调用。

原生js实现ajax的封装

ajax 的全称是Asynchronous JavaScript and XML,简单理解下:ajax就是异步的js和服务端的数据;GET请求的数据会附在URL之后, 以 ? 分割URL和传输数据, 参数之间以 & 相连

JQuery组件封装之return this.each(function () {});

这个时候就要说each了,还是之前的,倘若页面上有N个class为div的元素呢,即:this.length>1,这里each就必然要上场了,且每个对象都要返回,所以此段代码无疑是最方便的写法了

微信和支付宝中的一些常用方法封装

最近做了同一个样子的小程序的支付宝版本,现在如果想想是开发两次的话心里应该是很难受的。去年11月12月份左右开发了两个微信小程序是一个在超市买商品的,一个用户版本,一个商户版本的。我们团队看到了uniapp这个东西

关于那些变化万千,开箱即用的 Promise 高度封装方法

在日常开发中,我们少不了使用 Promise,而透过封装抽象方法,可以避免造轮子,写出更加优雅的代码。例如:将任意函数,化为具有异步能力的函数、改装成具有并发上千万请求的函数、使用 Web Worker 来使用不同线程、暂停若干秒再继续

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全