AJAX+JSON+DOJO+MYSQL 登陆和查询

第一步: 建立mysql 数据库,创建noteuser表和增加1条信息

sql 代码

CREATE TABLE `noteuser` (
  `userid` int(5) NOT NULL auto_increment,
  `username` varchar(16) character set utf8 default NULL,
  `password` varchar(16) character set utf8 default NULL,
  `regtime` datetime default NULL,
  `NickName` varchar(16) character set utf8 default NULL,
  `Sex` int(1) unsigned default NULL,
  `Email` varchar(15) character set utf8 default NULL,
  `age` int(2) unsigned default NULL,
  PRIMARY KEY  (`userid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin;


INSERT INTO noteuser(username,password,regtime,NickName,Sex,Email,age) VALUES ('YuKy','11',now(),'Zoo.YuKy',1,'[e-mail]',21);
//自己可以增加多几条信息

第二步:1.下载DOJO:http://dojotoolkit.org/downloads 我用的是dojo-0.4.3-ajax

           2.下载jsonrpc.js和jsonrpc-1.0.jar,http://oss.metaparadigm.com/jsonrpc-dist/json-rpc-java-1.0.zip

           3.在C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\ 建立新文件夹dojo_doc,把dojo-0.4.3-ajax解压到dojo文件夹内,然后把json-rpc-java-1.0.zip里的jsonrpc.js放在...\webapps\dojo_doc\js的文件夹里面.在js文件夹里增加clock.js,contentpane.js和aa.js.(其实clock.js和contentpane.js就是dojo-0.4.3-ajax里面的\demos\gfx\clock.html和\tests\test_docs.html的例子)

     把clock.html和test_docs.html的javascript(从dojo.require("");这里开始到)部分保存在clock.js和contentpane.js里面.
     记得把..\demos\gfx\下的\images\时钟图片也复制到..\webapps\dojo_doc\里.

//--把下面的代码复制到aa.js

js 代码

function clrscr()
{
    resultNode.value = "";
}

function print(s)
{
    resultNode.value += "" + s;
    resultNode.scrollTop = resultNode.scrollHeight;
}


function onLoad()
{
    resultNode = document.getElementById("result");

    try {
    jsonrpc = new JSONRpcClient("JSON-RPC");
    } catch(e) {
    if(e.message) alert(e.message);
    else alert(e);
    }
}

function loginUser(){
    var user = document.getElementById("username").value;
    var pass = document.getElementById("password").value;

    if(user == null || pass == null ||user == "" || pass == ""){
        alert("Please enter username and password!");
        }else{
            var ss = jsonrpc.user.loginUser(user,pass);
            alert(ss);
            }
    }

function dogetUserInfo(){
    clrscr();
     print("Running user\n\n");
      try {
            print("user.getUserInfo()");
            print(" returns " + jsonrpc.user.getUserInfo() + "\n");
          } catch(e) {
    print(" Exception: \n\n" + e);
    }
}

第三步:编写JAVA程序,jsonTest.java

java 代码

package com.metaparadigm.jsonrpc.test;

import java.io.Serializable;
import java.sql.*;


public class jsonTest implements Serializable
{
    private final static long serialVersionUID = 1;
    private String strSql;
    private ResultSet rs;
    private Statement stmt = null;
    private Connection conn = null;

    public Connection getConnection(){
        try{
            Class.forName("org.gjt.mm.mysql.Driver");
            conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8","root","root");
        }catch(Exception ex){
            ex.printStackTrace();
        }
        return conn;
    }
     public String loginUser(String name,String pass){
            String flag = "登陆失败";
            try{
                strSql = "select * from noteuser where username like '"+name+"'and password like '"+pass+"'";
                conn = getConnection();
                stmt = conn.createStatement();
                rs = stmt.executeQuery(strSql);
                if(rs.next()){
                    flag = "登陆成功";
                }
            }catch(Exception e){
                flag = "登陆出现异常";
                e.printStackTrace();
            }finally{
                try{
                conn.close();
                stmt.close();
                rs.close();
                }catch(Exception e){}

            }
            return flag;
        }

        public String[] getUserInfo(){
        String[] row = null;
        try{
            strSql = "select username from noteuser";
            conn = getConnection();
            stmt = conn.createStatement();
            rs = stmt.executeQuery(strSql);
            int i = 0;
            while(rs.next()){
                i++;
            }
            System.out.println(i);
            rs = stmt.executeQuery(strSql);
            row = new String[i];
            i =0;

            while(rs.next()){
                row[i] = rs.getString(1);
                i++;
            }
        }catch(Exception e){
            e.printStackTrace();
        }
        for(int j=0; j
            System.out.println(row[j]);

        return row;
    }

}

第四步: 写JSP页面:aa.jsp

xml 代码

<%@
page contentType="text/html; charset=UTF-8" %><%@
page language="java" %><%@
page import="com.metaparadigm.jsonrpc.test.jsonTest"
%>
<jsp:useBean id="JSONRPCBridge" scope="session" class="com.metaparadigm.jsonrpc.JSONRPCBridge" />
<jsp:useBean id="user" scope="session" class="com.metaparadigm.jsonrpc.test.jsonTest"/>
<%JSONRPCBridge.registerObject("user", user); %>

<script language="javascript" type="text/javascript">
        djConfig = {
            debugAtAllCosts: true;
            isDebug: true;
            dojoIframeHistoryUrl: "dojo-0.4.3-ajax/iframe_history.html";
            preventBackButtonFix: false
            };
        script>
        <script language="javascript" type="text/javascript" src="dojo-0.4.3-ajax/dojo.js">script>
        <script type="text/javascript" src="js/clock.js">script>
        <script type="text/javascript" src="js/contentpane.js">script>
        <script language="javascript" type="text/javascript" src="js/jsonrpc.js">script>
        <script type="text/javascript" src="js/aa.js">script>

<html>
    <head>
<title>留言版-DOJOtitle>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
head>

<body bgcolor="#ffffff" onLoad="onLoad()">


        <div dojoType="tabcontainer" style="width: 100%; height: 30em">
            <div dojoType="contentpane" label="用户登陆">
             <div dojoType="FloatingPane" class="stockPane" title="用户登陆框" id="pane"
                                 constrainToContainer="true" displayMaximizeAction="true">
                    <p>请输入你的用户名字和密码p>
                    <p>用户名:
                      <input type="text" id="username">
                  p>
                    <p>密   码:
                      <input type="password" id="password" >
                  p>
                    <p>
                      <input type="button" onClick="loginUser()" value="登陆" >p>
                    <p>  p>
              div>
            div>


        <div dojoType="contentpane" label=" 时 钟 ">
        <div id="gfx_holder" style="width: 385px; height: 385px;"><p>现在时间是: <span id="time">span>.p>
        <p>
          <button id="reset">恢复时间button>
        p>
        div>
        div>

        <div dojoType="contentpane" label="用 户 信 息">
        <div dojoType="FloatingPane" class="stockPane" title="Stock Form" id="pane" constrainToContainer="true" displayMaximizeAction="true">
       <h2>浏览信息h2>
        <textarea wrap="off" id="result" cols="80" rows="20">textarea>
       <a href="javascript:dogetUserInfo();">查看a>
        div>
        div>

        div>

    body>

html>

 第五步:配置WEB-INF(自己创建以下的文件夹,在这里不一一说明有什么作用)
      1.添加web.xml,在..\webapps\dojo_doc\WEB-INF文件夹,在\WEB-INF\添加web.xml,把以下代码复制进去

xml 代码

<!---->xml version="1.0" encoding="ISO-8859-1"?>
<!---->>
<web-app>
<servlet>
<servlet-name>com.metaparadigm.jsonrpc.JSONRPCServletservlet-name>
<servlet-class>com.metaparadigm.jsonrpc.JSONRPCServletservlet-class>
servlet>
<servlet-mapping>
<servlet-name>com.metaparadigm.jsonrpc.JSONRPCServletservlet-name>
<url-pattern>/JSON-RPCurl-pattern>
servlet-mapping>
web-app>

 2.添加jsonrpc-1.0.jar,把json-rpc-java-1.0.zip内的jsonrpc-1.0.jar复制到..\webapps\dojo_doc\WEB-INF\lib\里

      3.添加jsonTest.class,把jsonTest.java编译好的class文件在..\webapps\dojo_doc\WEB-

INF\classes\com\metaparadigm\jsonrpc\test\文件夹里.

第六步:测试,运行Tomcat,在地址栏输入http://localhost:8080/dojo_doc/aa.jsp,然后输入用户名yuky,密码11,看是否能登陆成功.

     我用了暑假实习时间(1个月)学习WEB编程,在实习前我只会JBDC+JSP简单连接数据库(分页都不会),在实习期间第1个星期--学习熟悉JSP+HTML环境,第2个星期--用Bean对象写了简单的留言版,第3个星期--学习AJAX+XML,第4个星期--就是现在的例子. 

    在这里说一下我学习心得,可以说我完全是个新手,因为我大学专业学的多半是C++,对于JAVA很少了解, 7月份才认真学起JAVA相关领域的编程.

    在我第三个星期的时候,实现了AJAX+XML,确实很高兴,因为抹去了JavaBean+HTML的每次刷新页面的工作,后来我发现AJAX+XML的web.xml配置很麻烦,和JAVA文件都要返回DOM节点,不然浏览页面就没办法识别,而且有时候AJAX+XML返回的数据不准确,会少1-2条数据,还有中文乱码的问题.可能是我学艺不精,写的程序不好才导致这些问题出现.

    在我第4个星期,就是现在,我用JSON实现了AJAX+XML的功能,它简单,易懂,这是后来才发现的,在我还没学会JSON的时候,在网络兜了很多大圈,因为每个网站说的内容都不一样,记得有个网站把JSON和XMLHttpRequest结合起来,我看了之后觉得,如果这样做那么跟AJAX+XML有何区别?直到我把json-rpc-java-1.0.zip内的jsonrpc-1.0.war解压出来,看完里面的hello.jsp的例子,我完全明白JSON的作用,它真的好用,当你真正发掘到jsonrpc-1.0.jar的作用,你就真正掌握了JSON,我在这里只是借花敬佛,希望每个初学JSON的人都找到一条最简单的路,不要向我这样,兜了那么大圈才知道答案已经出来了,只是自己发现太迟,像个盲头苍蝇到处乱撞!

     好吧!就写到这里,有哪里不懂可以留言大家互相讨论学习,,哪里说得不对,哪里写得不好,请大家指教.