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运行

package test;

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

import other.DB;

import junit.framework.TestCase;


public class DBTest extends TestCase {
    Connection connect = null;
    ResultSet rs = null;
    DB db ;
    public DBTest(String name) {
        super(name);
        try
        {
            Class.forName("org.gjt.mm.mysql.Driver");//设置驱动程序类型
        }
        catch(java.lang.ClassNotFoundException e)
        {
            e.printStackTrace();
        }
    }

    protected void setUp() throws Exception {
        db = new DB();
    }

    protected void tearDown() throws Exception {
        db.close();
    }

    public void testDB()
    {
        String sql = "Select * from Customers";
        try
        {
            connect = DriverManager.getConnection("jdbc:mysql://localhost/ajax","root","1234");
            //建立与数据库的连接
            Statement stmt = connect.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE, ResultSet.CONCUR_READ_ONLY);
            rs = stmt.executeQuery(sql);//执行查询
            rs.next();
            System.out.println(rs.getString("Name"));
        }
        catch(SQLException ex)
        {
            ex.printStackTrace();
        }
    }

}

 

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

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

<!---->"-//W3C//DTD HTML 4.0 Transitional//EN">




"10%,0" frameborder="0">
    "displayFrame" src="display.htm" noresize="noresize" />
    "hiddenFrame" src="about:blank" noresize="noresize" />

 

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

 

<!---->"-//W3C//DTD HTML 4.0 Transitional//EN">




    <script type=< span="">"text/javascript">
        function requestCustomerInfo() {
            var sId = document.getElementById("txtCustomerId").value;
            top.frames["hiddenFrame"].location = "GetCustomerData.jsp?id=" + sId;
        }

        function displayCustomerInfo(sText) {
            var divCustomerInfo = document.getElementById("divCustomerInfo");
            divCustomerInfo.innerHTML = sText;
        }
    </script>


    
    Enter customer ID number to retrieve information:
    
    Customer ID: "text" id="txtCustomerId" value="" />
    
    "button" value="Get Customer Info" onclick="requestCustomerInfo()" />
    "divCustomerInfo">

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

<!---->"-//W3C//DTD HTML 4.0 Transitional//EN">



<!---->
    <script type=< span="">"text/javascript">
        window.onload = function () {
            var divInfoToReturn = document.getElementById("divInfoToReturn");
            top.frames["displayFrame"].displayCustomerInfo(divInfoToReturn.innerHTML);
        };

    </script>



    "divInfoToReturn"><!---->