Ajax封装，Ajax调用封装结合PHP用户名手机号码是否存在，案例

分手后的思念是犯贱 2021-09-18 14:32 326阅读 0赞

博主此次封装了两个ajax的方法（按TAB建校验用户名手机号码的案例）

有些区别提前说明一下

方法一：前端必须严格按照参数顺序传递参数

方法二：此种方法可以某些参数使用默认值，前端参数传递顺序可以打乱，更加灵活（建议使用第二种）

方法一前端代码：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>用户注册</title>
    	</head>
    	<body>
    		
    		<h1>用户注册</h1>
    		
    		<script src="server/myajax.js"></script>
    		<script>
    	window.onload=function(){
    			
    	
    		var username=document.querySelector("#username");
    		var phone=document.querySelector("#phone");
    		//用户名
    		username.onblur=function(){
    			//获取用户输入的值
    			var usernameValue=username.value;
    			//准备 myajax方法所需要的参数和值
    			var type="get";
    			var url="./server/uname.php";
    			var params="uname=" + usernameValue;
    			var dataType="text";
    			
    			myajax(type,url,params,dataType,function(result){
    				
    			var result_username=document.querySelector("#result_username");
    				if(result=="ok"){
    					result_username.innerText="用户名可以注册";
    				}else{
    					result_username.innerText="用户名不可以注册";
    				}
    				//传入true false (异步，同步)
    			},true);
    			
    		
    		}
    //手机号码
    		phone.onblur=function(){
    			//获取用户输入的值
    			var phoneValue=phone.value;
    			//准备 myajax方法所需要的参数和值
    			var type="post";
    			var url="./server/phone.php";
    			var params="phonenumber="+phoneValue;
    			var dataType="json";
    			
    			myajax(type,url,params,dataType,function(result){
    			var result_username=document.querySelector("#result_username");
    				var phone_result=document.querySelector("#phone_result");
    				if(result.status==0){
    					phone_result.innerText=result.message.tips+","+result.message.phonefrom;
    					//手机号码可以用
    				}else if(result.status==1){
    				
    					phone_result.innerText=result.message
    					//手机号码不可以用
    				}
    				//传入true false (异步，同步)
    			},true);
    			
    		} 
    	}
    	
    		</script>
    		
    		<h3>请注意，账号验证后台设置了5秒的睡眠延迟</h3>
    		<form action="">
    		
    		账号：<input type="text" id="username" />
    		<span id="result_username"></span>
    		<br />
    		
    		手机号码：<input type="tel" id="phone"  />
    		<span id="phone_result"></span>
    		<br />
    			
    		</form>
    		
    	</body>
    </html>

方法一前端js代码（方法一方法二都放在这个文件下）

//封装--ajax 方法一（前端必须严格按照参数顺序传递参数）：
    		//传输类型,传输路径,参数,数据类型,函数,使用同步还是异步刷新
    		function myajax(type,url,params,dataType,callback,async){
    			//创建XMLHttpRequest对象
    			var xhr=null;
    			//设置浏览器兼容
    			if(window.XMLHttpRequest){
    				xhr=new XMLHttpRequest();
    			}else{
    				xhr=new ActiveXObject("Microsoft.XMLHTTP");
    			}
    			//如果是get方式
    			if(type=="get"){
    				//如果没有params参数
    				if(params && params!=""){
    						url +="?"+params;
    				}
    				}
    			
    			xhr.open(type,url,async);
    			if(type=="get"){
    				xhr.send(null);
    			}else if(type=="post"){
    				xhr.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");
    				xhr.send(params);
    			}
    			
    			if(async){
    				xhr.onreadystatechange=function(){
    					if(xhr.readyState==4){
    						if(xhr.status==200){
    							  var result=null;
    							  //如果数据为json类型
    							if(dataType=="json"){
    							result= xhr.responseText;
    							result= JSON.parse(result);
    							  //如果数据为xml类型
    							}else if(dataType=="xml"){
    								 result =xhr.responseXML;
    							}else{
    								//数据为其他类型
    								 result=xhr.responseText;
    							}
    							if(callback){
    						    	callback(result);
    							}
    							
    						}
    					}
    					
    				};
    			}else{
    				if(xhr.readyState==4){
    					if(xhr.status==200){
    						  var result=null;
    						if(dataType=="json"){
    						result= xhr.responseText;
    						result= JSON.parse(result);
    						}else if(dataType=="xml"){
    							 result =xhr.responseXML;
    						}else{
    							 result=xhr.responseText;
    						}
    						if(callback){
    					    	callback(result);
    						}
    						
    					}
    				}
    			}
    			
    		}
    		
    		
    		//第二种ajax的封装方法,建议使用第二种，此种方法可以某些参数使用默认值，前端参数传递顺序可以打乱
    		
    		 obj={
    			 url:"xxx",
    			 type:"get",
    			 dataType:"json",
    			 
    		 }
    		
    		function myajax2(obj){
    			//设置默认值
    			var defaults={
    				type:"get",
    				url:"#",
    				dataType:"json",
    				data:{},
    				async:true,
    				success:function(result){
    					console.log(result);
    				}
    			};
    		//obj中的属性覆盖到defaults中的属性
    	    //1.如果一些属性只存在obj中，会增加给defaults
    		//2.如果有些属性在Obj和defaults中都存在，会将defaults中的覆盖
    		//3.如果有些属性只在defaults中存在，obj中没有，会使用defaults中预定义的默认值
    	      for(var key in obj){
    			  defaults[key]  =obj[key];
     		  }
    			//创建XMLHttpRequest对象
    			var xhr=null;
    			//设置浏览器兼容
    			if(window.XMLHttpRequest){
    				xhr=new XMLHttpRequest();
    			}else{
    				xhr=new ActiveXObject("Microsoft.XMLHTTP");
    			}
    			//得到params
    			var params="";
    			for(var attr in defaults.data){
    				params += attr + "=" + defaults.data[attr] + "&";
    			}
    			//去掉循环之后最后的&符号
    			if(params){
    				params=params.substring(0,params.length-1);
    			}
    			
    			if(defaults.type=="get"){
    				 defaults.url +="?" +params;
    			}
    			xhr.open(defaults.type,defaults.url,defaults.async);
    			
    			if(defaults.type=="get"){
    				xhr.send(null);
    			}
    			if(defaults.type=="post"){
    				xhr.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");
    				xhr.send(params);
    			}	
    		
    			
    			if(defaults.async){
    				
    				xhr.onreadystatechange=function(){
    					if(xhr.readyState==4){
    						if(xhr.status==200){
    							  var result=null;
    							  //如果数据为json类型
    							if(defaults.dataType=="json"){
    							result= xhr.responseText;
    							result= JSON.parse(result);
    							  //如果数据为xml类型
    							}else if(defaults.dataType=="xml"){
    								 result =xhr.responseXML;
    							}else{
    								//数据为其他类型
    								 result=xhr.responseText;
    							}
    							defaults.success(result);
    						}
    					}
    					
    				};
    				
    			}else{
    				if(xhr.readyState==4){
    					if(xhr.status==200){
    						  var result=null;
    						  //如果数据为json类型
    						if(defaults.dataType=="json"){
    						result= xhr.responseText;
    						result= JSON.parse(result);
    						  //如果数据为xml类型
    						}else if(defaults.dataType=="xml"){
    							 result =xhr.responseXML;
    						}else{
    							//数据为其他类型
    							 result=xhr.responseText;
    						}
    						defaults.success(result);
    					}
    				}
    			}
    			
    			
    		}

后端php代码（方法一方法二共用）

用户名验证

<?php
         sleep(5);
    	$uname=$_GET["uname"];
        if($uname=='zs'){
    		echo "no";
    	}else{
    		echo "ok";
    	}
    
    ?>

手机号码验证

<?php
    
      $phone=$_POST["phonenumber"];
      if( $phone =='139'){
    	  echo '{"status":1,"message":"手机号已经被使用"}';
      }else{
    	    echo '{"status":0,"message":{"tips":"手机号可以使用","phonefrom":"中国电信"} }';
      }
    ?>

方法二前端代码（方法二与方法一只有前端的代码是不同的，当然js代码是不同的，但是在同一个文件下 ）

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>用户注册2</title>
    	</head>
    	<body>
    		
    		<h1>用户注册2</h1>
    		
    		<script src="server/myajax.js"></script>
    		<script>
    	window.onload=function(){
    			
    	
    		var username=document.querySelector("#username");
    		var phone=document.querySelector("#phone");
    		//用户名
    		username.onblur=function(){
    			//获取用户输入的值
    			var usernameValue=username.value;
    			//准备 myajax方法所需要的参数和值
    			var type="get";
    			var url="./server/uname.php";
    			var params="uname=" + usernameValue;
    			var dataType="text";
    			//使用封装好的第二种ajax方法
    			myajax2({
    				//封装好了的defaults中有所需要的属性的时候不用传也可以
    				url:url,
    				data:{
    					uname:usernameValue
    				},
    				dataType:"text",
    				success:function(result){
    						
    					var result_username=document.querySelector("#result_username");
    						if(result=="ok"){
    							result_username.innerText="用户名可以注册";
    						}else{
    							result_username.innerText="用户名不可以注册";
    						}
    					}
    					});
    				}
    			
    			
    			
               //手机号码
    		phone.onblur=function(){
    			//获取用户输入的值
    			var phoneValue=phone.value;
    			//准备 myajax方法所需要的参数和值
    			var type="post";
    			var url="./server/phone.php";
    			var params="phonenumber="+phoneValue;
    			var dataType="json";
    			
    				myajax2({
    				//封装好了的defaults中有所需要的属性的时候不用传也可以
    				url:url,
    				type:"post",
    				data:{
    					phonenumber:phoneValue
    				},
    				dataType:"json",
    				success:function(result){
    					
    					var phone_result=document.querySelector("#phone_result");
    					if(result.status==0){
    						phone_result.innerText=result.message.tips+","+result.message.phonefrom;
    						//手机号码可以用
    					}else if(result.status==1){
    					
    						phone_result.innerText=result.message
    						//手机号码不可以用
    					}
    					
    					}
    					});
    		} 
    		
    	}
    	
    		</script>
    		
    		<h3>请注意，账号验证后台设置了5秒的睡眠延迟</h3>
    		<form action="">
    		
    		账号：<input type="text" id="username" />
    		<span id="result_username"></span>
    		<br />
    		
    		手机号码：<input type="tel" id="phone"  />
    		<span id="phone_result"></span>
    		<br />
    			
    		</form>
    		
    	</body>
    </html>

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70][]

**项目结构**

**![20190324192850204.png][]**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70]: /images/20210724/1065e94fc7cb4001a24396ae4ce83df3.png
[20190324192850204.png]: /images/20210724/93a4001c8b484c5ea88dbc3f007f0a92.png