Ajax示例

今天想起很久没有练练AJAX了，于是做了个小东西，有点像聊天室的感觉，其功能也很简单，主要有：
添加内容，
查看所有内容，
在输入姓名的时候查询，像GOOGLE一样，
一定时间内刷新前10条内容

我觉得在做这种东西的时候，先要可见，再添加，于是先做了最后一个功能
CS的代码也很简单
先有一个根据SQL读取数据的方法：

private void DisPlay(string sql)
    {
        SqlConnection con = new SqlConnection(sqlStr);
        con.Open();
        SqlDataAdapter da = new SqlDataAdapter(sql, con);
        DataTable dt = new DataTable();
        da.Fill(dt);
        con.Close();
        bool pd = true;
        string str = string.Empty;
        foreach (DataRow dr in dt.Rows)
        {
            string data = string.Empty;
            if (pd)
            {
                data = "<div style='background-color: DarkSlateBlue; width: 300px; color: Seashell'>{0}_{1}_{2}_{3}<br></div>";
                pd = false;
            }
            else
            {
                data = "<div style='background-color: DarkGray; width: 300px; color: Seashell'>{0}_{1}_{2}_{3}<br></div>";
                pd = true;
            }
            data = data.Replace("_", "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
            data = string.Format(data, dr["Id"].ToString(), dr["Name"].ToString(), dr["Message"].ToString(), dr["SendData"].ToString());
            str += data;
        }
        Response.Write(str);
    }

之后再加一个加载数据的方法：

 private void LoadData()
    {
        string sql = "select top 10 * from messages order by Id desc";
        DisPlay(sql);
    }

这样就完成了服务器端的代码，接下来搞定JS，
主要有几个方法是AJAX基本上定了的方法，

 var httpRequest    
    function CreateXmlHttpRequest()
    {
        httpRequest = false;
        if(window.XMLHttpRequest)
        {//Mozilla浏览器
            httpRequest = new XMLHttpRequest();
            if(httpRequest.overrideMimeType)
            {
                httpRequest.overrideMimeType("text/xml");
            }
        }
        else if(window.ActiveXObject)
        {//IE浏览器
            try
            {
                httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch(e)
            {
                try
                {
                    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                }            
                catch(e)
                {
                
                }
            }
        }
        if(!httpRequest)
        {
            window.alert("Can't Create XMLHttpRequest");
            return false;
        }
    }
    
    function SendRequest(url)
    {
        if(CreateXmlHttpRequest() != false)
        {
            httpRequest.onreadystatechange=CellBack;
            httpRequest.open("GET",url,true);
            httpRequest.send(null);
        }
    }
    
    function CellBack()
    {
        if(httpRequest.readyState==4)
        {
            if(httpRequest.status==200)
            {
                var result = httpRequest.responseText;
                $(disPlayId).innerHTML = httpRequest.responseText;
            }
            else
            {
                $(disPlayId).innerHTML="返回数据错误";
            }
        }
        else
        {
            $(disPlayId).innerHTML="正在读取数据";
        }
    }

调用就是调SendRequest方法就行了，要想显示的地方不同的话，。可以改CellBack方法，
再写个获取数据的方法：

function Gets()
{
    var url="ReturnResult.aspx?opertion=Gets";
    disPlayId="show";
    SendRequest(url);
}

在最前面加一句setInterval("Gets()",5000);

基它几个功能就是大同小异了，不过有一点，如果不做任何处理的话，输入中文会是乱码的，我找了很多种方法，只有一种最好用，也最简单：
在Web.Config中添加配置
<globalization requestEncoding="gb2312" responseEncoding="gb2312" />
就可以了。
我随便把代码文件一起传到这上面来，以后好下载，哈哈。
AJAX小示例（类似聊天室）