一个简单的例子来演示一下Ajax 的XMLHttpRequest请求

 

演示结果:

image

 

image

 

 

包括两个文件

1.register.aspx

2.UserName.txt

register.aspx的内容:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="register.aspx.cs" Inherits="Mytest_AjaxHttprequest_register" %>

<!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 runat="server">
    <title>无标题页</title>
    <script language"javascript" >
    function checkName()
    {
    creatXMLHTTP();
    //以下代码验证是否创建 xmlhttprequest 对象成功~
    if(xmlHttp!=null)
    {
    //创建响应函数
    xmlHttp.onreadystatechange=httpStateChange;
    //建立和发送请求
    xmlHttp.open("get","UserName.txt",true);
    xmlHttp.send(null);
    }else{
    alert("你的浏览器不技术xmlhttp, 请更换浏览器后重试!");}
    }
    function httpStateChange()
    {
        if(xmlHttp.readyState==4)
        {
            if(xmlHttp.status==200||xmlHttp.status==0)
            {
            //获取服务器上的数据
            var userNames=xmlHttp.responseText;
            //将获取的对象分隔成数组来进行处理
            var arrUserName=userNames.split(";");
            var bFlag = false;
                for(i=0 ;i<arrUserName.length; i++)
                {
                    if(arrUserName[i]==myForm.myName.value)
                    {
                    bFlag=true;
                    break;
                    }
                }
             //在网页中发出提示
             var node=document.getElementById("myDiv");
             if(bFlag)
             {
             node.firstChild.nodeValue=" 用户名已经存在 ";
             myForm.submitButton.Enabled=true;
             }
             else
             {
             node.firstChild.nodeValue=" 用户名已经不存在 "
             myForm.submitButton.Enabled=false;
             }
            }
        }
    }
    var xmlHttp = null;
    function creatXMLHTTP()
    {
    if (window.ActiveXObject)
    {
        var  arrXmlHttpTypes=['microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP'];
        for(var i=1;i<arrXmlHttpTypes.length;i++)
        {
        try {
        xmlHttp=new ActiveXObject(arrXmlHttpTypes[i]);
        break;
        }
        catch(ex)
        {
        }
        }
    }else if(window.XMLHttpRequest)
    {
    xmlHttp=new XMLHttpRequest();
    }
    }
    </script>
</head>
<body>
    <form id="myForm"  runat="server">
    <div align="center">
        new user registe<br />
        UserName:<asp:TextBox ID="myName"  runat="server"
            onblur="javascript:checkName();" ></asp:TextBox>
        <span id="myDiv" >  &nbsp;</span><%--此区域用来显示用户名的验证信息--%>
        <br />
        Password:<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <br />
        password 2:<asp:TextBox ID="TextBox3" runat="server" Width="128px"></asp:TextBox>
        <br />
        <br />
        <asp:Button ID="submitButton" runat="server" Text="Button" Enabled="false"/>
    </div>
    </form>
</body>
</html>

UserName.txt内容:

张三;李四;王五;钱六