表单动态验证之原生Ajax

￡神魔★判官ぃ 2022-07-14 08:59 187阅读 0赞

## 什么是 AJAX? ##

> AJAX代表异步JavaScript和XML。  
> 简而言之，它是使用 XMLHttpRequest 对象与服务器端脚本进行通信。它可以发送以及接收各种格式的信息，包括JSON，XML，HTML，甚至文本文件。它是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这让您可以根据用户事件对页面进行异步更新。

--------------------

从上面这段介绍中，可以提取出实现ajax技术的几个关键：

*  **XMLHttpRequest对象 -> 向服务器发出HTTP请求 -> 如何发出?** 
 *  **JSON/XML/HTML/文本/… -> 发送/接收各种格式的数据 -> 如何发送?接收后怎么处理?**

根据上面的几个要点有以下思路：

*  **创建XMLHttpRequest对象**
    
        const xhr = new XMLHttpRequest();
 *  **声明如何处理服务器响应**
    
     *  **添加事件监听**
        
            xhr.addEventListener('readystatechange', function)
        
        > 每当XMLHttpRequest的readyState属性改变时，就会触发onreadystatechange事件，调用相应事件响应函数来进行处理，下面是该function的主要内容
        
         *  **事件响应函数**
            
                //检查请求的状态 [状态的值为XMLHttpRequest.DONE（计算为4）表明已收到完整的服务器响应，可以继续处理]
                    if(xhr.readyState === XMLHttpRequest.DONE) {
                            //检查HTTP服务器响应的响应代码 [检查200 OK响应代码来区分成功或失败的AJAX调用]
                            if(xhr.status === 200) {
                                //对服务器发送的数据进行处理
                            } else {
                
                            }
                    }
         *  **如何处理数据**
            
            > 访问数据有以下两种方式：
            > 
            > xhr.responseText —— 以文本字符串形式返回服务器响应  
            > xhr.responseXML —— 将响应作为XMLDocument对象返回
            > 
            > 第二种方式可以使用JavaScript的DOM函数进行遍历，这里主要看第一种方式，对于传送过来的JSON格式的字符串，要进行反序列化，将其转换成javascript对象，这样就可以方便对字符串进行处理
            
                JSON.parse(xhr.responseText);
 *  **实际提出请求**
    
     *  **初始化请求**
        
            xhrReq.open(method, url);
        
        > 其中 第一个参数`method` 可以是 `GET` 、`POST`、`HEAD`或任何其他你要使用的服务器支持的方法，注意保持方法大写；  
        > 第二个参数`url`是你请求的网页网址；  
        > 第三个可选参数async默认为true，默认进行异步传输。
     *  **发送请求**
        
            xhr.send();
        
        > 如果请求的方法是`GET`，send()方法参数为`NULL`，实际要传送的参数通过URL进行传递；  
        > 如果请求的方法是`POST`，send()方法参数是处理过的数据，还需要在open之后send之前设置HTTP请求头
        
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        
            xhr.send(Object.keys(data).map(function(k) { 
                return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]);
            }).join(&));
        
        > 对于send()方法的参数，可以用上面的方法处理数据，也可以使用FormData对象，稍后会进行补充
        > 
        > 最后要注意所有相关的事件绑定必须在调用send()方法之前进行

--------------------

下面来看一个简单的例子

针对这个表单，进行登陆验证

//将上面所说的内容封装成一个函数fakeSubmit
    function fakeSubmit(url, data, success, fail) { 
            const xhr = new XMLHttpRequest();
            xhr.addEventListener('readystatechange', function(){ 
                if(xhr.readyState === XMLHttpRequest.DONE) {
                    if(xhr.status === 200) {
                        var res;
                        try {
                            res = JSON.parse(xhr.responseText);
                        } catch(err) {
                            fail(err, xhr.response);
                            throw(err);
                        }
                        success(res);
                    } else {
                        fail(xhr.status + ' ' + xhr.statusText, xhr.response);
                    }
                }
            });
            xhr.open('POST', url);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send(Object.keys(data).map(function(k) { 
                return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]);
            }).join('&'));
        }
    
     $(document).ready(function() { 
         document.getElementById('submitBtn').addEventListener('click', function() { 
                var user = document.getElementById('user').value;
                var pass = document.getElementById('pass').value;
                var data = {
                    'login_user.userName': user,
                    'login_user.password': pass,
                };
                fakeSubmit('/login', data, function(res) { 
                    if(res === 'fail') {
                        alert('登录失败，账号/密码不正确');
                    } else {
                        alert('登录成功');
                    }
                }, function(err) { 
                    alert(err);
                });
            });
        });