在公司面试的时候,领导问我:用C#语言做过B/S架构的小实验程序吗?当时我弱弱的说:没有,只用.aspx拖过控件!领导说:嗯,你很实在啊,来吧!
进了公司,师傅给我一些资料和电子书说好好看资料,争取两个星期内做出做简单的B/S小程序。当时我一头雾水,根本不知道从哪里开始学习,HTML,JavaScript,CSS,DOM,Ajax,jQuery这些都没听说过,我只在学校里学过C,C++,数据结构,那些概念水平之类的东东,谁知道这些。硬着头皮上,看资料也是迷迷糊糊,似懂非懂的感觉,非常迷茫,那段时间相当难受。
现在想想这是多么的简单,只是自己没有悟出那个理。做出一个小实验程序,根本不需要精通这些涉及到的所有程序设计语言,只要知道其中最常用的那几句就行,至于工作中需要的知识,你完全可以以后在工作中慢慢学的,遇到不会的知识点,完全可以查程序手册。所以今天有点空,随手写了点简单的代码,给那些像我一样啥也不会的朋友玩玩(特别声明:C#高手绕过,这是哄孩子级玩的),起码能在面试的时候也能说两句,不至于像我那样狼狈。呵呵
Now,给出史上最简单的基于B/S框架能实现增删改查的源码,一共3部分
第一部分:用于前台显示的部分(html)
<html >
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>显示页面</title>
        <script src="JavaScript/查询.js"></script>
        <script src="JavaScript/删除.js"></script>
        <script src="JavaScript/修改.js"></script>
        <script src="JavaScript/增加.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                用户ID:<input id="selectId" type="text" />姓 名:<input id="slectName" type="text" />
                <input id="Button1" type="button" value="查询" onclick=" GetTextFromBack() " />
                <br />
            </div>
            <div>
                用户ID:<input id="deleteId" type="text" />
                <input id="Button2" type="button" value="删除" onclick=" DelectText() " />
                <br />
            </div>
            <div>
                增加姓名:<input id="insertName" type="text" />
                备注:<input id="insertBZ" type="text" />
                <input id="button4" type="button" value="增加" onclick=" GetInsert() " />
                <br />
            </div>
            <div>
                用户ID:<input type="text" id="updateId"/>
                修改姓名:<input type="text" id="updateName"/>
                <input type="button" id="Button3" value="修改" onclick="UpData()"/>
            </div>
        </form>
    </body>
</html>
第二部分:用于中间数据传递的部分(js)
function GetInsert() {
    var uname = ElementById("insertName").value;
    var ubz = ElementById("insertBZ").value;
    var xmlHttp;
    try {
        xmlHttp = new XMLHttpRequest();
    } catch(e) {
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                alert("您的浏览器不支持AJAX");
            }
        }
    }
//查询数据
xmlHttp.open("post", "AJAX/A.aspx?uId=" + escape(uid), true);
    xmlHttp.send("");
    adystatechange = function() {
        if (adyState == 4) {
            if (xmlHttp.status == 200) {
                var Bodys = sponseText;
                if (Bodys == 'no') {
                    alert("数据库中没有该条记录");
                } else {
                    alert("查询成功");
                    ElementById("selectName").value = Bodys;
                }
            }
        }
    };
//删除部分
    adystatechange = function() {
        if (adyState == 4) {
            if (xmlHttp.status == 200) {
                var Bodys = sponseText;
                if (Bodys == 'ok') {
                    alert("已成功删除该条记录");
                } else
                    alert("删除失败");
            }
        }
    };
    xmlHttp.open("post", "AJAX/B.aspx?uid=" + escape(uid), true);
    xmlHttp.send("");
数据库简单吗//修改的部分
    adystatechange = function() {
        if (adyState == 4) {
            if (xmlHttp.status == 200) {
                var Bodys = sponseText;
                if (Bodys == 'yes')
                    alert("修改成功");
                else
                    alert("修改失败");
            }
        }
    };
        xmlHttp.open("post", "AJAX/D.aspx?uid=" +uid+"&uname="+escape(uname), true);
    xmlHttp.send("");
//增加的部分
    adystatechange = function() {
        if (adyState == 4) {
            if (xmlHttp.status == 200) {
                var Bodys = sponseText;
                if (Bodys == 'yes')
                    alert("增加新数据成功");
                else
                    alert("增加数据失败");
            }
        }
    };
    xmlHttp.open("post", "AJAX/C.aspx?uname=" + escape(uname) + "&ubz=" + escape(ubz), true);