一个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几种写法

XMLHTTPRequest GET方式 var xhr=new XMLHttpRequest(); xhr.open("get","servlet?name=testPa...
  • qq_30085577
  • qq_30085577
  • 2016-02-26 17:48:55
  • 8735

一个简单的ajax请求数据

jquery提交表单 用户名 密码 性别man woman 使用ajax提交表单数据 before.. $(document...
  • dezhonger
  • dezhonger
  • 2017-04-17 15:17:21
  • 5310

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

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

<em>一个</em>个人编写的<em>简单的Ajax</em>实例。eclipse开发

下载 &gt; 开发技术 &gt; Web开发 &gt; <em>一个</em>个人编写的<em>简单的Ajax</em>实例。eclipse开发 ...什么都没写,什么都没说。。。对于新手完全不知道怎么用,老手又用不着 donglongdor...
  • 2018年04月14日 00:00

按要求写一个简单的ajax示例

function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest)   {// code for IE7+, Firefox, Chrome...
  • qq_33335359
  • qq_33335359
  • 2016-09-17 15:03:46
  • 47

一个最简单的AJAX例子

  • 2009年01月03日 03:32
  • 3KB
  • 下载

<em>AJax简单</em>示例 .net实现

<em>一个</em>最<em>简单的AJAX</em>例子 立即下载 上传者: zey95125923 时间: 2009-01-03 综合评分: 0 积分/C币:3 .net下最<em>简单的ajax</em>示例 立即下载 上传者: c212610 时...
  • 2018年04月16日 00:00

一个完整的ajax简单案例

ajax简单完整案例
  • qq_37447018
  • qq_37447018
  • 2017-04-23 15:35:33
  • 330

$.ajax 的简单小例子

感觉自己对$.ajax 不是很清晰 就看了文档 尝试写了下 .然后还发现个问题,$arr2 = array("id"=>2,"name"=>2); 如果是这种格式的length 就会出问题,遍历也...
  • u013539760
  • u013539760
  • 2015-08-10 11:12:08
  • 1606

Ajax 简单的实例代码

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。 AJAX 不是新的编程语言,而是一种使用现有标准的新方法。 AJ...
  • wu_ning
  • wu_ning
  • 2017-03-02 19:32:15
  • 2772
收藏助手
不良信息举报
您举报文章:一个ajax的简单例子
举报原因:
原因补充:

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