Ajax设计：字段增量验证实例

面的例子是在字段的值发生改变时对每个字段进行验证，而提交节流设计模式的另一种流行用法是在修改某个字段过程中周期性地提交该字段。Bitflux LiveSearch和Google Suggest都使用了这种提交节流模式，数据将随着用户的输入周期性地发送到服务器。在这些例子中，提交用来在服务器上实现搜索；而同样的方法也可以用 来实现在用户输入时进行单个字段的验证。

 假设在某个网站的注册过程中，并非要求你填入整个表单，而是需要你首先选择一个用户名（或许是 多步注册过程中的第一步）。在这种情况下，你必须确保使用的是一个不存在的用户名。或许不希望等到提交整个表单时再验证，而是周期性地向服务器提交验证申 请，确保在输入一个有效的用户名之前不提交整个表单。

 注意，该例子只是为了演示。如果你想在实际的产品开发环境中使用这里描述的技术，必须提防木马程序（spam bot）使用该功能来获取用户名和密码。

    针对该例子的表单很简单，只需要一个文本框和一个“Next”（下一步）按钮：
 <form method="post" action="Success.php">
        <table>
        <tr>
            <td><label for="txtUsername">Username</label></td>
            <td><input type="text" id="txtUsername" name="txtUsername" />
                <img src="error.gif" alt="Error" id="imgUsernameError"
                    style="display:none" /></td>
        </tr>
        </table>
        <input type="submit" id="btnNext" value="Next" />
    </form>

 可以看到它与前一个例子保持了相同的格式，包括一个隐藏的错误图像。接下来，只需对上一个例子中的validateField()函数进行少量修改就可以在此使用了：
    var oXmlHttp = null;
    var iTimeoutId = null;
    function validateField(oEvent) {
        oEvent = oEvent || window.event;
        var txtField = oEvent.target || oEvent.srcElement;
        var btnNext = document.getElementById("btnNext");
        btnNext.disabled = true;
        if (iTimeoutId != null) {
            clearTimeout(iTimeoutId);
            iTimeoutId = null;
        }
        if (!oXmlHttp) { 软件开发网 www.mscto.com
            oXmlHttp = zXmlHttp.createRequest();
        } else if (oXmlHttp.readyState != 0) {
            oXmlHttp.abort();
        }
        oXmlHttp.open("get", "ValidateForm.php?" + txtField.name + "="
        + encodeURIComponent(txtField.value), true);
        oXmlHttp.onreadystatechange = function () {
            if (oXmlHttp.readyState == 4) {
                if (oXmlHttp.status == 200) {
                    var arrInfo = oXmlHttp.responseText.split("||");
                    var imgError = document.getElementById("img"
                    + txtField.id.substring(3) + "Error");
                    if (!eval(arrInfo[0])) {
                        imgError.title = arrInfo[1];
                        imgError.style.display = "";
                        txtField.valid = false;
                    } else {

         imgError.style.display = "none";
                        txtField.valid = true;
                    }
                    btnNext.disabled = !txtField.valid;
                    } else {
                        alert("An error occurred while trying to contact the server.");
                    }
                }
            };
            iTimeoutId = setTimeout(function () {
                oXmlHttp.send(null);
            }, 500);
    };

 在 这个修改后的函数中首先要注意的是两个全局变量：oXmlHttp和iTimeoutId。首先， oXmlHttp用来保存对多次使用的XMLHttp对象的全局引用（而在前一个例子中，该对象只使用了一次）；其次，iTimeoutId用来保存延迟 发送请求的超时时间标识符。在这个函数中，第一处更新是将“Next”按钮设置为立即禁用。这一步很重要，因为当调用该函数时不会立即发送请求。接下来一 处更新则是判断超时时间值是否为null，如果不是则将其清空，这是避免连续发送太多的请求（如果有待处理请求，则取消它）。

 接下来则 检查全局变量oXmlHttp对象是否为null。如果是，则创建一个新的XMLHttp对象，并将其赋给该全局变量。如果已经有了XMLHttp对象， 那么则检查它的ready State属性是否准备发送一个请求。正如上一章提到的，当调用open()方法时，则readyState的值将从0变为1；因此，只要 readyState的值不是0就说明请求已经开始了，因此在尝试发送一个新请求前，必须调用abort()方法取消前一个请求。可以发现用来验证的 ValidateForm.php页面是相同的。

    在onreadystatechange事件处理函数中，只有一行新代码基于用户名的有效性来修改“Next”按钮的禁用状态。在该函数的结尾处，调用了 setTimeout()函数用来将请求的发送延迟半秒（500毫秒）。该调用返回的标识符将保存到 iTimeoutId中，因此在下一次调用该函数时可以取消这次请求。以这种形式使用JavaScript的超时功能，可以确保用户至少在半秒钟内没有输 入任何新的值。如果用户输入很快，则该超时时间将被不断清空，请求也将被取消。只有当用户暂停输入时，该请求才会最终发送出去。

 现在只剩下设置事件处理函数了。由于该方法是根据用户的输入来上传信息的，因此你不能够再只依赖于onchange事件处理函数了（尽管仍然需要）。在本例中，需要使用onkeyup事件处理函数，它将在每次按下键并放开键时调用。

    window.onload = function () {
        if (zXmlHttp.isSupported()) {
            var btnNext = document.getElementById("btnNext");
            var txtUsername = document.getElementById("txtUsername");
            btnNext.disabled = true;
            txtUsername.onkeyup = validateField;
            txtUsername.onchange = validateField;
            txtUsername.valid = false;
        }
    };

 同 样，这与上一个例子也很类似，只需要修改按钮的名称（现在是btnNext）以及将validateField ()赋给onkeyup事件处理函数。当用户输入时，将会对用户名称进行验证。每当输入有效的用户名，“Next”按钮都将启用。每当发出一个请求时，该 按钮将首先禁用以适应特殊情况。这种特殊情况可能出现在当用户输入一个有效的用户名后继续输入，这些后输入的额外字符使得用户名变成了无效的用户名，而你 并不希望提交这个无效的数据。

    尽管字段增量验证是一个很好的功能，但由于它会带来大量的请求因此应该降低使用。除非配置服务器时考虑了这些增量的请求，那么上述方法是不错的选择。