ajax+php的简单实现

如果你以前还没接触过ajax的话，建议先看看有关ajax的书籍。我提供个地址：http://java2000.net/f116

众所周知，ajax概括起来就是异步传输，而在此过程中就离不开XMLHttpRequest对象的使用。

例子：假设我们要做一个注册用户验证该用户名是否存在的功能。

表单代码：在账户文本框失去焦点后，我们验证用户名是否存在。我们定义一个<span id="info"></span>来显示提示信息。

xhtml代码

<form name="regFrom" action="" method="POST">
账户：<input type="text" name="userName" id="userName" onblur="checkUserName()" /><span id="info"></span><br />
密码：<input type="password" name="usePwd" id="userPwd" /><br />
再次输入密码：<input type="password" name="usePwd" id="userPwd" /><br />
<input type="submit" name="submit" value="提交" /> <input type="reset" name="reset" value="重置" />
</form>

XMLHttpRequest对象的创建： 

 

php代码

var request = false;
function createRequest(){

    try
    {
        request = new XMLHttpRequest();//创建XMLHttpRequest对象
    }
    catch (trymicrosoft) //尝试较新版本的IE浏览器
    {
        try
        {
            request = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (othermicrosoft)//尝试旧版本的IE浏览器
        {
            try
            {
                request = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (failed) //如果还没有成功创建,则保证request的值还是为false
            {
                request = false;
            }
        }
    }

    if(!request)
    {
        alert("Error initializing XMLHttpRequest!");
    }
}

发送信息：checkUserName()方法

javascript代码

function checkUserName(){
        createRequest();//调用createRequest()方法

        var url = "checkUserName.php";//定义发送路径

        request.onreadystatechange = getUserInfo;//定于回调方法

        request.open("POST",url,true);//打开请求

        request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

        request.send(null);//发送请求
    }

回调处理方法：

javascript代码

function getUserInfo(){
        userName = document.getElementById("userName").value;
        if (request.readyState==4||request.readyState=="complete")//判断HTTP就绪状态
        {
            var responseText = request.responseText;//返回的文本

            if(responseText==userName)//用户名相等
                document.getElementById('info').innerHTML = '您输入的用户名已经存在';
            else
                document.getElementById('info').innerHTML = '该用户名可以注册';
        }
    }

接下来看看服务器端代码，其实很简单：checkUserName.php

php代码

echo 'iceup';

是的，就一行。这里我们假定，iceup是已经存在的用户名。

运行效果：

备注：通常情况我们在做验证用户名是否存在时，一般是把用户输入的用户名（参数）发送到服务器端，然后在服务器端处理后，返回相应的提示信息。