ajax初识和实践（二）

 

这两天被《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.