表单动态验证之原生Ajax

来源：互联网发布：php木马扫描器编辑：程序博客网时间：2024/06/10 01:44

什么是 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()方法之前进行

下面来看一个简单的例子

<form class="form-horizontal">    <div class="form-group">        <label class="col-lg-3 control-label">用户名</label>        <div class="col-lg-5">            <input type="text" id="user" class="form-control" name="login_user.userName" />        </div>     </div>     <div class="form-group">        <label class="col-lg-3 control-label">密码</label>        <div class="col-lg-5">            <input type="password" id="pass" class="form-control" name="login_user.password" />        </div>    </div>    <button type="submit" id="submitBtn" class="btn btn-md">登陆</button></form>

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

//将上面所说的内容封装成一个函数fakeSubmitfunction 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);            });        });    });

0 0