jquery中ajax，原生ajax和自封装ajax

一、jquery中的ajax

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button>点我发送ajax</button>
	<script src='../js/jquery-1.12.3.min.js'></script>      //引入jquery框架
	<script>
    $('button').click(function(){                               //给button添加点击事件
    	$.ajax({
	    	type:'post',                                    //请求类型   get（明文）或post（密文）
	    	url:'yangjieAjax.php',                          //发送地址
	    	dataType:'json',                                //数据类型为json
	    	data:{                                          //data是post独有的，post请求才需要携带数据给后台
	    		uname:'yangjie',
	    		upass:'123456'
	    	},
	    	success:function (res){                         //请求完成后，若收到后台返回的数据（res），这个函数自动执行
	    		console.log(res);
	    	}
	    })
    })

jquery的方法虽然简单，但是必须引入jquery框架，然而框架中不是所有内容都能用到，就会造成大量无用代码，占用资源，所以我们用原生js方式发ajax

二、原生ajax

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button>点我发送ajax</button>
	<script>
    document.querySelector('button').onclick = function (){
    	var xhr = window.XMLHttpRequest ? new XMLHttpRequest() :new ActiveXObject();       //创建xhr对象 兼容IE
    	xhr.onreadystatechange = function (){                  //页面的加载状态监听（会在页面状态发生改变时自动调用）
    		if(xhr.readyState == 4){                       //值为4 证明服务器已经完全收到信息
    			if(xhr.status == 200){                 //值为200 证明前端接收到后台返回的数据
    				console.log(JSON.parse(xhr.responseText));      //当请求成功时，服务器返回的信息
    			}else{
    				console.log(xhr.statusText);      //当请求失败时，服务器返回的信息
    			}
    		}
    	}
    	var formdata = new FormData();   //post需要携带数据给后台，所以创建一个表单来存数据（这个表单只要在send之前构建就可以）
    	formdata.append('uname','yangjie');    
    	formdata.append('upass','123456');
    	xhr.open('post','yangjieAjax.php',true); //设置请求发送到哪里，不是真的发送，有三个参数是请求类型，发送地址和是否异步
    	xhr.send(formdata)；            //发送请求  如果是get，参数写null
    }

原生虽然没有无用代码，但会大量重复代码，书写过于麻烦，所以我们封装一个自己的ajax框架就势在必行

三、封装ajax

;(function(){
	function yangjieAjax(jsonObj){
    	var xhr = new XMLHttpRequest();    //创建xhr对象
    	function params(data){            
    		var arr = [];
    		for(var i in data){
    			arr.push(i+'='+data[i]);
    		}
    		return arr.join('&');
    	}
    	if(jsonObj.type.toLowerCase() === 'get'){    //处理get请求的参数（因为不确定用户输入是大写还是小写，所以用tolowerCase）
    		jsonObj.data = params(jsonObj.data);   //调用上面的函数 赋值给jsonObj.data
    		jsonObj.url += jsonObj.url.indexOf('?') == -1 ? '?'+jsonObj.data : '&'+jsonObj.data;  //如果没有？就在参数前加？
    	}else if(jsonObj.type.toLowerCase() === 'post'){     //处理post请求的参数
    		var formdata = new FormData();       //构建表单
    		for(var i in jsonObj.data){   	     //遍历jsonObj.data  拼接到表单数据里	
    			formdata.append(i,jsonObj.data[i]);
    		}
    		jsonObj.data = formdata;    //然后赋值给jsonObj.data
    	}
    	if(jsonObj.async === true){         //如果发送的是异步请求  再发ajax
    		xhr.onreadystatechange = function (){
	    		if(xhr.readyState == 4){
	    			if(xhr.status == 200){
	    				jsonObj.success(JSON.parse(xhr.responseText));
	    			}else{
	    				jsonObj.error(xhr.statusText);
	    			}
	    		}
	    	}
	    	xhr.open(jsonObj.type,jsonObj.url,jsonObj.async);
	    	if(jsonObj.type.toLowerCase() === 'get'){
	    		xhr.send();
	    	}else if(jsonObj.type.toLowerCase() === 'post'){
	    		xhr.send(jsonObj.data);
	    	}
    	}
    }


  window.yangjieAjax = yangjieAjax;
}())

会用自己封装的ajax

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button>点我发送请求</button>
	<script src ='yangjieAjax.js'></script>
	<script>
    document.querySelector('button').onclick = function (){   
    	window.yangjieAjax({              //模仿Jquery   与后台约定好参数
    		type:'post',
    		url:'yangjieAjax.php',
    		async:true,
    		data:{
    			uname:'yangjie',
    			upass:'521521'
    		},
    		success:function (res){
    			console.log(res);
    		}
    	})
    }


    
   

	</script>
</body>
</html>

jquery中ajax，原生ajax和自封装ajax

猜你喜欢