`

Ajax的JSP示例以及相关知识介绍

    博客分类:
  • AJAX
阅读更多
  这是学习AJAX的第一篇文章,我把自己学习一些心得写出来,因为是从初学者的脚度出发,可能会写得比较详细,因为我就是一个初学者,也知道作为一个初学者,随随便便的拿一个例子就看看,是只知道要这样,但为什么要这样却不清楚,我这里就尽我自己的语言,让初学者和我一样,能够看了这篇文章之后,“哦,这里原来是这样的”。我个人还是喜欢从实例出发,对我自己而言,看了过后如果没有实例巩固,效果就不会那么好,也就不会减除对这个东西的神秘感,其实,从我个人的脚度出发后,因为前面写了两篇关于使用innerHTML实现动态效果的文章,再学这个就做了一个很好的铺垫了。因为这里面许多的时候都会使用 innerHTML,不过,这个要注意,这个东东只支持微软的浏览器(我的FireFox不行,其它牌子支持与否我没有测试过,不过,在浏览器界中,好像只有微软的独树一家,乱来,呵呵),你可以看一下我先面的两篇文章:
    利用innerHTML实现隐显效果-两种实现方法
    通过改变innerHTML的内容,动态增加选择项
    学习使用AJAX之前,有几样的东西是必须的:
    1、HTML
    2、DHTML,就是动态HTML,这里可能会常用到document.getElementById([id])方法,或者是使用window.id.value= [value]等等,如果不熟悉,不及,看看下面的例子,如果还不能够理解,再把网上搜搜,这方面的解释多得不能够再多了。
    3、Javascript。这个就是非常的重要的,因为好多东西都需要通过这个去操作。
    4、DOM。这个不是必须的,就算我们不知道这个东西,照样可以用JAVASCRIT做很多的东西了。
    5、数据库操作及SQL知识。现在应用程序好多都是与数据库打交道,常见的用户名信息等等,都是放在数据库中的。
    下面进行正题吧,这个实例非常的简单,采用JSP实现用户输入的用户是否存在于数据库中,并且给以相应的提示,所谓“麻雀虽小,五脏俱全”,其它的发挥就是在这个方向上发挥开发。
    总共有三个文件,有两个JSP面,一个用于前台显示,一个用于确定用户是否存在;另外一个JAVA页面,用于做数据库连接。
    注:请注意其中注释,那是非常的有助于你理解
    第一个前台显示:index.jsp
<html>
<head>
<title></title>
<script language="javascript" >
var httpRequest;
//下面这个函数可以返回一个适合任何浏览器的httpRequest,步子如下:
//1.试着创建一个XMLHttpRequest()示例,该示例可适合于除了微软以外的所有浏览器
//2.增加错误判断,如果当前浏览器是微软的,那么就创建适用于微软的浏览器
//3.但微软的浏览器又有两个版本之分,不过据说微软已经在7.0中增加对XMLHttpRequest()的支持
//4.但这样也需要对原来的浏览器支持,否则你写出来的程序那些用老版本浏览器的用户就是看不到效果的。
function createRequest()
{
    try{
        request=new XMLHttpRequest();
    }catch(trymicrosoft)
    {
        try{
            request=new ActiveXObject("Msxml2.XMLHTTP");
        }catch(othermicrosoft)
        {
            try{
                request=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(failed)
            {
                request=false;
            }
        }
    }
    if(!request)
    {
       alert("err Happend!");
       return null;
    }       
    return request;
}
//这个函数就是用户的动作所有触发的函数,如下面的onblur()时,就会调用该函数
//经过的步骤如下:
//1.从HTML页面得到你需要的数据,可以采有document.getElementById("")方法。
//2.建立需要的URL,该URL就和在FORM里面的method为get时并采用submit提交在地址栏里面到的一样
//3.打开与服务器的连接,这里面有三个必要的参数,虽然文档规定只有两个,但是我个人觉得最好用三个,
//  第一个可以是GET,POST或者是POST,但常用的就是前面的两个,并且最好都用大写,因为有些浏览器如FireFox可能会报错,
//  第二个就是打报的URL,这肯定你是必须的。
//  第三个就是下面的看到的true,这里可以是false。true表示同步处理,你提交后可以做其它的事情,
//  这就是AJAX里面的A,即asynchronous;如是false,那就得等到服务器的返回才能够做其它的事情。
//4.等到服务器完成,并且确定返回执行了正确执行的提示,我们就可以做下面我们想做的事情。这些后面的事情就必须通过
//  Javascript去完成了,因为XMLHttpRequest的唯一用途就是发送请求及接收服务器的响应结果。
//5.上面都完成了后,就可以采用send()方法向服务器发送你需要发送的信息了,它的参数可以是任何类型,发送的数据格式必须为
//  这样的格式:name=value&anothername=othervalue&so=on,如果你想传送数据,你必须更改MIME类型:
//  httpRequest.setRequestHeader('Content-type','application/x-www-form-urnlencoded');
//  否则服务器将会丢弃发送的数据。
function getBackInfo()
{
    var username=document.getElementById("username").value;
    var url='checkUser.jsp?username='+username;
    request.open("GET",url,"true");
    //下面相当于是一个隐性的循环,在函数中规定只有都接收完毕数据后才做处理
    //onreadystatechange有5个值:
    // 0:未初始化
    // 1:初始化
    // 2:发送数据
    // 3:接收数据中
    // 4:数据接收完毕
    //另外还要注意就是在注册回调函数onreadystatechange时,后面的函数不能够带参数
    //如下disResult是一个函数,不能够带参。
    reqeust.onreadystatechange=disResult;//隐性的循环
    request.send(null);
}
function disResult()
{
    //1.一定要确定readystate==4的完成状态才做下面的事,否则会在建立连接即readystate==1的时候就开始,
    //  然后会在readystate==2,readystate==3,readystate==4的时候都会执行,不信你可以alert("")一个
    //  提示信息试试。
    //2.服务器通知完成了,并且还要保证是正确完成的,得到的是我们需要的结果才能够继续,这里常用响应码有:
    //  200:成功执行
    //  401:未授权
    //  403:禁止
    //  404:没有找到文件
    if(request.readystate==4)
    {
        if(request.status==200)
        {
            //一切都OK了,那就该用Javascript去执行你想要的动作了。
            document.getElementById("disCheckResult").value=request.responseText;
            alert('done');
        }
        else
        {
            alert('Something Wrong has Happend!');
        }
    }
}
</script>
</head>
<body>
  <form>
    <table>
        <tr>
            <td>
                <input type=text id="username" onblur="getBackInfo();">
            </td>
            <td>              
                <dd id="disCheckResult">这里用于在执行后显示结果的地方</dd>
            </td>
        </tr>
    </table>
  </form>
</body>
</html>

    第二个用于验证的JSP页面:checkUser.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=GBK"%>
<%@ page import="project1.DBMS_Conn"%>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
    <title>checkUser</title>
  </head>
  <body>
  <%
    String username=request.getParameter("username");
    DBMS_Conn conn=new DBMS_Conn();
    if(conn.checkUser(username))
        out.println("用户名已经存在!");//这个信息就是发送到前台去显示的信息,即服务器返回的信息
    else
        out.println("可以继续!");
  %>
  </body>
</html>

    第三个数据库连接JAVA程序:
package project1;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

public class DBMS_Conn {
    Connection conn;
    Statement st;
    public DBMS_Conn() {
        conn_init();
    }
    void conn_init() {
        setConnection();
        setStatement();
    }
    public void setConnection() {
        try {
            //Class.forName("org.gjt.mm.mysql.Driver").newInstance();
            Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
            //db.mdb有一个名为user表,至少有一个名为username的字段
            String strurl =
                "jdbc:odbc:driver={Microsoft Access Driver (*.mdb)};DBQ=E:\\db.mdb";
            //conn =
            //DriverManager.getConnection("jdbc:mysql://localhost/palfinger?user=root&password=admin&useUnicode=true&characterEncoding=8859_1");
            conn = DriverManager.getConnection(strurl);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    /**
     * 设置Statement
     */
    public void setStatement() {
        try {
            st =
    conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE, ResultSet.CONCUR_READ_ONLY);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
    /**
     * 根据用户名确定用户是否存在
     */
    public boolean checkUser(String username) {
        String sql="select * from user where username='"+username+"'";
        ResultSet rs;
        try {
            rs = st.executeQuery(sql);
            if(rs.next())
            {
                conn.close();
                return true;
            }           
        } catch (SQLException e) {
            e.printStackTrace();
        }
        try {
            conn.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return false;
    }  
}

分享到:
评论
2 楼 SighOfAthena 2010-12-19  
是request.readyState
1 楼 mniz 2008-10-08  
Open(GET,URL,true)方法里面,这个true 代表的意思不是同步,而是异步请求

相关推荐

    JSP AJAX分页示例程序.rar

    下面我们将详细讲解这个"JSP AJAX分页示例程序"中的关键知识点。 **1. JSP基础** JSP是Java平台上的动态网页技术,允许开发者在HTML页面中嵌入Java代码,以实现服务器端的逻辑处理。在分页示例中,JSP主要负责接收...

    jsp的Ajax的示例

    在这个"jsp的Ajax的示例"中,我们将深入探讨如何结合这两者来创建一个简单的聊天室应用,以此来揭示Ajax的优势。 首先,Ajax的核心在于XMLHttpRequest对象,这是JavaScript原生提供的一个API,用于在后台与服务器...

    AJAX JSP源码示例

    开发者可以研究这些示例代码,了解如何在JSP中实现AJAX请求,如何处理服务器返回的数据,以及如何更新页面内容。 总的来说,AJAX JSP源码示例是学习如何在Java Web应用中集成AJAX技术的好资源,它可以帮助开发者...

    JSP环境下的AJAX分页示例

    在JSP(JavaServer Pages)环境下,利用AJAX(Asynchronous JavaScript and XML)技术实现分页是一种常见的优化用户体验的方法。AJAX允许页面在不重新加载整个网页的情况下与服务器交换数据并局部更新页面,从而提供...

    ajax 用户登录示例(jsp)

    【Ajax用户登录示例(JSP)】 ...以上就是基于Ajax的JSP用户登录示例中的主要知识点,通过这个示例,我们可以了解到如何在客户端和服务器端之间进行异步通信,以及如何在JSP中处理用户输入并验证登录信息。

    AJAX 示例.ASP JSP

    在这个"AJAX 示例.ASP JSP"中,我们可以看到如何将AJAX技术应用于ASP(Active Server Pages)和JSP(JavaServer Pages)这两种不同的服务器端脚本环境中。 首先,我们来详细了解一下AJAX的核心组成部分: 1. **...

    ajax+servlet+jquery+jsp示例

    在"ajax+servlet+jquery+jsp示例"中,我们看到的是一个使用Ajax实现前后台交互的经典应用场景。 1. **jQuery的Ajax函数**:jQuery是一个流行的JavaScript库,它简化了JavaScript的许多操作,包括Ajax请求。在这个...

    ajax经典示例代码

    了解MySQL的用户可以直接使用自己熟悉的方式创建名为ajax的数据库,并将ajax.sql文件导入即可。 下面是简要操作方法: 1. 实例数据库在MySQL 5.0.27 版本下测试通过 2. 将database目录中ajax.sql文件复制到C:\ 3. ...

    JSP Ajax树形菜单完整示例

    以下是一个简单的JSP和Ajax结合实现树形菜单的示例: ```jsp &lt;!-- JSP页面 --&gt; ;charset=UTF-8" language="java" %&gt; &lt;title&gt;JSP Ajax树形菜单 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/...

    简单的AJAX示例(JSP+servlet)

    在本示例中,我们使用AJAX来验证用户名是否存在,这涉及到JSP(JavaServer Pages)、Servlet以及相关的web配置。 **JSP基础** JSP是Java的一种动态网页技术,它允许开发者在HTML代码中嵌入Java代码,以实现服务器...

    Ajax+JSP.rar_ajax_ajax jsp download_java ajax jsp_jsp ajax_jsp在线

    【Ajax+JSP技术详解】 Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使得网页实现异步更新。这种方式可以让...

    Ajax的JSP例子

    下面我们将深入探讨这个Ajax JSP例子中的关键知识点。 1. **XMLHttpRequest对象**: 在JavaScript中,XMLHttpRequest是创建Ajax请求的核心。通过创建XMLHttpRequest对象,我们可以向服务器发送请求并接收响应。在...

    jsp+(jquery/javascript)+ajax+json示例

    很多示例我都下载看了,要么复杂,要么就实现不了。我这个示例是自己亲手写的。新建一个eslipse项目,...示例包括jquery通过ajax获取selvert类中转换的json数据和javascript通过ajax获取selvert类中转换的json数据。

    jsp Ajax图片上传

    3. **服务器处理**:JSP接收到请求后,会解析请求体中的二进制数据,将图片保存到服务器的指定目录,并可能对图片进行验证(如大小、格式等),以及存储相关的元数据。 4. **响应反馈**:JSP处理完图片后,返回一个...

    ajax jsp 自动完成源代码

    总结来说,这个项目提供了一个实用的示例,展示了如何利用Ajax、JSP和Servlet技术实现一个无数据库的自动完成功能,对于学习和理解这些技术的应用有很好的参考价值。开发者可以通过研究这个源代码,学习到如何在实际...

    Ajax网站开发典型实例JSP源码包

    源码包可能包含了将JSP数据转化为JSON并发送给客户端的示例。 5. **异步处理** 了解如何在JSP中处理异步请求是关键。这可能涉及到使用Servlet或Filter来接收和处理Ajax请求,以及设置合适的HTTP响应头和内容类型。...

    jsp 调用 jsp 的ajax写法 小例子

    &lt;title&gt;JSP AJAX 示例 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; 发送AJAX请求 &lt;div id="resultContainer"&gt;&lt;/div&gt; $(document).ready(function() { $("#ajaxBtn").click...

    关于ajax的示例

    学习这个示例,初学者可以了解Ajax如何与JSP和Servlet配合,实现客户端与服务器之间的数据通信,以及如何通过JavaScript处理返回的数据,动态更新页面。这对于构建交互性更强、用户体验更好的Web应用至关重要。

    ajax简单示例(非常好)

    **Ajax(Asynchronous JavaScript and XML)技术是一种在无需重新加载整个网页的情况下,能够...通过运行这个示例,你可以观察到Ajax如何在后台与服务器交互,以及如何动态地更新页面内容,从而加深对Ajax原理的理解。

Global site tag (gtag.js) - Google Analytics