Ajax简单应用

 

Ajax 简单应用

qq群：19877329

Mail： yufan27209@qq.com

By：　jfan 2007-06-28

 

引用： Ajax 提供与服务器异步通信的能力，从而使用户从请求 / 响应的循环中解脱出来。借助于 Ajax ，可以在用户单击按钮时，使用 JavaScript 和 DHTML 立即更新 UI ，并向服务器发出异步请求，以执行更新或查询数据库。当请求返回时，就可以使用 JavaScript 和 CSS 来相应地更新 UI ，而不是刷新整个页面。最重要的是，用户甚至不知道浏览器正在与服务器通信： Web 站点看起来是即时响应的。

一句话吧： the lift without refresh。先汗个，refresh好像写错了，知道的人告诉我声。唉。

先来看看js文件吧！这不多说说明，应能看懂。

// JScript 文件

// readNum.js

var xmlHttp;

// 检测用户名是否存在

function CheckName(userName)

{

   //window.alert("1"); // 这些是我调试用的。

   createXMLHTTP();        // 创建XMLHttpRequest对象

   var url="Default2.aspx?Name="+userName; 　　　//用该网页的后台代码来读数据库，先说声，本来想用webService来做，但一直报'Sys未定义‘。有知道的请到http://community.csdn.net/Expert/topic/5626/5626164.xml?temp=.6756861告诉我下。先谢了。

   xmlHttp.open("Post",url,true); // 大家用GET试试，有成功的发信息与我，呵

   xmlHttp.onreadystatechange=checkUserName;

   xmlHttp.send(null);

   //window.alert("2");

}

 

// 创建XMLHttpRequest对象实例

function createXMLHTTP()

{

    if(window.XMLHttpRequest)

    {

        xmlHttp=new XMLHttpRequest();//mozilla 浏览器

    }

    else if(window.ActiveXObject)

    {

        try

        {

            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");//IE 老版本

        }

        catch(e)

        {}

        try

        {

            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//IE 新版本

        }

        catch(e)

        {}

        if(!xmlHttp)

        {

            window.alert(" 不能创建XMLHttpRequest对象实例！" );

            return false;

        }

    }

}

 

// 执行检测用户名回调函数

function checkUserName()

{

    if(xmlHttp.readyState==4)// 判断对象状态

    {

    　　//window.alert("2");

        if(xmlHttp.status==200)// 信息成功返回，开始处理信息

        {

       　　//window.alert("2");

           //if(xmlHttp.responseText=="true")

           //{

                //document.getElementById("btnReg").disabled=false;

                // 让注册按钮失效 

                document.getElementById("btnReg").value=xmlHttp.responseText;// 把返回字符写到button上

                // window.alert("2");

            /*}

            else

            {

                document.getElementById("btnReg").disabled="disabled";                   

            }*/

        }

    }

}

 

在主页面上加上

< head runat="server">

     <title>AJAX 实现用户注册</title>

    <script language="javascript" type="text/javascript" src="readNum.js">

    </script>

</ head >

 

< input id="userName" type="text" onkeyup="CheckName(document.getElementById('userName').value);" />// 把userName的数作参数传给CheckName(),checkname已在js中定义。

< input id="btnReg" style="width: 69px" type="button" value=" 注册" />

 

再来看看后台代码，也就是从数据库中读出数据的代码（ Default2.aspx.cs ）。

        bool flag;

        flag = anc.ExistDate("select * from zw_user where user_name='zjy'");

        Response.Write(flag);

   Response.End();

 

Anc.existdate()是人定义的一个类对象方法，它的作用就是判断表时是否存在 sql要找的值。

图我就不发了，

再：本来想把 ajax返回xml的也发了，但本人笨啊，在js中怎么也读取不出返回来的xml。如本人调试成功再发吧。这次就这样了。

大家评评，是不是好简单啊？呵呵，我也只懂得这么一点皮毛。