论坛首页 → Web前端技术论坛 →

ajax初识和实践（二）

浏览 2558 次
锁定老帖子 主题：ajax初识和实践（二）
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • fullfocus
  • 等级: 初级会员
  • 文章: 43
  • 积分: 30
  • 来自: 厦门
   发表时间：2006-12-23  
 

这两天被《lovestory in Harvard》苦苦缠住，好不容易抽出身来，掰掰手指，离考试还远，暖暖的阳光照在身上，爽爽的呷着咖啡。。哈哈，这生活真个不错。。。

今天学了一些本来不以为是AJAX的东西，HTTP请求，响应的格式，隐藏帧技术，其他还有XMLHttp，Ajax模式等等。今天我记录一个不用XMLHttp的，使用隐藏帧技术的AJAX应用（原书是用PHP实现的，如今我把其改成jsp的）。

1。我们遵循先后台再前台的顺序创建应用。这里我使用Eclpse3.2（安装MYECLIPSE5.0),数据库使用mysql5.0.

CustomerTable.sql为建表的sql语句，所属的数据库为Ajax。DB.java是数据库操作的javabean,DBTest.java是junit数据库测试类，webroot下的为各个页面。（整个项目文件可以在附件中找到）

首先我们建立以下目录： 

 

 

2。编写数据库测试类。注意为了避免乱码问题，在jsp页面和数据库中都统一使用GBK,并且需要在工程属性中，把JDBC驱动包导入进来。（mysql-connector-java-3.1.7-bin.jar)

java 代码，此测试类可以用Junit运行

  1. package test;   
  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. import other.DB;   
  10.   
  11. import junit.framework.TestCase;   
  12.   
  13.   
  14. public class DBTest extends TestCase {   
  15.     Connection connect = null;   
  16.     ResultSet rs = null;   
  17.     DB db ;   
  18.     public DBTest(String name) {   
  19.         super(name);   
  20.         try  
  21.         {   
  22.             Class.forName("org.gjt.mm.mysql.Driver");//设置驱动程序类型   
  23.         }   
  24.         catch(java.lang.ClassNotFoundException e)   
  25.         {   
  26.             e.printStackTrace();   
  27.         }   
  28.     }   
  29.   
  30.     protected void setUp() throws Exception {   
  31.         db = new DB();   
  32.     }   
  33.   
  34.     protected void tearDown() throws Exception {   
  35.         db.close();   
  36.     }   
  37.        
  38.     public void testDB()   
  39.     {   
  40.         String sql = "Select * from Customers";   
  41.         try  
  42.         {   
  43.             connect = DriverManager.getConnection("jdbc:mysql://localhost/ajax","root","1234");   
  44.             //建立与数据库的连接   
  45.             Statement stmt = connect.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE, ResultSet.CONCUR_READ_ONLY);   
  46.             rs = stmt.executeQuery(sql);//执行查询   
  47.             rs.next();   
  48.             System.out.println(rs.getString("Name"));   
  49.         }   
  50.         catch(SQLException ex)   
  51.         {   
  52.             ex.printStackTrace();   
  53.         }   
  54.     }   
  55.   
  56. }   

 

3.接下来可以写DB.java了，有了前面的测试，写这个BEAN应该很容易了，其中分装了executeQuery，executeUpdate，close。这里不再详述。

4。首先是框架集，其中使用了隐藏框架。 

  1. <!---->"-//W3C//DTD HTML 4.0 Transitional//EN">   
  2.   
  3.   
  4.   
  5.   
  6. "10%,0" frameborder="0">   
  7.     "displayFrame" src="display.htm" noresize="noresize" />   
  8.     "hiddenFrame" src="about:blank" noresize="noresize" />   
  9.   
  10.   

 

5。下面是显示的框架 display.htm，注意这里是Ajax思想的所在，页面无刷新的实现。它用隐藏框架来发送信息。

 

  1.   
  2. <!---->"-//W3C//DTD HTML 4.0 Transitional//EN">   
  3.   
  4.   
  5.   
  6.        
  7.     <script type=< span="">"text/javascript">   
  8.         function requestCustomerInfo() {   
  9.             var sId = document.getElementById("txtCustomerId").value;   
  10.             top.frames["hiddenFrame"].location = "GetCustomerData.jsp?id=" + sId;   
  11.         }   
  12.            
  13.         function displayCustomerInfo(sText) {   
  14.             var divCustomerInfo = document.getElementById("divCustomerInfo");   
  15.             divCustomerInfo.innerHTML = sText;   
  16.         }   
  17.     </script>   
  18.   
  19.   
  20.     

    Enter customer ID number to retrieve information:

      
  21.     

    Customer ID: "text" id="txtCustomerId" value="" />

      
  22.     

    "button" value="Get Customer Info" onclick="requestCustomerInfo()" />

      
  23.     "divCustomerInfo">
  24.   
  25.   

     

     

    6。这是处理页面GetCustomerData.jsp，需要注意的是，  top.frames["displayFrame"]...的使用，成功的在框架集里面自由选择要使用的帧。主要实现的是，从显示帧displayFrame.htm中填入参数ID值，通过隐藏帧hidden.htm获取ID值，并发送给服务器，而服务器接受到数据后，查询数据库，获取对应ID的name值，再通过显示帧把信息显示出来。这里无刷新的关键在于使用了隐藏帧。

      
    1.   
    2. <!---->  
    3. <!---->  
    4. <!---->  
    5. <!---->  
    6.   
    7. <!---->"-//W3C//DTD HTML 4.0 Transitional//EN">   
    8.   
    9.   
    10.        
    11. <!---->       
    12.     <script type=< span="">"text/javascript">   
    13.         window.onload = function () {   
    14.             var divInfoToReturn = document.getElementById("divInfoToReturn");   
    15.             top.frames["displayFrame"].displayCustomerInfo(divInfoToReturn.innerHTML);           
    16.         };   
    17.        
    18.     </script>   
    19.   
    20.   
    21.   
    22.     "divInfoToReturn"><!---->
      
  26.   
  27.   
  
  • 大小: 239.1 KB
返回顶楼
         
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics