客戶端利用XMLHttpRequest對象異步傳遞參數(shù)到服務(wù)器②服務(wù)端接收參數(shù)并查詢數(shù)據(jù)庫，根據(jù)結(jié)果集組織JSON數(shù)據(jù)，然后返回JSON③客戶端獲取服務(wù)器響應(yīng)后，立即執(zhí)行回調(diào)函數(shù)，解析JSON數(shù)據(jù)，然后加載到頁面上示例：①前端頁面<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><script language="javascript" src="js/xmlhttp.js"></script><script language="javascript">function submit(){if(document.getElementById('province').options[document.getElementById('province').selectedIndex].value==0){alert("請選擇省份");return false;}else{createXMLHttpRequest();xmlHttp.onreadystatechange=callback;xmlHttp.open("post","/Ajax/ActionServlet");xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");xmlHttp.send("province="+document.getElementById('province').options[document.getElementById('province').selectedIndex].value);return true;}}function callback(){if(xmlHttp.readyState==4){if(xmlHttp.status==200){var json=new Object();json=eval("("+xmlHttp.responseText+")");//清空上次的記錄while(document.getElementById('city').options.length>0){document.getElementById('city').options.remove(0);}//動態(tài)添加數(shù)據(jù)for(var i=0;i<json.province.length;i++){var o=document.createElement('OPTION');o.text=json.province[i].city;o.value=json.province[i].city;document.getElementById('city').add(o);}}}}</script></head><body><select name="province" id="province" onchange="return submit()"><option value="0">選擇省份</option><option value="廣東">廣東</option><option value="海南">海南</option></select><select name="city" id="city"></select></body></html>②服務(wù)器端處理package com.hzp.servlet;import java.io.IOException;import java.io.PrintWriter;import java.sql.ResultSet;import java.sql.SQLException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.hzp.util.Database;public class ActionServlet extends HttpServlet {private static final long serialVersionUID = 1L;public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {System.out.println("dopost");response.setContentType("text/html;charset=utf-8");request.setCharacterEncoding("utf-8");PrintWriter out = response.getWriter();//獲取參數(shù)String province=request.getParameter("province");System.out.println(province);//查詢數(shù)據(jù)庫Database db=new Database();ResultSet rs=db.selectDB(province);//組織JSON字符字面量StringBuffer info=new StringBuffer();//JSON格式開始info.append("{province:[");try {while(rs.next()){System.out.println(rs.getString("city"));info.append("{city:'");info.append(rs.getString("city"));info.append("'},");}//去掉最后那個(gè)逗號info.delete(info.length()-1,info.length());//JSON格式結(jié)尾info.append("]}");rs.close();db.closeDB();} catch (SQLException e) {e.printStackTrace();}System.out.println(info.toString());//返回JSON給客戶端out.print(info.toString());out.flush();out.close();}}③數(shù)據(jù)庫操作封裝package com.hzp.util;import java.sql.Connection;import java.sql.DriverManager;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;public class Database {private Connection conn=null;private PreparedStatement pstmt = null;private ResultSet rs = null;private final String URL="jdbc:mysql://localhost:3306/ajax?user=root&password=515422";public Database(){try{Class.forName("com.mysql.jdbc.Driver").newInstance();this.conn=DriverManager.getConnection(this.URL);}catch(Exception e){e.printStackTrace();}}public ResultSet selectDB(String province){String sql="select * from address where province=?";try {pstmt = this.conn.prepareStatement(sql);pstmt.setString(1,province);rs = pstmt.executeQuery();} catch (SQLException e) {e.printStackTrace();}return rs;}public void closeDB() {try {if (rs != null)rs.close();if (pstmt != null)pstmt.close();if (conn != null)conn.close();} catch (Exception e) {e.printStackTrace();}}}
