在JDeveloper实现google suggest功能

这两天一直在研究Ajax技术在ADF中的应用，用JDeveloper实现了一个类似于google搜索的功能，其效果如图：

                    图一

                    图二

其实以前并没有接触Ajax技术，但是听说过，本来是要学习JDeveloper的，但是顺便学了一下Ajax，了解了一下他的核心技术，主要是用XMLHttpReequest实现客户端和服务器端异步数据交换，它的整个过程大概有这么几步：

(1).判断浏览器的类型，通常使用分为IE和非IE核心；

(2).发送请求，通常用open(),send(),函数即可；

(3).服务器响应；

(4).处理从服务器得到的数据。

 

用JDeveloper实现这个功能，大概由这么三部分组成：（1）.JSP页面；(2).JavaScript代码；（3）.servlet。以下是我在JDeveloper中实现的过程：

1.       新建工程Test2009061902Ajax。

2.       在工程中分别添加三个文件google.jsp,google.js,googleServlet.java,其中第一二个分别为jsp页面和JavaScript文件，第三个文件时servlet程序，在创建第三个文件的时候需要注意，输入的URL Pattern就是在JavaScript代码中请求的url，本例中使用的名称为googleForm，如图3，则在js代码中使用的也是这个名称，如图4，这些信息都可以在web.xml文件中看到，因为在生成这些文件的时候，所有的信息都被保存到该文件中，见图5。

                              图3

                              图4

                             图5

3.       对工程添加一个数据连接(本例中用的表既是用数据库自带用户HR下的employees表)，如图6：

                                  图6

创建完数据连接后，需要将相应的信息写到web.xml文件中去，如图7，在添加完数据连接后我们需要将数据库的一些信息手动的添加到连接池中，该文件会自动弹出，或是数据库向导中单击右键选择“Open SQL WorkSheet”，将信息添加到其中并保存，本例中将其保存到文件Ajax-data-google-source.xml文件中，如图8。

                          图7

 

                                         图8

 

 

4.       在JSP页面上添加控件代码，如图9；

                           图9

 

5.       在google.js中添加JavaScript代码：

首先是获得XMLHttpRequest对象，代码为：

function init(){

    if(window.XMLHttpRequest){

      return new XMLHttpRequest();

    }

else if(window.ActiveXObject){

      return new ActiveXObject("Microsoft.XMLHTTP");

    }

  }

 

其次是从页面获取文本框里的内容，并将其通过”GET”形式发送到服务器端：

var googleText = document.getElementById("googleText");

xmlHttpRequest.open("GET","googleForm?first_name="+encodeURIComponent(googleText.value),true);

 

并且通过xmlHttpRequest.readyState和xmlHttpRequest.status判断数据发送是否成功，代码为：function processRequest(){

    if(xmlHttpRequest.readyState == 4){

      if(xmlHttpRequest.status == 200){

        processReponse();

      }

}

如果发送数据服务器接收成功，客服端能够接收，那么就可以获取从服务器传过来的数据，同时对其进行操作了，通过responseXML函数进行接收，该函数获取的是服务器响应后返回的xml文档形式的数据，获取返回的数据后就可以对其进行操作了，代码为：

  function processReponse(){

    //获取从服务器端返回的XMl数据

      var xmlMessage = xmlHttpRequest.responseXML;

      var showString = "show0";

      var show,showReguest="";

     //获得JSP页面上DIV对象

      var showResult = document.getElementById("suggest");

      var Judgeshow = document.getElementById("googleText").value;

      var num = xmlMessage.getElementsByTagName("show")[0].firstChild.nodeValue;

      showResult.innerHTML = "";

      if(num == 0)

         showReguest += "<div>No match!</div>";

     

      for(var i = 0;i < num;i++){

        showString = "show"+i;

        show = xmlMessage.getElementsByTagName(showString)[0].firstChild.nodeValue;

        showReguest += "<div>"+show+"</div>";

      }

      if(Judgeshow != "")

         showResult.innerHTML +=showReguest;

}

 

 

6.       servlet端负责与数据库通讯，并与页面交换数据，该程序中有预定好的几个函数，这时只需要将其重写一下即可，本例中只需重写doGet函数即可，利用HttpServletRequest对象可以获得从客户端传过来的数据，用request.getParameter("first_name")获取，连接数据库的步骤：

InitialContext initialContext = new InitialContext();

javax.sql.DataSource ds = (javax.sql.DataSource)initialContext.lookup("java:comp/env/jdbc/fkprod");

java.sql.Connection conn = ds.getConnection();

Statement  stmt = conn.createStatement();

以上的连接都是很普通的连接，但是需要注意的是lookup函数里面的参数java:comp/env/jdbc/fkprod，其中后面的部分jdbc/fkprod应该与前面web.xml里假如的<res-ref-name>一致，如图：10.

                                  图10

从表employees中获取first_name这一列的所有数据:

    String sql = "select first_name from employees where first_name like "+"'"+first_name+"%'";

ResultSet rs = stmt.executeQuery(sql);

将获取的数据输出成xml样式，输出的时候需要用到println函数，该函数需要将response的ContentType设定成” text/xml”,Header设定成"Cache-Control","no-cache"，具体代码为：

    response.setContentType("text/xml");

    response.setHeader("Cache-Control","no-cache");  

    PrintWriter out = response.getWriter();

  

    String HTML = "";

    int m=0;

while(rs.next()){

         first_name = rs.getString("first_name");

        HTML += "<show"+m+">"+first_name+"</show"+m+">";

        m++;

        }

      HTML = "<google><show>"+m+"</show>"+HTML;

      HTML += "</google>";

      out.println(HTML);

  }

 

在数据库使用完后需要关闭数据库：

      rs.close();

      stmt.close();

      conn.close();

 

以上步骤完成后，一个模仿google搜索suggest功能的网页程序就可以运行了。

 

 

体会：虽然Ajax并不算新技术，相关技术很早就产生了，:但是前景还是很好，正好借学习JDeveloper的机会学习一下该技术，通过这么一个小程序的完成，大概了了解了在JDeveloper如何把客户端和服务器端连接起来，尤其是自动生成的web.xml文件，他里面记录了数据库和页面的的一些信息，通过它可以和数据库关联起来，利用JS代码和servlet程序通讯是JDeveloper已经封装好的。

在创建的过程中也遇到了一些问题，例如:在创建servlet程序的时候没有注意到URL Pattern的重要性，而是误把创建时候的名称当成URL传给服务器了，后来用xmlHttpRequest.open("GET","googleForm?first_name="+encodeURIComponent(googleText.value),true); 将URL Pattern给了服务器后才可以正确的从服务器接收到确认。

刚开始的时候向web.xml文件中添加数据库信息的时候，由于不明白机制而错误，就是在添加res-ref-name时需要给出Connection Name，格式为jdbc/Connection Name,如图：