ajax封装

封装ajax

html代码 :

<button id='get1'>get</button>
<button id='post1'>post</button>

js代码 :

<script>
	function $ajax({method="get",url,data,success,error,asnyc=true}){
		xhr = null //存放ajax对象用的变量

		try{
			xhr = new XMLHttpRequest()  //IE8
		}catch(error){
			xhr = new ActiveXObject("Microsoft.XMLHTTP");  //IE8以下
		}

		//判断需不需要传参
		if(data){
			//{'name':'张三',age:18}  让用户传这个对象格式的参数
			//通过自定义的haha函数,把对象格式转换成"张三"&age=18'这个格式
			//'name="张三"&age=18'
			 data = haha(data)
		}

		if(method.toLocaleLowerCase() == 'get' && data){
			//看你是不是用的get方法,同时传参了
			url+= "?"+data    // 1.php?name="张三"&age=18
		}

		//初始化
		xhr.open(method,url,asnyc)

		//判断你使用get还是post方法
		if(method.toLocaleLowerCase() == 'get'){
			xhr.send()
		}else{
			//post传参需要设置请求头
			xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

			//判断你有参数吗
			if(data){
				xhr.send(data)  // xhr.send('name="张三"&age=18')
			}else{
				xhr.send()
			}
		}
           
		//状态码开始发生变化了0-4
		xhr.onreadystatechange=function(){
			if(xhr.readyState == 4){
				if(xhr.status == 200){
					//回调函数,先判断用户传参没,要是没传参数就是不想处理响应数据
					if(success){
						success(xhr.response)
					}
				}else{
					if(error){
						//请求失败,把错误码当做参数给回调函数error装进去
						error(xhr.status)
					}
				}
			}
		}

		//处理参数的函数
		function haha(a){
			var str = '';
			for(bb in a ){
				//遍历对象
				str += bb +"="+a[bb]+"&"
			}
			return str.substring(0,str.length-1);
            //截取字符串不拿最后一个&
		}
	}
	
	var get1 = document.getElementById('get1')
	var post1 = document.getElementById('post1')

	get1.onclick=function(){
		$ajax({
			data:{'name':'张三','age':18,sex:'男'},
			url:'1.php',
			method:'get',
			success:function(da){
				console.log(da)
				console.log('哈哈哈就是这么666')
			}
		})
	}

	post1.onclick=function(){
		$ajax({
			data:{'name':'张三','age':18,sex:'男'},
			url:'2.php',
			method:'post',
			success:function(da){
				alert(3)
				console.log('我是成功后执行的函数')
				console.log(da)
				console.log('我是成功后执行的函数')
			},
			error:function(da){
				console.log('您当前的错误码是'+da)
			}
		})
	}
</script>