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

时间: 2017-10-19阅读: 745标签: ajax

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){
		
	}
});



IE浏览器关于ajax的缓存机制

IE浏览器对于同一个URL只返回相同结果。因为,在默认情况下,IE会缓存ajax的请求结果。对于同一个URL地址,在缓存过期之前,只有第一次请求会真正发送到服务端。大多数情况下,我们使用ajax是希望实现局部刷新的

ajax请求 get与post的区别?_get和post的使用场景

使用Ajax时,采用Get或者Post方式请求服务器,那么它们的区别有哪些呢?相比post,get请求参数跟在url后面,提交数据的长度长度有限制,而且会被浏览器缓存起来,存在一定的安全问题。

使用AJAX实现文件拖拽上传功能详解

前端选择文件上传的两种方式:对话框选择方式上传、拖拽选择方式上传;如何上传获取到的文件?使用AJAX即可通过表单方式上传文件。

js 判断异步执行完成方法总汇,比如多个ajax执行完毕后执行其他方法

在多个异步操作中,由于不确定异步操作的执行顺序,如何判断异步操作在已经执行完成的情况下,再执行一个新的操作,有哪些方法可以实现?

Vue通过ajax获取数据,如何避免绑定的数据中出现 property of undefined错误

使用vue开发过程中,通过使用{{}}或者v-text=的形式进行数据绑定,如果数据是通过服务器异步获取的。在控制台我们会发现报这样的错误:Uncaught TypeError: Cannot read property name of null。通过v-if或者空对象来解决

js中关于ajax笔试面试题汇总

什么是ajax?Ajax包含下列技术,为什么要用ajax?Ajax应用程序的优势在于?Ajax的最大的特点是什么?请介绍一下XMLHTTPREQUEST对象?Ajax技术体系的组成部分有哪些?AJAX应用和传统Web应用有什么不同...