如何用JavaScript的AJAX技术实现用户名验证功能？

本文共计446个文字，预计阅读时间需要2分钟。

1. 创建XMLHttpRequest对象

2.设置url、data，通过xmlHttpRequest.send()发送

3.服务器端接收ajax请求，处理数据（操作数据库），返回结果（echo语句）

4.客户端通过xmlHttpRequest的responseText、response属性接收结果

1.创建一个XMLHttpRequest对象
2.创建url,data,通过xmlHttpRequest.send()
3.服务器端接收ajax的请求,做相应处理(操作数据库)，然后返回结果(echo语句)
4.客户端通过xmlHttpRequest的属性reponseText,responseXML取的数据，然后就完成局部刷新当前页面任务

1.[代码]用户名需要验证的表单

<form action="" method="post"> 用户名:<input type="text" name="username1" id="username"/><input type="button" onclick="checkName();" value="验证用户名"/><span id="myres" style="color:#FF0000"></span><br /> </form>

2.[代码]r.php

<?php header("Content-Type: text/xml;charset=utf-8"); //不要缓存数据 header("Cache-Control: no-cache"); //接受数据 // $username=$_POST['username']; $username=$_GET['username']; if($username=="zqwang121"){ echo "用户名不可用"; }else{ echo "用户名可用"; } ?>

3.[代码]创建ajax引擎

function xmlHttpObject(){ var xmlHttpRequest; if(window.ActiveXObject){ xmlHttpRequest= new ActiveXObject("Microsoft.XMLHTTP"); }else{ xmlHttpRequest= new XMLHttpRequest(); } return xmlHttpRequest; }

4.[代码]使用get方式提交数据

function checkName(){ var myXmlHttpRequest=xmlHttpObject(); if(myXmlHttpRequest){ //通过myXmlHttpRequest对象发送到服务器的某个页面 var url="localhost/r.php?nowtime="+new Date()+"&username="+document.getElementById("username").value; //第一个参数表示请求的方式, "get" / "post" //第二个参数指定url,对哪个页面发出ajax请求(本质仍然是localhost/r.php"; var date="username="+ document.getElementById("username").value; myXmlHttpRequest.open("post",url,true); myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); myXmlHttpRequest.onreadystatechange=chuli; myXmlHttpRequest.send(date); }

6.[代码]回调函数

function chuli(){ if(myXmlHttpRequest.readyState==4){ document.getElementById("myres").innerHTML=myXmlHttpRequest.responseText; if(myXmlHttpRequest.responseText=="用户名不可用"){ document.getElementById("myres").style.color="red"; }else{ document.getElementById("myres").style.color="green" } } }