Ajax原理与实战（Ajax表单验证与选项卡）--2019年5月15日

今天学习Ajax，把Ajax的原理总结如下：
一、什么是Ajax
Ajax（Asynchronous JavaScript and XML的缩写）是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。简单地说，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。常见运用场景有表单验证是否登入成功、百度搜索下拉框提示和快递单号查询等等。
Ajax目的：提高用户体验，较少网络数据的传输量

二、Ajax原理是什么
Ajax最核心的依赖是浏览器提供的XMLHttpRequest对象，它扮演的角色相当于一个代理，使得浏览器可以发出HTTP请求与接收HTTP响应。浏览器接着做其他事情，等收到XMLHttpRequest返回来的数据再渲染页面。

三、Ajax的使用
1.创建Ajax核心对象XMLHttpRequest

    var xhr=new XMLHttpRequest();

2.向服务器发送请求

    xhr.open(method,url,async);  
    //method：请求的类型，GET 或 POST;
    //url：文件在服务器上的位置;
    //async：true（异步）或 false（同步）,默认为true;
    
    send(string); 
    //post请求时才使用字符串参数，GET请求不用带参数或者填入null。

注意：使用post请求一定要设置请求头的格式内容

    xhr.open("POST","test.html",true);      
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
    xhr.send("fname=Henry&lname=Ford");  //post请求参数放在send里面，即请求体

3.服务器响应处理（区分同步跟异步两种情况）

 responseText 获得字符串形式的响应数据。

 responseXML 获得XML 形式的响应数据。

①同步处理

    1. xhr.open("GET","info.txt",false);  
    2. xhr.send();  
    3. document.getElementById("myDiv").innerHTML=xhr.responseText; //获取数据直接显示在页面上

②异步处理

要在请求状态改变事件中处理。

    1. xhr.onreadystatechange=function()  { 
    2.     if (xhr.readyState==4 &&xhr.status==200)  { 
    3.         document.getElementById("myDiv").innerHTML=xhr.responseText;  
    4.     }
    5. }

实战案例
1.Ajax表单验证：

获取用户的登录信息后，提交数据到服务器进行异步验证，待结果返回后跳转。
以下是JavaScript代码：

<script type ="text/javascript"> 
   let submitButton = document.getElementById('submitButton');
   let errMailTip = document.getElementById('errMailTip');
   let errPswTip = document.getElementById('errPswTip');
   let resultTip = document.getElementById('resultTip');
   
   submitButton.addEventListener('click', F_checkUser, false);
   formLogin.email.addEventListener('input', function() {
      errMailTip.innerText = '';
      resultTip.innerText = '';
   }, false);
   formLogin.password.addEventListener('input', function () {
      errPswTip.innerText = '';
      resultTip.innerText = '';
   }, false);
   
   function F_checkUser() {
      let userInfo = F_isEmpty(formLogin, errMailTip, errPswTip);
      if (userInfo) {
         F_verify(userInfo, resultTip)
      } else {
         return false;
      }
   }
         
   function F_isEmpty($form_Login, $err_Mail_Tip, $err_Psw_Tip) {    
      let email_Temp = $form_Login.email.value.trim();
      let password_Temp = $form_Login.password.value.trim();
      
      if (email_Temp.length === 0) {
         $err_Mail_Tip.innerText = '邮箱不能为空';
         $form_Login.email.focus();
         return false;
      } else if (password_Temp.length === 0){
         $err_Psw_Tip.innerText = '密码不能为空';
         $form_Login.password.focus();
         return false;
      }
      return {
         email: email_Temp,
         password: password_Temp
      };
   }     
   
   function F_verify($user_Info, $result_Tip) {
      let data_Temp = 'email=' + $user_Info.email + '&password=' + $user_Info.password;
      let request_Temp = new XMLHttpRequest();
      request_Temp.onreadystatechange = function(){
         if (request_Temp.readyState === 4 && request_Temp.status === 200) {
            $result_Tip.innerHTML = request_Temp.responseText;
         }
         return false;
      };
      request_Temp.open('post','admin/check.php',true);
      request_Temp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      request_Temp.send(data_Temp);
   }
   
</script>

 2.Ajax制作选项卡

以下是JavaScript代码

<script type = "text/javascript">      
      let tabBox = document.getElementsByClassName('box')[0];
      let tabContent = tabBox.getElementsByTagName('ul')[0];
      let tabList = tabContent.getElementsByTagName('li');
      let tabGroup = tabBox.getElementsByTagName('div');
      
      for (let i=0; i<tabList.length; i++) {    
         tabList[i].index = i;        
         tabList[i].addEventListener('click', F_getData, false);
      }
    
      function F_getData() {       
         for (let i=0; i<tabList.length; i++) {            
            tabList[i].className = '';            
            tabGroup[i].style.display = 'none';
         }        
         this.classList.add('active');
         tabGroup[this.index].style.display = 'block';
        
         let n = this.index;
         let request = new XMLHttpRequest();
         request.open('get', 'admin/data.php?p='+n, true);
         request.send(null);
         request.onreadystatechange = function () {
            if (request.readyState === 4) {
               tabGroup[n].innerHTML = request.responseText;
            }
         };
      }
    
      let defaultTab = tabContent.firstElementChild;
      defaultTab.addEventListener('click', show, false);
      let event = new Event('click');
    
      defaultTab.dispatchEvent(event);
      function show() {
         let request = new XMLHttpRequest();
         request.onreadystatechange = function () {
            if (request.readyState === 4) {                
               tabGroup[0].innerHTML = request.responseText;
            }
         };
         request.open('get', 'admin/data.php?p=0', true);
         request.send(null);
      }
</script>