一个ajax的简单例子

原创 2007年10月08日 14:02:00

 

这是一个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有一个基本的理解.本人也是在学习中,希望能和各位交流心得.

Ajax学习(二)—— 一个简单的Ajax实例

通过上篇博客认识Ajax之后,我们通过一个简单的实例来消化消化理论知识,一睹Ajax的庐山真面目。 1.实例功能: 当用户输入用户名,文本框失去焦点后,通过异步调用来判断该用户名是否已经存在。若存...
  • CYL_happygirl
  • CYL_happygirl
  • 2014年11月07日 21:20
  • 13051

jquery+ajax简单的例子

ajax test jQuery(function($){ $('button').click(function(){ var name = $(this).attr('name');...
  • xluren
  • xluren
  • 2013年11月29日 10:46
  • 7857

Spring Ajax一个简单例子

配置不说了,要在前面helloworld的例子基础上弄。 同样在hello下新建ajax.jsp Spring MVC Example with AJAX call body { ...
  • yang362046076
  • yang362046076
  • 2014年12月15日 22:59
  • 1650

开发第一个Java+Ajax实例

本节的例子是发送用户请求和现实服务器处理的结果,后者是Servlet。处理用户发送的请求,比把处理结果返回给用户。 运行实例: 这是一个简单的表单,只有一个输入名字的输入框,在输入框中输入...
  • u010392759
  • u010392759
  • 2013年09月19日 15:01
  • 5204

AJAX-实现简单的异步传输实例

需求:查询员工信息,新增员工信息。 页面:一个纯html页面,一个php页面。 代码: html页面: Demo body, input, select, button, h1 { fon...
  • qiqingjin
  • qiqingjin
  • 2016年01月05日 21:16
  • 1043

Ajax-Ajax基础实例

实例一:点击一个按钮,然后将信息显示到指定的div内。   1、创建一个JAVA web工程,命名为AjaxTest。在webRoot创建一个HTML页面,命名为FirstTest.html,F...
  • Andy_java_
  • Andy_java_
  • 2016年10月31日 10:33
  • 877

JQuery中ajax的简单使用教程(附带实例代码)

当接触一项新技术时,首先我们要问自己四个问题,如果这四个问题我们都能学习并理解到位,那么可以说这个新技术你已经完成了初步掌握,下面我们就这四个问题来说ajax应该怎么学习。如果你已经看过我写的JS中a...
  • v_111
  • v_111
  • 2017年05月02日 13:59
  • 4400

Spring中的简单实现AOP小例子

Spring中的简单实现AOP小例子
  • starjuly
  • starjuly
  • 2016年08月31日 23:37
  • 1707

js 创建对象,ajax 请求实例

//页面提交方法 function submitProject(venueProjectDateIDString){ var $venueProjectDateIDString=$("#v...
  • u010251897
  • u010251897
  • 2015年12月05日 15:34
  • 313

一个例子介绍Ant的用法

ant的一个简单示例,介绍ant的基本用法。
  • DreamingFei
  • DreamingFei
  • 2016年05月03日 22:19
  • 857
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:一个ajax的简单例子
举报原因:
原因补充:

(最多只允许输入30个字)