一个ajax的简单例子——用户名存在检测

浏览数：23 / 时间：2015年06月09日

一、ajax请求的四个步骤：

1、创建ajax对象

var xmlhttp=new XMLHttpRequest();//IE5,IE6以外的浏览器
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//IE5,IE6

2、连接服务器

open() 方法有三个参数，第一个参数是连接方法即 GET 和 POST，第二个参数是 URL 即所要读取数据的地址，第三个参数是否异步（默认为异步），它是个布尔值，true 为异步，false 为同步。

xmlhttp.open(‘GET‘,url,true);

3、发送ajax请求

当请求为GET方式时，可以在不指定参数或使用null参数的情况下调用send()方法。

xmlhttp.send();

4、接收返回值

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。当请求完成加载（readyState值为4）并且响应已经成功（http状态值为200）时，就可以调用一个javascript函数来处理该响应内容。

xmlhttp.onreadystatechange=RequestCallBack;//设置回调函数
function RequestCallBack(){
    if(xmlhttp.readyState==4&&xmlhttp.status==200){
        //处理程序
    }
}

XMLHttpRequest对象的常用属性
属性	说明
onreadystatechange	每次状态改变都会触发这个事件处理器，通常会调用一个javascript函数
readyState	请求的状态，有以下5个取值 0 －（未初始化）还没有调用send()方法 1 －（载入）已调用send()方法，正在发送请求 2 －（载入完成）send()方法执行完成，已经接收到全部响应内容 3 －（交互）正在解析响应内容 4 －（完成）响应内容解析完成，可以在客户端调用了
responseText	服务器的响应，表示为字符串
reponseXML	服务器的响应，表示为XML。这个对象可以解析为一个DOM对象
status	返回服务器的http状态码，如： 200=>成功 202=>请求被接受，但尚未成功 400=>错误的请求 404=>文件未找到 500=>内部服务器错误
statusText	返回http状态码对应的文本

二、异步检测用户名的例子

html请求页面test.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax用户名存在检测</title>
<style>
.bad{
    color:red;
}
.good{
    color:green;
}
</style>
</head>
<body>
<form>
    <label for="username" >用户名：</label><input type="text" onblur="checkname()" id="username"/><span id="tip">请输入用户名</span>
</form>
<script type="text/javascript">
var checkname=function(){
    var username=document.getElementById(‘username‘).value.trim();
    var tip=document.getElementById(‘tip‘);
    if(username!=""){
        var xmlhttp=null;
        if(window.XMLHttpRequest){
            xmlhttp=new XMLHttpRequest();
        }else{
            xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.open("GET","check.php?username="+username,true);
        xmlhttp.send();
        xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState==4&&xmlhttp.status==200){
                if(xmlhttp.responseText==1){
                    tip.className="good";
                    tip.innerHTML="用户名可用！";
                }
                else if(xmlhttp.responseText==0){
                    tip.className="bad";
                    tip.innerHTML="用户名已被占用！";
                }
            }
        }
    }else{
        tip.className="";
        tip.innerHTML="请输入用户名";
    }
}
</script>
</body>
</html>

php检测页面check.php：

<?php
$username=$_GET[‘username‘];
$conn=mysql_connect(‘localhost‘,‘root‘,‘123‘) or die("连接数据库服务器失败!".mysql_error());
mysql_select_db("test",$conn);
$result=mysql_query("select username from tb_user where username=‘$username‘",$conn);
if(mysql_num_rows($result)>0){
    echo 0;
}else{
    echo 1;
}

?>