AdolphYang

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
AJAX

1　　为什么需要AJAX：

　　　　如果不用AJAX，进行表单提交时 会引起整个界面的刷新，不需要请求服务器的也刷新会占用时间。

　　　　AJAX局部异步刷新：局部 --只刷新一小部分；异步 --在AJAX请求服务器时页面不卡。

　　　　<video>播放视频：<video src="file/性感美女热舞大集合_超清.mp4" autoplay controls></video> (注：chrome不行) 

<body>
    <form id="form1" runat="server">
    <div>
    <video src="file/性感美女热舞大集合_超清.mp4" autoplay controls></video>
    </div>
        <div>
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
            <asp:TextBox ID="TextBox1" runat="server" Height="50px" TextMode="MultiLine" Width="142px"></asp:TextBox><br />
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /><br />
        </div>
    </form>
</body>
WebForm_Video.aspx
 public partial class WebForm_Video : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //读取文件内容
            string path = Server.MapPath("~/Day6/file/comment.txt");
            Label1.Text = File.ReadAllText(path);
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            //写入文件
            string path = Server.MapPath("~/Day6/file/comment.txt");
            File.AppendAllText(path,TextBox1.Text);
        }
    }
WebForm_Video.aspx.cs

 2　　AJAX原理：

　　　　AJAX原理：(1)判断当前浏览器是否支持 XMLHttpRequest；

　　　　　　　　　  (2)发送post请求，因为post请求不会缓存（get缓存），避免了取到过期数据；进行异步请求，不等待服务器返回结果，继续执行，需要监听；

　　　　　　　　　  (3)因为是异步请求，所以在发送请求之前，需要进行监听，以便发送之后能监听到结果返回。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        onload = function () {
            document.getElementById("btnEqual").onclick = function () {
                var txt1 = document.getElementById("txt1").value;
                var txt2 = document.getElementById("txt2").value;
                var xmlhttp = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); //看看浏览器是否支持XMLHttpRequest
                //post请求一定没有缓存，确保不会渠道过期数据 (get会缓存)
                /*
                xmlhttp.open("PSOT", "ajax1.ashx?txt1=" + txt1 + "&txt2=" + txt2, false); //同步请求： 发送之后，一直到服务器返回才会继续执行
                xmlhttp.send();
                alert(xmlhttp.responseText);
                */
                xmlhttp.open("POST", "ajax1.ashx?txt1=" + txt1 + "&txt2=" + txt2, true); //异步请求 ：发送之后，不等待服务器的结果返回就继续执行，所以需要在发送之间确定监听
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState == 4) { //4 表示执行结束
                        if (xmlhttp.status == 200) { //200 表示执行成功
                            if (arguments.length > 0) {
                                document.getElementById("spResult").textContent= xmlhttp.responseText; //firefox
                            } else {
                                document.getElementById("spResult").innerText(xmlhttp.responseText); //ie
                            }
                        } else {
                            alert("执行失败：" + xmlhttp.status);
                        }
                    }
                }
                xmlhttp.send();
            }
        }
    </script>
</head>
<body>
    <div>
        <input type="text" id="txt1" />+<input type="text" id="txt2" />
        <input type="button" id="btnEqual" value="=" />
        <span id="spResult"></span><br />
    </div>
    <div>
        <video src="file/性感美女热舞大集合_超清.mp4" autoplay controls></video>
    </div>
</body>
ajax1.html
public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/html";
            //验证 数字？
            int txt1 = Convert.ToInt32(context.Request["txt1"]);
            int txt2 = Convert.ToInt32(context.Request["txt2"]);
            //Thread.Sleep(2000); //睡2秒才继续执行
            context.Response.Write(txt1 + txt2);
        }
ajax1.ashx

 3　　AJAX的封装：

　　　　封装的关键是：（1）传一个url；

　　　　　　　　　　　（2）传一个onsuccess函数，成功时，该函数会被传入一个响应结果 xhr.responseText；

　　　　　　　　　　   （3）传入一个fail函数，服务器失败时，该函数会被传入一个失败状态码 xhr.status。 myajax.js中： if (fail) { fail(xhr.status);}

function myajax(url,onsuccess,fail){
    //确定是否支持xhr
    var xhr = new XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject('Microsoft.XMLHTTP');
    //准备发送post异步请求
    xhr.open('POST', url, true);
    //监听并获得返回结果
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) { //4 表示执行完
            if (xhr.status == 200) { //200 表示执行成功
                onsuccess(xhr.responseText);
            } else {
                if (fail) { //有传fail才传出失败信息
                    fail(xhr.status);
                }
            }
        }
    }
    //发送请求
    xhr.send();
}
myajax.js
<!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 src="file/jquery-1.11.2.js"></script>
    <script src="file/myajax.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btnEqual').click(function () {
                var txt1 = $('#txt1').val().trim();
                var txt2 = $('#txt2').val().trim();
                myajax('ajax1.ashx?txt1='+txt1+'&txt2='+txt2,
                    function(data){
                        $('#spResult').text(data);
                    },
                    function(status){
                        alert('服务器错误：'+status);
                    }
                )
            })
        })
    </script>
</head>
<body>
    <div>
        <input type="text" id="txt1" />+<input type="text" id="txt2" />
        <input type="button" id="btnEqual" value="=" />
        <span id="spResult"></span><br />
    </div>
    <div>
        <video src="file/性感美女热舞大集合_超清.mp4" autoplay controls></video>
    </div>
</body>
</html>
ajaxLimite.html

4　　检查用户名是否可用：

　　　　在服务器验证：非空/长度/铭感字符/是否已被使用。

　　　　然后，服务器和浏览器的ajax 约定一个data的传递格式。

<!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 src="file/jquery-1.11.2.js"></script>
    <script src="file/myajax.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#username').blur(function () {
                var username = $(this).val().trim();
                myajax('checkUserName.ashx?username='+username,
                    function(data){
                        var strs = data.split('|');
                        if(strs[0]=='ok'){
                            $('#spUserName').text(strs[1]);
                        }else if(strs[0]=='error'){
                            $('#spUserName').text(strs[1]);
                        }else{
                            $('#spUserName').text('服务器错误：'+strs[0]);
                        }
                    },
                    function(status){
                        alert('服务器错误：'+status);
                    }
                )
            });
        })
    </script>
</head>
<body>
    <div>
        <label for="username">用户名：</label><input type="text" name="username" id="username" /><span id="spUserName"></span><br />
    </div>
</body>
</html>
checkUserName.html
public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string username = context.Request["username"];
            //验证 非空/长度/铭感字符/是否存在
            if(string.IsNullOrWhiteSpace(username))
            {
                context.Response.Write("error|请输入用户名");
                return;
            }
            if(username.Length<3)
            {
                context.Response.Write("error|用户名长度不能小于3");
                return;
            }
            if(username.Contains("色情") || username.Contains("毛"))
            {
                context.Response.Write("error|用户名中包含铭感字符");
                return;
            }
            List<object> list =  new MyORM_BLL().SelectModelByField(typeof(TC_STUDENT), "username='" + username + "'");
            if (list.Count == 1)
            {
                context.Response.Write("ok|用户名存在");
            }
            else if (list.Count > 1)
            {
                context.Response.Write("error|服务器错误：用户名重复 "+username);
            }
            else
            {
                context.Response.Write("ok|用户名可用");
            }
        }
checkUserName.ashx

 5　　AJAX案例：加载数据到表格（需要自己定义ajax所传递的字符串格式）

<!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 src="file/jquery-1.11.2.js"></script>
    <script src="file/myajax.js"></script>
    <script type="text/javascript">
        $(function () {
            myajax('ajaxLoad.ashx',
                function (data) {
                    var stus = data.split('|');
                    for (var i = 0; i < stus.length; i++) {
                        var stu = stus[i];
                        var cols = stu.split(',');
                        var id = cols[0];
                        var username = cols[1];
                        var password = cols[2];
                        $('<tr><td>' + id + '</td><td>' + username + '</td><td>' + password + '</td></tr>').appendTo($('#tbodyStudent'));
                    }
                },
                function (status) {
                    alert('服务器错误：'+status);
                })
        })
    </script>
</head>
<body>
    <div>
        <table>
            <thead>
                <tr><th>用户名</th><th>密码</th></tr>
            </thead>
            <tbody id="tbodyStudent">
                
            </tbody>
        </table>
    </div>
</body>
</html>
ajaxLoad.html
public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            List<object> list = new MyORM_BLL().SelectAllModel(typeof(TC_STUDENT));
            //传给ajax的data需要拼接成字符串："1,yzk,123|2,yangguo,123"
            List<string> listNew = new List<string>();
            foreach(object obj in list)
            {
                TC_STUDENT stu = obj as TC_STUDENT;
                listNew.Add(stu.ID + "," + stu.USERNAME + "," + stu.PASSWORD);
            }
            string str = string.Join("|", listNew);
            context.Response.Write(str);
        }
ajaxLoad.ashx

6　　JSON简介：（JSON字符串 转js对象）

　　　　 var jsonStr = '{ "name": "yzk", "age": 3 }';
            var json1 = eval('(' + jsonStr + ')');  //json字符串 转javascript对象 ，eval有安全性问题
            alert(json1.name);

<script type="text/javascript">
        $(function () {
            /*
            var strs = ["yzk", "yang", "tuhan"];
            for (var i = 0; i < strs.length; i++) {
                alert(strs[i]);
            }
            */

            /*
            //对象的json格式
            var jsons = [{ "name": "yzk", "age": 3 }, { "name": "yang", "age": 23 }, { "name": "tuhan", "age": 18 }]
            for (var i = 0; i < jsons.length; i++) {
                alert(jsons[i].name + jsons[i].age);
            }
            */
            /*
            var dog = { "name": "wangwang", "age": 3, "manager": { "name": "小米", "age": 19 } }
            alert(dog.manager.name);
            */

            //把json的字符串格式 解析为js对象
            var jsonStr = '{ "name": "yzk", "age": 3 }';
            var json1 = eval('(' + jsonStr + ')');
            alert(json1.name);
        })
    </script>
json0.html

 7　　Net对象 转JSON字符串：

　　　　json字符串在服务器和浏览器的流程是：Net对象 => json字符串 => JavaScript对象。

　　　　JavaScriptSerializer jss = new JavaScriptSerializer();
           string json = jss.Serialize(person); //把一个net对象 转json字符串

<script type="text/javascript">
            $(function () {
                myajax('json1.ashx',
                    function (data) {
                        //把json字符串 转js对象
                        var person = eval('(' + data + ')');
                        alert(person.name + '|' + person.age);
                    },
                    function (status) {
                        alert('服务器错误：'+status);
                    })
            })
    </script>
json1.html
public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            var person = new { id = 1, name = "yzk", age = 32 };
            JavaScriptSerializer jss = new JavaScriptSerializer();
            string json = jss.Serialize(person); //把一个net对象 转json字符串
            context.Response.Write(json);
        }
json1.ashx

 8　　JQuery的AJAX封装：

　　　　jquery中有三种ajax的封装：$.get() / $.post() / $.ajax({}) ，后者更好。

　　　　服务器所返回的json字符串有三种方式 转JavaScript对象：

　　　　（1）var nums = $.parseJSON(data); // eval('('+data+')') 有安全性问题；

　　　　（2）在ajax中设置 dataType: 'json' ；

　　　　（3）在服务器设置 context.Response.ContentType = "application/json";

<!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 src="/Day6/file/jquery-1.11.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btnEqual').click(function () {
                var t1 = $('#t1').val().trim();
                var t2 = $('#t2').val().trim();
                $.ajax({
                    type: 'post',
                    //dataType: 'json', //2 json字符串 转js对象
                    url:'jqueryAjax.ashx',
                    data: { t1: t1, t2: t2 },
                    success: function (data, status) {
                        /*
                        //1 json字符串 转js对象
                        var nums = $.parseJSON(data);
                        for (var i = 0; i < nums.length; i++) {
                            alert(nums[i]);
                        }
                        */
                        var nums = data; //3 如果设置了json字符串 转js对象，就默认data为js对象
                        for (var i = 0; i < nums.length; i++) {
                            alert(nums[i]);
                        }
                    },
                    error: function () {
                        alert('服务器错误');
                    }
                });
            });
        })
    </script>
</head>
<body>
    <div>
        <input type="text" id="t1" />+<input type="text" id="t2" />
        <input type="button" id="btnEqual" value="=" />
        <span id="spResult"></span><br />
    </div>
</body>
</html>
jqueryAjax.html
public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/json";
            //验证
            int t1 = Convert.ToInt32(context.Request["t1"]);
            int t2 = Convert.ToInt32(context.Request["t2"]);
            int[] nums = new int[] { t1, t2 };
            JavaScriptSerializer jss = new JavaScriptSerializer();
            string json = jss.Serialize(nums);
            context.Response.Write(json);
        }
jqueryAjax.ashx

 9　　json字符串转js对象原理：

　　　　(datatable不能转json字符串，每一row不能自动看成一个对象/带有多余列/违反三层)

　　　　为什么服务器中将 contentType="application/json"，则ajax中就会自动将json字符串转js对象？

　　　　【自己写的ajax进行json优化后】

function myajaxjson(url, onsuccess, fail) {
    //确定是否支持xhr
    var xhr = new XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject('Microsoft.XMLHTTP');
    //准备发送post异步请求
    xhr.open('POST', url, true);
    //监听并获得返回结果
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) { //4 表示执行完
            if (xhr.status == 200) { //200 表示执行成功
                if (xhr.getResponseHeader('Content-Type').indexOf('application/json') >= 0) { //响应头中'Content-Type是application/json，则把json字符串转js对象
                    var jsObj = eval('(' + xhr.responseText + ')');
                    onsuccess(jsObj);
                } else {
                    onsuccess(xhr.responseText);
                }
            } else {
                if (fail) { //有传fail才传出失败信息
                    fail(xhr.status);
                }
            }
        }
    }
    //发送请求
    xhr.send();
}
myajaxjson.js

 10　　案例：AJAX登录

 

<!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 src="file/jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(function () {
            //刷新验证码
            $('#imValidCode').click(function () {
                $(this).attr('src', 'generateValidCode.ashx?' + new Date());
            });

            $('#btnLogin').click(function () {
                $('#spMsg').text('');
                var username = $('#username').val().trim();
                var password = $('#password').val().trim();
                var validCode = $('#validCode').val().trim();
                $.ajax({
                    type: 'post',
                    //dataType:'json',
                    url: 'login1.ashx',
                    data: { username: username, password: password, validCode: validCode },
                    success: function (data) {
                        if (data.Status == 'error') {
                            $('#spMsg').text(data.Msg);
                        } else if (data.Status == 'ok') {
                            $('#spMsg').text(data.Msg);
                        } else {
                            $('#spMsg').text(data.Msg); //服务器错误
                        }
                    },
                    error: function () {
                        alert('服务器错误');
                    }
                });
            });
        })
    </script>
</head>
<body>
    <div>
        <table>
            <tr><td>用户名</td><td><input type="text" id="username" /></td></tr>
            <tr><td>密码</td><td><input type="password" id="password" /></td></tr>
            <tr><td><img src="generateValidCode.ashx" id="imValidCode" /></td><td><input type="text" id="validCode" /></td></tr>
            <tr><td><input type="button" id="btnLogin" value="登录" /></td><td><span id="spMsg" style="color:red"></span></td></tr>
        </table>
    </div>
</body>
</html>
login1.html
using Console_Core.BLL;
using Console_Core.Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Web.SessionState;

namespace Web_Cassini.Day6
{
    /// <summary>
    /// login1 的摘要说明
    /// </summary>
    public class login1 : IHttpHandler, IRequiresSessionState
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/json";
            string username = context.Request["username"];
            string password = context.Request["password"];
            string validCode = context.Request["validCode"];
            //验证 非空/验证码/用户是否存在/密码是否正确
            string validCodeInServer = (string)context.Session[MyConstClass.LOGINVALIDCODE];
            if(validCode!=validCodeInServer){
                context.Response.Write(new JavaScriptSerializer().Serialize(new { Status = "error", Data = "", Msg = "验证码错误" }));
                return;
            }
            if(username.IndexOf('\'')>=0) //避免参数化攻击
            {
                context.Response.Write(new JavaScriptSerializer().Serialize(new { Status = "error", Data = "", Msg = "用户名中含有特殊字符"}));
                return;
            }
            List<object> list = new MyORM_BLL().SelectModelByField(typeof(TC_STUDENT), "USERNAME='" + username + "'");
            if(list.Count<=0)
            {
                context.Response.Write(new JavaScriptSerializer().Serialize(new { Status = "error", Data = "", Msg = "用户名不存在" }));
                return;
            }
            if(list.Count>1)
            {
                context.Response.Write(new JavaScriptSerializer().Serialize(new { Status = "error", Data = "", Msg = "服务器错误，存在多个用户:"+username+",请联系管理员" }));
                return;
            }
            TC_STUDENT stu=list[0] as TC_STUDENT;
            string passwordInServer=stu.PASSWORD;
            if(password!=passwordInServer)
            {
                context.Response.Write(new JavaScriptSerializer().Serialize(new { Status = "error", Data = "", Msg = "密码错误" }));
                return;
            }
            bool flag = StoreSession(context,stu.ID, stu.USERNAME);
            context.Response.Write(new JavaScriptSerializer().Serialize(new { Status = "ok", Data = "", Msg = "登录成功" }));
        }

        /// <summary>
        /// 存入session
        /// </summary>
        /// <param name="id">id</param>
        /// <param name="username">用户名</param>
        /// <returns>是否成功</returns>
        private bool StoreSession(HttpContext context,long id, string username)
        {
            context.Session[MyConstClass.LOGINID] = id;
            context.Session[MyConstClass.LOGINUSERNAME] = username;
            return true;
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
login1.ashx
 public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "image/jpeg";
            Random ran = new Random();
            int num = ran.Next(1000, 10000);
            context.Session[MyConstClass.LOGINVALIDCODE] = num.ToString();

            using(Bitmap map=new Bitmap(60,30))
            {
                using(Graphics g=Graphics.FromImage(map))
                using(Font font=new Font(FontFamily.GenericSerif,15))
                {
                    g.DrawString(num.ToString(), font, Brushes.Red, 0, 0);
                }
                map.Save(context.Response.OutputStream, ImageFormat.Jpeg);
            }
        }
generateValidCode.ashx

 11　　无刷新评论：

　　　　数据库中显示到页面的日期（/Date(1351699200000)/）有两种方式转换格式：

　　　　（1）在服务器端转换：string date =  com.CREATEDATETIME.ToString() ；

　　　　（2）在JavaScript中转换：

　　　　 function getDateStr(dateDB) { //传数据库中日期
                var numStr = dateDB.replace(/[^0-9]/g, '');
                var num = parseInt(numStr);
                var strDate = new Date(num);
                var sDate = strDate.toLocaleString().split(' ')[0];
                return sDate.replace(/年|月/g, '-').replace(/日/g, '');
            }

<!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 src="file/jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#txtArea').text('');
            //转日期：
          
            function getDateStr(dateDB) { //传数据库中日期
                var numStr = dateDB.replace(/[^0-9]/g, '');
                var num = parseInt(numStr);
                var strDate = new Date(num);
                var sDate = strDate.toLocaleString().split(' ')[0];
                return sDate.replace(/年|月/g, '-').replace(/日/g, '');
            }
            //var d = getDateStr(1352270422234); // 改为json 过来的值$('#date').html(d);
            //alert(d);

            //加载
            $.ajax({
                type: 'post',
                url: 'comment.ashx',
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        $('#tbody_comment').append($('<tr><td>' + data[i].MSG + '</td><td>' + getDateStr(data[i].CREATEDATETIME) + '</td><td>' + data[i].IPADDRESS + '</td></tr>'));
                    }
                },
                error: function () {
                    alert('服务器错误');
                }
            });

            //评论
            $('#btnComment').click(function () {
                $('#spMsg').text('');
                var msg = $('#txtArea').val().trim();
                $.ajax({
                    type: 'post',
                    url: 'comment.ashx',
                    data: { msg: msg, comment: 'comment' },
                    success: function (data) {
                        if (data.Status == 'error') {
                            $('#spMsg').text(data.Msg);
                        } else if (data.Status == 'ok') {
                            var dataNew = data.Data;
                            $('#tbody_comment').append($('<tr><td>' + dataNew.MSG + '</td><td>' + dataNew.CREATEDATETIME + '</td><td>' + dataNew.IPADDRESS + '</td></tr>'));
                        } else {
                            alert('服务器出错:' + data.Status);
                        }
                    },
                    error: function () {
                        alert('服务器错误');
                    }
                });
            });
        })
    </script>
</head>
<body>
    <div>
        <table>
            <thead>
                <tr><th>评论内容</th><th>时间</th><th>IP</th></tr>
            </thead>
            <tbody id="tbody_comment">

            </tbody>
        </table>
    </div>
    <div>
        <textarea id="txtArea"></textarea><span id="spMsg"></span><br />
        <input type="button" id="btnComment" name="comment" value="评论" />
    </div>
</body>
</html>
comment.html
using Console_Core.BLL;
using Console_Core.Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;

namespace Web_Cassini.Day6
{
    /// <summary>
    /// comment 的摘要说明
    /// </summary>
    public class comment : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/json";
            string comment = context.Request["comment"];
            if(string.IsNullOrWhiteSpace(comment)) //加载
            {
                List<object> list = new MyORM_BLL().SelectAllModel(typeof(TC_COMMENT));
                context.Response.Write(new JavaScriptSerializer().Serialize(list));
            }
            else if (comment == "comment")
            {
                string msg = context.Request["msg"];
                //验证
                if(string.IsNullOrWhiteSpace(msg))
                {
                    context.Response.Write(new JavaScriptSerializer().Serialize(new { Status="error",Data="",Msg="评论不能为空"}));
                    return;
                }
                if(msg.Contains("暴力"))
                {
                    context.Response.Write(new JavaScriptSerializer().Serialize(new { Status = "error", Data = "", Msg = "评论不能有暴力" }));
                    return;
                }
                string ipAddress = context.Request.UserHostAddress;
                TC_COMMENT com=new TC_COMMENT();
                com.MSG=msg;
                com.CREATEDATETIME=DateTime.Now;
                com.IPADDRESS=ipAddress;
                try
                {
                    bool flag = new MyORM_BLL().InsertModel(com, "SE_TC_STUDENT");
                    context.Response.Write(new JavaScriptSerializer().Serialize(new { 
                        Status = "ok", 
                        Data = new { MSG = msg, CREATEDATETIME = com.CREATEDATETIME.ToString(), IPADDRESS=ipAddress },  //目的是把时间转string
                        Msg = "评论不能有暴力" }));
                }
                catch (Exception ex)
                {
                    context.Response.Write(new JavaScriptSerializer().Serialize(new { Status = "error", Data = "", Msg = "服务器错误："+ex.Message }));
                    return;
                }

            }
            else
            {
                throw new Exception("comment错误："+comment);
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
comment.ashx

 11　　（1）序列化表单：

　　　　当需要提交的数据太多，需要一个一个的取获得元素的值，这时可以用“序列化表单”的方法，把表单里的内容全部一次性提交给服务器，

　　　　var form1 = $('#form1').serializeArray(); //序列化表单

　　　　data: form1，

<!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 src="file/jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btnSub').click(function () {
                var form1 = $('#form1').serializeArray(); //序列化表单
                $.ajax({
                    type: 'post',
                    url: 'formSerializer.ashx',
                    data: form1,
                    success: function (data) {
                        if (data.Status == 'error') {
                            $('#spResult').text(data.Msg);
                        } else if (data.Status == 'ok') {
                            alert(data.Data.username + '|' + data.Data.password);
                            $('#spResult').text(data.Msg);
                        } else {
                            alert('服务器错误：'+data.Status);
                        }
                    },
                    error: function () {
                        alert('服务器错误');
                    }
                });
            });
        })
    </script>
</head>
<body>
    <form id="form1">
        <input type="text" name="username" /><br />
        <input type="text" name="password" /><br />
        <input type="button" id="btnSub" value="提交" /><span id="spResult"></span><br />
    </form>
</body>
</html>
formSerializer.html
public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/json";
            string username = context.Request["username"];
            string password = context.Request["password"];
            if (string.IsNullOrWhiteSpace(username))
            {
                context.Response.Write(new JavaScriptSerializer().Serialize(new { Status = "error", Data = "", Msg = "用户名为空" }));
                return;
            }
            if (string.IsNullOrWhiteSpace(password))
            {
                context.Response.Write(new JavaScriptSerializer().Serialize(new { Status = "error", Data = "", Msg = "密码为空" }));
                return;
            }
            context.Response.Write(new JavaScriptSerializer().Serialize(new { Status = "ok", Data = new { username=username,password=password}, Msg = "成功" }));
        }
formSerializer.ashx

  　　  （2）全局事件（用户全局处理）

　　　　当页面提交给服务器后，需要等待一段时间，这段时间里需要提示一下用户，这可以给<body>绑定一个全局事件才处理，

　　　　同时每次ajax都需要判断error的情况，也可以绑定一个全局事件来处理。

　　　　 $('body').bind('ajaxSend', function () { //绑定全局事件 ----未成功 ----？？？？？？？？
                $('#imLoading').show(); //alert('loading');
            }).bind('ajaxComplete', function () {
                $('#imLoading').hide(); //alert('loaded');
            }).bind('error', function () {
                alert('服务器错误');
            });

<!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 src="file/jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(function () {
            //绑定的全局事件
            $('body').bind('ajaxSend', function () {
                $('#imLoading').show(); //alert('loading');
            }).bind('ajaxComplete', function () {
                $('#imLoading').hide(); //alert('loaded');
            }).bind('error', function () {
                alert('服务器错误');
            });

            $('#btnSub').click(function () {
                var username = $('#username').val().trim();
                var password = $('#password').val().trim();
                $.ajax({
                    type: 'post',
                    url: 'globalEvent.ashx',
                    data: {username:username, password: password },
                    success: function (data) {
                        if (data.Status == 'error') {
                            $('#spResult').text(data.Msg);
                        } else if (data.Status == 'ok') {
                            alert(data.Data.username + '|' + data.Data.password);
                            $('#spResult').text(data.Msg);
                        } else {
                            alert('服务器错误：'+data.Status);
                        }
                    }
                    //error的情况 交给了body全局事件
                });
            });
        })
    </script>
</head>
<body>
        <input type="text" id="username" /><br />
        <input type="text" id="password" /><br />
        <input type="button" id="btnSub" value="提交" /><span id="spResult"></span><br />
    <img id="imLoading" src="/Day6/file/loading.gif" style="display:none" />
</body>
</html>
globalEvent.html
public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/json";
            string username = context.Request["username"];
            string password = context.Request["password"];
            Thread.Sleep(3000);
            if (string.IsNullOrWhiteSpace(username))
            {
                context.Response.Write(new JavaScriptSerializer().Serialize(new { Status = "error", Data = "", Msg = "用户名为空" }));
                return;
            }
            if (string.IsNullOrWhiteSpace(password))
            {
                context.Response.Write(new JavaScriptSerializer().Serialize(new { Status = "error", Data = "", Msg = "密码为空" }));
                return;
            }
            context.Response.Write(new JavaScriptSerializer().Serialize(new { Status = "ok", Data = new { username=username,password=password}, Msg = "成功" }));
        }
globalEvent.ashx --和formSerializer.ashx相同

 

　　　　

　　　　

 

posted on 2015-09-11 17:31  AdolphYang  阅读(220)  评论(0)    收藏  举报