封装原生ajax

 

function ajax(data) {
		// 封装就是为了抽取出公用的参数，也就是会发生变化的参数
		// data 有可能是一个对象  data = {
                                    //data:{username:"",password:""},
                                    //dataType:"xml/json",
                                    //type:"get/post",
                                    //url:"",
                                    //asyn:"true/false",
                                    //success: functiono(){},
                                    //failure:function() {}
                                    //}

		//1、创建对象
		var xhr = null;
		if (window.XMLHttpRequest) {
			xhr = new XMLHttpRequest();
		}else {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//2、准备阶段，配置参数
		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();
				//此处假设data数据传送的是一个字符串，而不是一个对象
				//"&_t=" +new Date().getTime();这是个时间窗，
                //每次获得的时间值是不一样的，那么链接后面的参数就会不一样
				// 这样就解决了get请求的缓存问题
                //（因为url一样的话，前台向后台请求的数据是一样的，当你数据库发生改变时，不会重新更新数据库）。
                //而加了时间窗，就把url路径每次都变得不一样了
			}
		}
		var asyn = data.asyn == "true" ? "true" : "false";
		xhr.open(type,url,asyn);

		//3、执行发送的动
		// xhr.send(null);
		if (type == "get") {
			xhr.send(null);
		}else if (type == "post") {
			//在post请求时，要对表单数据及提交的数据进行编码，不然后台得不到数据
			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			xhr.send(data.data);
		}


		//4、准备这状态值触发的时候发生的动作
		xhr.onreadystatechange = function() {
			if (this.readyState == 4) {
				if (this.status == 200) {
					if (typeOf data.success =='function') {
						var dataType = data.dataType == 'xml' ? xhr.responseXML : xhr.responseText;
						data.success(dtatType);
					}
				}else {
					if(typeOf data.failure == 'function') {
						data.failure();
					}
				}
			}
		}




	}