Jquery：十分钟打造一个类似是Twitter的系统，附源代码

Jquery有一个特点：一看就会，一听就懂，但是真的遇到问题，不知道如何下手，本文给出了一个简单的例子，说明如何使用JQuery，这里是在一个php版本上修改的，主要没有时间做，前不久做了一个http://portal.dotnetcms.org/ep/users/addressbook.aspx 是模仿Outlook的地址薄的，

先看运行效果

制作方法：

1）建立SQL数据库

代码

CREATE TABLE [dbo].[microblog](
    [id] [int] IDENTITY(1,1) NOT NULL,
    [message] [nvarchar](500) COLLATE Chinese_PRC_CI_AS NULL,
    [datetime] [datetime] NULL CONSTRAINT [DF_microblog_datetime]  DEFAULT (getdate()),
 CONSTRAINT [PK_microblog] PRIMARY KEY CLUSTERED 
(
    [id] ASC
)WITH (PAD_INDEX  = OFF, IGNORE_DUP_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]

2)防止一个Form，不需要runat=server

代码

<form id="commentForm">
        <fieldset>
            <legend><span id="counter"></span> Characters</legend>
                <textarea id="message" name="message" ></textarea>
                <input name="btnSign" class="submit" type="submit" id="submit" value="Update" />
        </fieldset>
    </form>

3.挂钩button的submit和textbox的keyup事件，提交与现实输入字符个数

代码

    $(document).ready(function(){
        $("#commentForm").submit(function(){
            if ($("#message").val().length == 0) {
                alert("Please enter your message!");
                $("#message").focus();
                return false;
            }        
            $.post("getdate.aspx",{
                        message: $("#message").val(),
                        action: "postmsg"
                    }, function(xml) {
                $("#comm").html("The latest Update: ");
                addMessages(xml);
            });
            return false;
        });
        $("#counter").html($("#message").val().length + "");
        $("#message").keyup(function(){
        
            $("#counter").html($(this).val().length);            
        });        
        
    });

5.提交数据由getdate.aspx处理，返回XML

注意：Response的设置

Response.ContentType = "text/xml";
Response.Cache.SetCacheability(HttpCacheability.NoCache);

分别表示是xml和不缓存

代码

 Response.ContentType = "text/xml";
        Response.Cache.SetCacheability(HttpCacheability.NoCache);
        string message=Request["message"];
        string sql = " INSERT INTO microblog (message) VALUES ('" + message + "') ";
        string con=System.Web.Configuration.WebConfigurationManager.ConnectionStrings["connectionstring"].ToString();
        SqlCommand d = new SqlCommand(sql, new SqlConnection(con));
        d.Connection.Open();
        d.ExecuteNonQuery();
        d.Connection.Close();
        
     string result="<?xml version=\"1.0\"?>\n";
  result+= "\t<message>\n";
 result+= "\t\t<text>"+message+"</text>\n";
 result += "\t</message>\n";

 Response.Write(result);

OK，一个简单的twitter做成了

具体请点击这里下载源代码，运行SQL下的脚本，更改web.config里数据库链接即可

--------------------------------------------------------------------------------------------------------------

以下是广告时间：

Dotnetcms Portal主要用于内网建设，提供新闻、图片。会议室预定、调查、个人计划等，Dotnetcms每周日更新网站，上次更新了个人日历，演示地址

http://portal.dotnetcms.org/ep/book/Myscheduler.aspx

更多信息，请访问 www.dotnetcms.org