使用Ajax+Servlet訪問MySQL資料庫實現簡易搜尋框
最近在準備研究生複試的時候偶然看到關於Ajax技術的一篇文章，故也想來小試牛刀看看到底是怎麼一回事
這一段我就直接copy網上的介紹了，省得碼字
什麼是Ajax：Ajax（Asynchronous Javascrpt And Xml）是一種運用於瀏覽器的技術，它可以在瀏覽器與伺服器之間使用非同步通訊機制進行資料通訊，從而允許瀏覽器向伺服器獲取少量資訊而不是重新整理整個頁面。Ajax並不是一種新的技術，或者說它不是一種技術，它只是多種技術的綜合：Javascript、Html、Css、Dom、Xml、XMLHttpRequest等技術按照一定的方式在協作中發揮各自的作用就構成了Ajax。
接下來就廢話少說，直接進入正題
我們先從前端頁面開始吧，新建一Web專案，在Webcontent裡新建一search.jsp檔案，下面是專案所需的檔案圖片
search.jsp檔案
<script type="text/javascript"> var xmlHttp; function getMoreContent() { var content = document.getElementById("keyword").value; if(content==""){ cleanKeyContent(); return; } xmlHttp = getXmlHttp(); //獲取XmlHttp物件實現Ajax非同步傳輸資料 var url = "AjaxTest1?keyword="+encodeURI(encodeURI(content)); //encodeURI解決中文關鍵字亂碼問題 xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange = callback; //呼叫onreadystatechange的回撥函式 xmlHttp.send(null); } //獲取XmlHttp物件實現Ajax非同步傳輸資料 function getXmlHttp() { var xmlHttp; if(window.XMLHttpRequest){ //這種情況針對於目前主流瀏覽器都適用 xmlHttp = new XMLHttpRequest(); } if(window.ACTIVEXObject){ xmlHttp = new ACTIVEXObject("Microsoft.XMLHttp"); if(!xmlHttp){ xmlHttp = new ACTIVEXObject("Msxml2.XMLHttp"); } } return xmlHttp; } function callback() { if(xmlHttp.readyState == 4 && xmlHttp.status == 200){ var result = xmlHttp.responseText; //獲取伺服器返回的文字資料 var jsonData = eval("(" +result+ ")"); //解析獲取的Json資料 document.getElementById("test").innerHTML = jsonData; } } function cleanKeyContent() { document.getElementById("test").innerHTML = ""; } </script> </head> <body> <div id="myDiv"> <input type="text" size="50" id="keyword" onkeyup="getMoreContent()" onblur="cleanKeyContent()" onfocus="getMoreContent()"/> <input type="button" value="百度一下" width="50px"/> <p id="test">新哥要變的內容</p> </div> </body>
這裡要注意的地方是
var url = "AjaxTest1?keyword="+encodeURI(encodeURI(content));//encodeURI解決中文關鍵字亂碼問題
String keyword = request.getParameter("keyword");
keyword = URLDecoder.decode(keyword, "UTF-8");//解決中文搜尋問題
它們共同解決了jsp與servlet伺服器通訊時中文亂碼問題，否則搜尋框將實現不了中文搜尋功能
下面是AjaxTest1.servlet檔案
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("UTF-8"); String keyword = request.getParameter("keyword"); keyword = URLDecoder.decode(keyword, "UTF-8"); //解決中文搜尋問題 datas.clear(); //每次訪問伺服器時都要將datas集合清空否則datas集合中元素會一直增加 connectDatabase(keyword); //連線MySQL資料庫訪問資料庫內容 if(datas.size()>0){ //訪問到資料庫中資料的時候方可將資料傳送到客戶端 Gson gson = new Gson(); String data = gson.toJson(datas); PrintWriter write = response.getWriter(); write.write(data); } } //連線MySQL資料庫訪問資料庫內容 private void connectDatabase(String keyword) { Connection connection = null; PreparedStatement prep = null; String Sql = null; try { Class.forName("com.mysql.jdbc.Driver"); String url = "jdbc:mysql://localhost/firsttable?useSSL=false"; connection = DriverManager.getConnection(url, "root", "xinge666"); Sql = "SELECT * FROM keyword WHERE Keyword LIKE ?"; prep = (PreparedStatement) connection.prepareStatement(Sql); prep.setString(1, '%' +keyword+ '%'); ResultSet result = prep.executeQuery(); while (result.next()) { if(!datas.contains(result.getString("Keyword"))){ datas.add(result.getString("Keyword")); } } } catch (ClassNotFoundException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); }finally { if(connection != null){ try { connection.close(); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } } if (prep != null) { try { prep.close(); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } } } }
這裡要注意的地方是：
1. String url = "jdbc:mysql://localhost/firsttable?useSSL=false";
這一句很重要，如果不加這一句很可能會出現以下情況
Establishing SSL connection without server's identity verification is not recommended.
2. Sql = "SELECT * FROM keyword WHERE Keyword LIKE ?";
prep.setString(1, '%' +keyword+ '%');
這個是LIKE關鍵字的用法