原生ajax使用

页面:

<h3>原生ajax验证</h3>
		<form name="myForm">
			账号:<input type="input" name="username" value=""/><span id="tip"></span><br />
			密码:<input type="password" name="password" value=""/>
			<button>提交</button>
		</form>

ajax代码

 window.onload = function(){
	var OName = document.forms['myForm']['username'];
	var OTip = document.getElementById("tip");
	var flag = true;
	OName.onblur = function(){
	      useAjax(
	      "./json/user.json",
	      function(obj){
	      O = JSON.parse(obj);
              for(var i=0;i < O.user.length; i++){
                    console.log(OName.value)
                    if(O.user[i].name == OName.value){ 
	                  flag = false;
	                  OTip.innerHTML = "<span style='color: green;'>账户存在!</span>";
			  break;
	       }
	  }
		if(flag == true){
			 OTip.innerHTML = "<span style='color: red;'>账户不存在!</span>";
			}else{
			 flag = true;
		       } 
		 },
	     function(status){ 
		 console.log("请求异常:"+status); 
	     })
		} 
		// 封装ajax
		function useAjax(url,fnSuccess,fnFail){
			var Ajax = new XMLHttpRequest();
			Ajax.open('GET',url,true);
			Ajax.send();
			Ajax.onreadystatechange = function(){
				if(Ajax.readyState == 4){
					if(Ajax.status == 200){
						//成功
						fnSuccess(Ajax.responseText);
					}else{
						//失败
						fnFail(Ajax.status);
					}
				}
			}
		} 	
	}

user.json

{
"user": 
	[ 
		{"name":"admin","password":"123456"},
		{"name":"aaa", "password":"123456"},
		{"name":"bbb", "password":"123456"},
		{"name":"ccc", "password":"123456"},
		{"name":"ddd", "password":"123456"}
	] 
}

实现效果:

posted @ 2020-09-02 17:15  MrHanhan  阅读(134)  评论(0编辑  收藏  举报