XMLHttpRequest创建智能表单

</tr>

<tr>

<td class="fieldname">

Verify Password:

</td>

<td>

<input type="text" id="password2" />

</td>

<td />

</tr>

<tr>

<td colspan="2" class="submit">

<input type="submit" value="Submit" />

</td>

<td />

</tr>

</table>

</form>

最后一行则包含了两个单元格。第一个单元格跨越了表格的两列，其中包含了表单的Submit按钮。第二个单元格则为空。

该HTML页面中的CSS仅包含了如下所示的两个样式规则：

.fieldname

{

text-align: right;

}

.submit

{

text-align: right;

}

这两个样式规则用于设置表格中元素的对齐方式，以使表单看上去整齐而有序。

在这个实例中，字段之后的超链接是实现Ajax功能的关键，当单击超链接时将调用相应的JavaScript函数。首先，我们来讨论一下第一个函数checkUsername()，该函数用以获取用户在Username文本框中输入的用户名，并使用该信息执行一个HTTP请求。

function checkUsername()

{

var userValue = document.getElementById("username").value;

if (userValue == "")

{

alert("Please enter a user name to check!");

return;

}

var url = "formvalidator.php?username=" + userValue;

var request = new HttpRequest(url, checkUsername_callBack);

request.send();

}

在上面的代码中，为了获取用户名，使用了document.getElementById()方法以引用该<input/>元素，使用value属性以获取用户在username文本框中输入的用户名，并将用户名保存在变量userValue中。接下来，将变量userValue的值与空字符串(" ")进行比较。如果username文本框中的值为空，则提示用户输入用户名，并使用return语句返回以结束函数的执行。如果不对用户名为空的情况进行检查，则可能会向服务器发送一些不必要的请求。

在checkUsername()中，接下来的代码构造了一个URL字符串并将其保存在变量url中，该URL是一个向目标服务器PHP程序发送请求的查询字符串。随后，创建了一个HttpRequest对象，将URL和回调函数传递给HttpRequest()构造函数，并向目标服务器发送请求。

当HttpRequest对象成功地从服务器获得响应之后，回调函数checkUsername_callBack()将被执行。该函数将根据

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!