这是我第一次尝试使用Ajax，这个代码正在做的是当用户键入用户名时，应该触发ajax并告诉用户用户名是否可用。但是ajax文件没有做它想要做的事情，换句话说该函数没有被触发。知道为什么吗？
我从一本书中采用了这个例子。
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<!-- Bootstrap Core CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="bootstrap/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Ajax -->
<script src="ajax.js" type="text/javascript" language="javascript"></script>
<!-- Ajax -->
<script src="checkusername.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<div class="form-group">
<form action="checkusername.php">
<fieldset>
<legend>Registration Form</legend>
<p>
Username: <br> <input name="username" onchange="check_username(this.form.username.value)" type="text" class="form-control" placeholder="Username" maxlength="20" style="width:200px; display: inline;">
<span id="username_label"></span>
</p>
<p>
Password: <input type="password" class="form-control" placeholder="Password" maxlength="20" style="width:200px;">
</p>
<p>
Confirm Password: <input type="text" class="form-control" placeholder="Confirm Password" maxlength="20" style="width:200px;">
</p>
<p>
First Name: <input type="text" class="form-control" placeholder="First Name" maxlength="20" style="width:200px;">
</p>
<p>
Last Name: <input type="text" class="form-control" placeholder="Last Name" maxlength="20" style="width:200px;">
</p>
<p>
Email: <input type="email" class="form-control" placeholder="Email" maxlength="20" style="width:200px;">
</p>
<button type="submit" name="submit" class="btn" >Register</button>
</fieldset>
</form>
</div>
</body>
</html>
var ajax = false;
if( window.XMLHttpRequest ){
ajax = new XMLHttpRequest();
} else {
// code for IE6, IE5
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
if ( !ajax ) {
alert('functionality is not avaible');
}
function check_username( username ){
if( ajax ){
ajax.onreadystatechange = handle_check;
ajax.open( 'GET', 'checkusername.php?username=' + encodeURIComponent(username), true);
ajax.send(null);
}
else{
document.getElementById( 'username_label' ).innerHTML = 'The availablity of this username will be check upon form submission';
}
}
function handle_check(){
if ( ajax.readyState == 4 && ajax.status == 200 ) {
document.getElementById( 'username_label' ).innerHTML = ajax.responseText;
}
}
<?php
if (isset($_GET['username'])) {
$dbc = @mysqli_connect('localhost','root','','testdb') OR die ( 'Cannot connect.' );
$que = sprintf("SELECT ID FROM maintable WHERE name='%s'", mysqli_real_escape_string( $dbc, trim( $_GET['username'] ) ));
$runque = mysqli_query( $dbc, $que );
if (mysqli_num_rows( $runque ) == 1) {
echo "The Username is unavaiable!";
}
else{
echo "The Username is avaiable!";
}
mysqli_close( $dbc );
}
else{
echo "Please Enter username";
}
?>