表单动态验证之原生Ajax

2016-12-05 20:09:04来源:CSDN作者:sqq0103人点击

什么是 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 可以是 GETPOSTHEAD或任何其他你要使用的服务器支持的方法,注意保持方法大写;
      第二个参数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);            });        });    });

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台