本实验步骤
1.在sqlServer中，时间插入方法：： getdate()方法
2.服务器端的，写《《ajax链接数据库程序》》需要捕获异常（但是如果是出错了。服务器端是看不到程序那里出错的，所以为了调试方便查找错误不使用try…catch）
3.如果是加载不出来数据，右键，查看源代码，很可能是代码漏写了标记了
4.时间不对的话，在序列化时间的时候，应该在服务器端将时间ToString（)转化为字符串。
5..net中所有的类都是继承自Object类
本程序，设计步骤：
（一）.新建一个html页面；
1.建立ul无序列表,给ul起个全局变量id=“ulMsgs”；
2.建立文本框，设置id，和列，行属性；
3.建立一个button按钮进行，提交用；
4.拖进一个jquery类库。
5.在页面加载函数中，这里分两个部分来写：（完全可以放在一个一般处理程序中的，只是需要一个参数action判断就可以了）
1.页面加载，显示已有的评论。使用ajax请求服务器
2.页面加载，监听“发表”按钮
问题来了：ajax在服务器中进行请求的时候，是同时投递到一个页面中的CommentTest.ashx中的。怎么来判断上边的两种情况的。。。。答案是：用action action='loadMsgs'和action='addNew'
1.显示评论ajax：
在data键值对中传递action：‘loadMsgs’；在success函数中进行for循环遍历所有的评论，对象；绑定到ul标签中；
2.添加评论ajax：
在data键值对中传递，评论内容，和action：'addNew'；在success函数中：加特殊处理，显示刚刚发的内容为：时间：“刚刚”，IP:"本机"，并将文本框的的内容清空；
6.只有error函数添加上了，才可以在浏览器中看到错误的内容。
（二）.新建一个CommentsTest.ashx;
1.设置把报文返回类型为application/json
2.根据ajax请求请求的action的类型判断是添加评论还是展示评论
代码块：
CommentTest.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript"> $(function () { $.ajax({ type: "post",url: "CommentTest.ashx",data: { action: "loadMsgs" },success: function (data) { for (var i = 0; i < data.length; i++) { var msg = data[i];//每一个是一条评论 //将评论内容显示到ul中...接下来需要写CommentTest.ashx文件了...点不出来属性了。。 $("#ulMsgs").append($("<li>发表时间：" + msg.CreateDateTime + "；IP地址：" + msg.IP + "；</li><li>消息：" + msg.Msg + "</li><br />")); } },//通讯建立 error: function () { alert("请求获取已有评论消息失败"); } });//2.评论展示“（）”中加一个“{ }” $("#btnPost").click(function () { var msg = $("#txtMsg").val(); $.ajax({ type: "post",data: { msg: msg,action: 'addNew' },success: function (data) { if ("ok" == data.Status) { $("#ulMsgs").append($("<li>发表时间：刚刚；IP地址：本机；消息：" + msg + "</li>")); $("#txtMsg").val("");//发表成功后清空文本框 } else if ("error" == data.Status) { alert(data.Msg); } },//评论插入 error: function () { alert("发表失败"); } }); });//提交事件 });//1.页面加载 </script>
</head>
<body>
<ul id="ulMsgs">
</ul>
<textarea id="txtMsg" cols="50" rows="5">
</textarea>
<input type="button" id="btnPost" value="发表" />
</body>
</html>
CommentTest.ashx
<%@ WebHandler Language="C#" Class="CommentTest" %>
using System;
using System.Web;
using System.Data;
using Web1;
using System.Collections.Generic;
using System.Web.Script.Serialization;
using System.Data.sqlClient;
public class CommentTest : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
//1)..设置把报文返回类型为application/json
context.Response.ContentType = "application/json";
//2)..根据ajax请求参数的action的值判断是添加评论还是展示评论
string action = context.Request["action"];
//3)..展示评论
if ("loadMsgs" == action)
{
//1》.从数据库中查询评论
DataTable dt = sqlHelper.ExecuteQuery("select * from T_Comments");
//2》.将评论内容放到一个List<Object>类型的数组中,方便序列化为json标准字符串，同时因为json不能对DataTable复杂的对象进行序列化
List<Object> list = new List<object>();
foreach (DaTarow row in dt.Rows)
{
string msg = (string)row["Msg"];
DateTime createDT = (DateTime)row["CreateDateTime"];
string ip = (string)row["IP"];
list.Add(new { Msg = msg,CreateDateTime = createDT.ToString(),IP = ip });
}
//3》.将list集合序列化为字符串
// JavaScriptSerializer js = new JavaScriptSerializer();
//4》.将序列化的结果输出到浏览器端
// context.Response.Write(js.Serialize(list));
//简化写：
context.Response.Write(new JavaScriptSerializer().Serialize(list));
}
else if ("addNew" == action)//4)..插入评论
{
//1>.从浏览器的请求报文中获得评论内容msg和Ip地址。
string msg =context.Request["Msg"];
string ip = context.Request.UserHostAddress;
if (msg.Contains("TMD")||msg.Contains("毛主席")||msg.Contains("去死")||msg.Contains("tmd"))
{
context.Response.Write(new JavaScriptSerializer().Serialize(new { Status="error",Msg="请文明用语"}));
return;
}
//2>.插入数据库
sqlHelper.ExecuteNonQuery("insert into T_Comments(Msg,CreateDateTime,IP) values(@Msg,GetDate(),@IP)",new sqlParameter("@Msg",msg),new sqlParameter("@IP",ip));
//3>.返回浏览器端“发表成功了”
context.Response.Write(new JavaScriptSerializer().Serialize(new { Status="ok",Msg="发表成功"}));
}
else //5)..action异常(防御性编程)
{
throw new Exception("action错误");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
数据表
运行结果图
出现的问题，及解决
学会使用开发者工具找错误，同时使用$.ajax()的好处，可以看到错误的出在那里
总结
- 进一步了解了ajax
- 学会在浏览器中调试javascript
- html标签的熟练度