Ajax的封装

1、创建XMLHttpRequest对象
2、打开请求 open()
xhr.open(参数1,参数2,参数3);
参数1：请求类型（GET/POST）
参数2：请求的地址
参数3：是否异步 true表示异步，false表示同步
注：如果需要传参给后台，需要根据不同的请求类型来设置
如果是Post请求，请求地址不变
如果是Get请求，需要通过"?"将传递的参数拼接到请求地址后面
3、如果是Post请求，需要模拟表单提交
xhr.setRequestHeader(‘Content-Type’,‘application/x-www-form-urlencoded’);
4、发送请求 send()
xhr.send(参数);
参数：
如果是GET请求，参数直接设置在请求的路径之后，所以设置为null
如果是POST请求，有参数则设置参数，无参数则设置为null
5、接收响应
如果是同步请求请求
判断是否响应成功（status=200），得到响应结果
如果数异步请求，需要通过onreadystatechange事件，监听readyState的值变化
如果数据已经完全响应（readyState=4），则判断是否响应成功（status=200），得到响应结果

<script type="text/javascript">

var obj={
		
	method:"GET",
	url:"js/data.json?a=1",
	async:true,
	data:{
			
		uname:"zs",
		upwd:"13344"
	},
	success:function(result){
		console.log(result);
	}
		
};

	ajax(obj);

	ajax({
		
		method:"GET",
		url:"js/data.json?a=1",
		async:true,
	data:{
			
		uname:"zs",
		upwd:"13344"
	},
		success:function(result){
		console.log(result);
	}
		
});

	
	function ajax(obj){
		//创建核心对象
		var xhr=new XMLHttpRequest();
		//2.打开请求
		//格式化参数
		obj.data=formatParams(obj.data);
		//如果需要传参给后台，需要根据不同的请求类型来设置
		//如果是Post请求，请求地址不变
		//如果是Get请求，需要通过"?"将传递的参数拼接到请求地址后面
		
		if((obj.method).toUpperCase()=="GET"){
		// 判断请求路径中是否包含问号（如果有问号，通过"&"符号拼接；如果没有，通过"?"拼接）
			obj.url += (obj.url).indexOf("?") > -1 ? "&"+obj.data : "?"+obj.data;
		}
		
		//3.open()
		
		xhr.open(obj.method,obj.url,obj.async);
		
		
		//4.发送请求  send()
		
		if((obj.method).toUpperCase()=="POST"){
			//如果是post的请要模拟表单提交
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
		
			xhr.send(obj.data);
			
		}else{
			
			//如果是get请求,参数直接设置在路径之后,在此不需要设置,null
			xhr.send(null);
		}
		
		
		      //5.接收响应
		
		if(obj.async){	//异步请求
	//判断响应状态,如果数异步请求，需要通过onreadystatechange事件，监听readyState的值变化
			xhr.onreadystatechange=function(){
				//判断是否完成响应
			if(xhr.readyState==4){
						
				back();		//调用函数back
						
			}else{	//同步请求
						
				back(); 	 //调用函数back
						
			}
			
			
		}
			
	}
		
		
		//此函数判断是否响应成功
		function back(){
			
			if(status==200){
					
			obj.success(xhr.responseText);
					
			}
				
		}
		
		
	//此函数格式化参数
	 function formatParams(data){
				 
		var arr=[];
		//遍历对象
		for(var d in data){
			 //将键值通过=拼接
			 var key=d+"="+data[d];
			//将对应的键值字符串设置到数组中
			arr.push(key);
		}
				 
		 //将数组通过指定符号转换成字符串
		var param=arr.join("&");
		console.log(param);
		return param;
				 
				 
				 
	 }
		
	
	
}
	

</script>