一个ajax的简单例子

 

这是一个JSP页面

<% @ page language = " java "   import = " java.util.* "    contentType = " text/html;charset=gbk " %>


<! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.01 Transitional//EN " >
< html >
  < script language = " javascript " >
    var XMLHttpReq;
     
    function createXMLHttpRequest()  ... {
        if(window.XMLHttpRequest) ...{
            XMLHttpReq = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) ...{ 
            try ...{
                XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) ...{
                try ...{
                    XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) ...{}
            }
        }
    }
    
    function sendRequest(url)  ... {
        createXMLHttpRequest();
        XMLHttpReq.onreadystatechange = processResponse;
        XMLHttpReq.open("GET", url, true);
        
        XMLHttpReq.send(null);  
    }
    
     // 上面的一段代码是用来判断浏览器所有的ajax程序都可以写成这样
    function processResponse()  ... {
        if (XMLHttpReq.readyState == 4) ...{ // 判断对象状态
            if (XMLHttpReq.status == 200) ...{ // 信息已经成功返回，开始处理信息
                //var res=XMLHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.data;
                var msg=document.getElementById("mesg");
                if(XMLHttpReq.responseText==0)...{
                    msg.innerHTML='注册失败!用户名已存在，重新输入用户名';
                
                }else if(XMLHttpReq.responseText==1)...{
                    msg.innerHTML='注册成功';
                
                }else...{
                    msg.innerHTML='注册失败';
    
                }
              //  window.alert(msg);                
            } else ...{ //页面不正常
                window.alert("您所请求的页面有异常。");
            }
        }
    }
    
    function signUp()  ... {
        var uname = document.myform.uname.value;
        var psw = document.myform.psw.value;
        var psw2 = document.myform.psw2.value;
        if(uname=="") ...{
            window.alert("用户名不能为空。");
            document.myform.uname.focus();
            return false;
        }
        else if(psw!=psw2) ...{
            window.alert("两次输入密码不同。");
            document.myform.psw.focus();
            return false;
        }
        else ...{
            sendRequest('signUp?uname='+ uname + '&psw=' + psw);
        }
    }

</ script >

< body vLink = " #006666 "  link = " #003366 "  bgColor = " #E0F0F8 " >

< form action = ""  method = " post "  name = " myform " >
用户名：  < input size = " 15 "  name = " uname " >< div id = " mesg " ></ div >< p >
密 & nbsp; & nbsp;码：  < input type = " password "  size = " 15 "  name = " psw " >< p >
重输密码：  < input type = " password "  size = " 20 "  name = " psw2 " >< p >
< input type = " button "  value = " 注册 "  onclick = " signUp() "   >
</ form >
  
   </ body >
</ html >

数据库的处理页面

package  com.soso;

import  java.io.IOException;
import  java.io.PrintWriter;
import  java.sql.ResultSet;
import  java.sql.SQLException;

import  javax.servlet.ServletException;
import  javax.servlet.http.HttpServlet;
import  javax.servlet.http.HttpServletRequest;
import  javax.servlet.http.HttpServletResponse;

import  one.two.DB;

public   class  DealS  extends  HttpServlet  ... {

    public DealS() ...{
        super();
    }
    public void destroy() ...{
        super.destroy(); // Just puts "destroy" string in log
        // Put your code here
    }

    
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException ...{

        request.setCharacterEncoding("UTF-8");
        //接收浏览器端提交的信息
        String uname = request.getParameter("uname");
        String psw = request.getParameter("psw");        
        //设置输出信息的格式及字符集        
        response.setContentType("text/xml; charset=UTF-8");
        response.setHeader("Cache-Control", "no-cache");
        //创建输出流对象
        PrintWriter out = response.getWriter();
        //依据验证结果输出不同的数据信息
 //       out.println("<response>");        
        
        //数据库操作
        DB db = new DB();
        ResultSet rs;
        int insRes = 0;
        String strSql=null;
        //判断用户名是否重复
        strSql = "select * from users where username='"
            + uname + "'";
        rs = db.executeQuery(strSql);
        boolean bnoRepeat = false;
        try ...{
            if ( !rs.next()) ...{
                bnoRepeat = true;
            }
        } catch (SQLException e) ...{
            e.printStackTrace();
        }
        //用户名不重复,插入记录
        if (bnoRepeat)...{
            strSql = "Insert Into users values('"+ uname + "','" + psw + "')";
            insRes = db. executeUpdate(strSql);
        }
        if(!bnoRepeat)...{
            out.println(0);
        //    out.println("<res>" + "注册失败!用户名已存在，重新输入用户名" + "</res>");
        }else if(insRes>0)...{
            out.println(1);//HTML形式
            //out.println("<res>" + "注册成功！" + "</res>"); //DOM形式
        }else...{
            //out.println("<res>" + "注册失败！" + "</res>");
            out.println(2);
        }    
    
    //    out.println("</response>");
        out.close();
    }

    public void init() throws ServletException ...{
        // Put your code here
    }

}

 

数据库连接

 

package  one.two;

import  java.sql. * ;

public   class  DB  ... {
    Connection connect = null;
    ResultSet rs = null;
    public DB() ...{
        try ...{
            Class.forName("com.mysql.jdbc.Driver");     //设置驱动程序类型        
        }
        catch(java.lang.ClassNotFoundException e) ...{
            e.printStackTrace();
        }
    }
    //执行查询语句的方法
    public ResultSet executeQuery(String sql) ...{
        try ...{
            connect = DriverManager.getConnection("jdbc:mysql://localhost:3306/kydata?user=root&password=123456");  //建立与数据库服务器的连接
            //Statement stmt = connect.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
            //rs = stmt.executeQuery(sql);//执行指定的数据查询语句
            PreparedStatement ps=connect.prepareStatement(sql);
            rs=ps.executeQuery();
        } 
        catch(SQLException ex) ...{ 
            ex.printStackTrace();
        }
        return rs;
    }
    //执行增、删改语句的方法
    public int executeUpdate(String sql) ...{
        int result = 0;
        try ...{
            connect = DriverManager.getConnection("jdbc:mysql://localhost:3306/kydata?user=root&password=123456"); 
        //    Statement stmt = connect.createStatement();
        //    result = stmt.executeUpdate(sql);//执行指定的数据操作语句
            PreparedStatement  ps=connect.prepareStatement(sql);
            result=ps.executeUpdate();
        } 
        catch(SQLException ex) ...{ 
            System.err.println(ex.getMessage());        
        }
        return result;
    }//
    //关闭数据库连接的方法
    public void close()...{
        if(connect!=null)...{
            try...{
                connect.close();
                connect = null;    
            }catch(SQLException ex) ...{ 
                System.err.println(ex.getMessage());
            }
        }    
    }

}

 

web页面

 

<? xml version = " 1.0 "  encoding = " UTF-8 " ?>
< web - app version = " 2.4 "  
    xmlns = " http://java.sun.com/xml/ns/j2ee "  
    xmlns:xsi = " http://www.w3.org/2001/XMLSchema-instance "  
    xsi:schemaLocation = " http://java.sun.com/xml/ns/j2ee 
    http: // java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
   < servlet >
     < description > This is the description of my J2EE component </ description >
     < display - name > This is the display name of my J2EE component </ display - name >
     < servlet - name > DealS </ servlet - name >
     < servlet - class > com.soso.DealS </ servlet - class >
   </ servlet >

   < servlet - mapping >
     < servlet - name > DealS </ servlet - name >
     < url - pattern >/ signUp </ url - pattern >
   </ servlet - mapping >
  


</ web - app >

 

 一个简单ajax程序代码,通过对数据库的操作,希望在学习中的朋友们能对ajax有一个基本的理解.本人也是在学习中,希望能和各位交流心得.