文章详情

Php文档 Php问答 行业资讯 Php论坛 Php手册 Php博客
  • 游戏榜单
  • 软件榜单
关闭导航
热搜榜
热门下载
热门标签
关闭搜索
php爱好者> php文档>ajax和jsp

ajax和jsp

时间：2010-07-17  来源：liangjingjing1989

这是学习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代码
  1. <html>  
  2. <head>  
  3. <title></title>  
  4. <script language="javascript" >  
  5. var httpRequest;   
  6. //下面这个函数可以返回一个适合任何浏览器的httpRequest，步子如下：   
  7. //1.试着创建一个XMLHttpRequest()示例，该示例可适合于除了微软以外的所有浏览器   
  8. //2.增加错误判断，如果当前浏览器是微软的，那么就创建适用于微软的浏览器   
  9. //3.但微软的浏览器又有两个版本之分，不过据说微软已经在7.0中增加对XMLHttpRequest()的支持   
  10. //4.但这样也需要对原来的浏览器支持，否则你写出来的程序那些用老版本浏览器的用户就是看不到效果的。   
  11. function createRequest()   
  12. {   
  13.     try{   
  14.         request=new XMLHttpRequest();   
  15.     }catch(trymicrosoft)   
  16.     {   
  17.         try{   
  18.             request=new ActiveXObject("Msxml2.XMLHTTP");   
  19.         }catch(othermicrosoft)   
  20.         {   
  21.             try{   
  22.                 request=new ActiveXObject("Microsoft.XMLHTTP");   
  23.             }   
  24.             catch(failed)   
  25.             {   
  26.                 request=false;   
  27.             }   
  28.         }   
  29.     }   
  30.     if(!request)   
  31.     {   
  32.        alert("err Happend!");   
  33.        return null;   
  34.     }          
  35.     return request;   
  36. }   
  37. //这个函数就是用户的动作所有触发的函数，如下面的onblur()时，就会调用该函数   
  38. //经过的步骤如下：   
  39. //1.从HTML页面得到你需要的数据，可以采有document.getElementById("")方法。   
  40. //2.建立需要的URL，该URL就和在FORM里面的method为get时并采用submit提交在地址栏里面到的一样   
  41. //3.打开与服务器的连接，这里面有三个必要的参数，虽然文档规定只有两个，但是我个人觉得最好用三个，   
  42. //  第一个可以是GET,POST或者是POST，但常用的就是前面的两个，并且最好都用大写，因为有些浏览器如FireFox可能会报错，   
  43. //  第二个就是打报的URL，这肯定你是必须的。   
  44. //  第三个就是下面的看到的true，这里可以是false。true表示同步处理，你提交后可以做其它的事情，   
  45. //  这就是AJAX里面的A，即asynchronous;如是false，那就得等到服务器的返回才能够做其它的事情。   
  46. //4.等到服务器完成，并且确定返回执行了正确执行的提示，我们就可以做下面我们想做的事情。这些后面的事情就必须通过   
  47. //  Javascript去完成了，因为XMLHttpRequest的唯一用途就是发送请求及接收服务器的响应结果。   
  48. //5.上面都完成了后，就可以采用send()方法向服务器发送你需要发送的信息了，它的参数可以是任何类型，发送的数据格式必须为   
  49. //  这样的格式：name=value&anothername=othervalue&so=on，如果你想传送数据，你必须更改MIME类型：   
  50. //  httpRequest.setRequestHeader('Content-type','application/x-www-form-urnlencoded');   
  51. //  否则服务器将会丢弃发送的数据。   
  52. function getBackInfo()   
  53. {   
  54.     var username=document.getElementById("username").value;   
  55.     var url='checkUser.jsp?username='+username;   
  56.     request.open("GET",url,"true");   
  57.     //下面相当于是一个隐性的循环，在函数中规定只有都接收完毕数据后才做处理   
  58.     //onreadystatechange有5个值：   
  59.     // 0:未初始化   
  60.     // 1:初始化   
  61.     // 2:发送数据   
  62.     // 3:接收数据中   
  63.     // 4:数据接收完毕   
  64.     //另外还要注意就是在注册回调函数onreadystatechange时，后面的函数不能够带参数   
  65.     //如下disResult是一个函数，不能够带参。   
  66.     reqeust.onreadystatechange=disResult;//隐性的循环   
  67.     request.send(null);   
  68. }   
  69. function disResult()   
  70. {   
  71.     //1.一定要确定readystate==4的完成状态才做下面的事，否则会在建立连接即readystate==1的时候就开始，   
  72.     //  然后会在readystate==2，readystate==3，readystate==4的时候都会执行，不信你可以alert("")一个   
  73.     //  提示信息试试。   
  74.     //2.服务器通知完成了，并且还要保证是正确完成的，得到的是我们需要的结果才能够继续，这里常用响应码有：   
  75.     //  200:成功执行   
  76.     //  401:未授权   
  77.     //  403:禁止   
  78.     //  404:没有找到文件   
  79.     if(request.readystate==4)   
  80.     {   
  81.         if(request.status==200)   
  82.         {   
  83.             //一切都OK了，那就该用Javascript去执行你想要的动作了。   
  84.             document.getElementById("disCheckResult").value=request.responseText;   
  85.             alert('done');   
  86.         }   
  87.         else   
  88.         {   
  89.             alert('Something Wrong has Happend!');   
  90.         }   
  91.     }   
  92. }   
  93. </script>  
  94. </head>  
  95. <body>  
  96.   <form>  
  97.     <table>  
  98.         <tr>  
  99.             <td>  
  100.                 <input type=text id="username" onblur="getBackInfo();">  
  101.             </td>  
  102.             <td>                 
  103.                 <dd id="disCheckResult">这里用于在执行后显示结果的地方</dd>  
  104.             </td>  
  105.         </tr>  
  106.     </table>  
  107.   </form>  
  108. </body>  
  109. </html>   
<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

Java代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
  2. "http://www.w3.org/TR/html4/loose.dtd">   
  3. <%@ page contentType="text/html;charset=GBK"%>   
  4. <%@ page import="project1.DBMS_Conn"%>   
  5. <html>   
  6.   <head>   
  7.     <meta http-equiv="Content-Type" content="text/html; charset=GBK"/>   
  8.     <title>checkUser</title>   
  9.   </head>   
  10.   <body>   
  11.   <%   
  12.     String username=request.getParameter("username");   
  13.     DBMS_Conn conn=new DBMS_Conn();   
  14.     if(conn.checkUser(username))   
  15.         out.println("用户名已经存在！");//这个信息就是发送到前台去显示的信息，即服务器返回的信息   
  16.     else  
  17.         out.println("可以继续！");   
  18.   %>   
  19.   </body>   
  20. </html>   
<!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程序：

Java代码
  1. package project1;   
  2.   
  3. import java.sql.Connection;   
  4. import java.sql.DriverManager;   
  5. import java.sql.ResultSet;   
  6. import java.sql.SQLException;   
  7. import java.sql.Statement;   
  8.   
  9. public class DBMS_Conn {   
  10.     Connection conn;   
  11.     Statement st;   
  12.     public DBMS_Conn() {   
  13.         conn_init();   
  14.     }   
  15.     void conn_init() {   
  16.         setConnection();   
  17.         setStatement();   
  18.     }   
  19.     public void setConnection() {   
  20.         try {   
  21.             //Class.forName("org.gjt.mm.mysql.Driver").newInstance();   
  22.             Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");   
  23.             //db.mdb有一个名为user表，至少有一个名为username的字段   
  24.             String strurl =   
  25.                 "jdbc:odbc:driver={Microsoft Access Driver (*.mdb)};DBQ=E:\\db.mdb";   
  26.             //conn =   
  27.             //DriverManager.getConnection("jdbc:mysql://localhost/palfinger?user=root&password=admin&useUnicode=true&characterEncoding=8859_1");   
  28.             conn = DriverManager.getConnection(strurl);   
  29.         } catch (Exception e) {   
  30.             e.printStackTrace();   
  31.         }   
  32.     }   
  33.     /**  
  34.      * 设置Statement  
  35.      */  
  36.     public void setStatement() {   
  37.         try {   
  38.             st =   
  39.     conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE, ResultSet.CONCUR_READ_ONLY);   
  40.         } catch (SQLException e) {   
  41.             e.printStackTrace();   
  42.         }   
  43.     }   
  44.     /**  
  45.      * 根据用户名确定用户是否存在  
  46.      */  
  47.     public boolean checkUser(String username) {   
  48.         String sql="select * from user where username='"+username+"'";   
  49.         ResultSet rs;   
  50.         try {   
  51.             rs = st.executeQuery(sql);   
  52.             if(rs.next())   
  53.             {   
  54.                 conn.close();   
  55.                 return true;   
  56.             }              
  57.         } catch (SQLException e) {   
  58.             e.printStackTrace();   
  59.         }   
  60.         try {   
  61.             conn.close();   
  62.         } catch (SQLException e) {   
  63.             e.printStackTrace();   
  64.         }   
  65.         return false;   
  66.     }     
  67. }  
相关阅读 更多 +
排行榜 更多 +
辰域智控app

辰域智控app

系统工具 下载
网医联盟app

网医联盟app

运动健身 下载
汇丰汇选App

汇丰汇选App

金融理财 下载

Copyright 2006-2020 (phpxiu.com) All Rights Reserved.

本站为非盈利性网站，不接受任何广告。php爱好者