原生態的簡單 的 javascript Ajax 只為做記錄:
//******************************** 頁面代碼
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>省市</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript"> var xmlHttp; // 建立xmlHttp對象 function createXMLHttpRequest() { if(window.ActiveXObject){ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest){ xmlHttp=new XMLHttpRequest(); } } function innitProvince() { //alert("ok"); createXMLHttpRequest(); var url = '<%=path%>/province.do?&method=innitProvince&date='+new Date().getTime(); //alert(xmlHttp.getAllResponseHeaders()); xmlHttp.open("POST",url,true); xmlHttp.onreadystatechange = callBack; xmlHttp.send(null); } function callBack() { if(xmlHttp.readyState==4) { if(xmlHttp.status==200) { createProvince(); } } } function createProvince() { var repXml = ""; repXml = xmlHttp.responseXML; //alert(xmlHttp.getAllResponseHeaders()); var names = repXml.getElementsByTagName("name"); var pro = document.getElementById("pro"); pro.lang = 0; for(var i=0;i<names.length;i++) { var name = names.firstChild.data; //alert(name); var option = document.createElement("<option>"); option.setAttribute("value",name); option.innerText = name; pro.appendChild(option); } } </script> </head> <body onload="innitProvince();"> <form action=""> <h1>省份</h1> <select id="pro" style="width: 150px;" > <option value="-1">請選擇</option> </select> </form> </body> </html>
後台
public class ProvinceAction extends Action { /* * Generated Methods */ /** * Method execute * @param mapping * @param form * @param request * @param response * @return ActionForward */ public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) { // ProvinceForm provinceForm = (ProvinceForm) form; System.out.println("---------------province is requested!------------------"); String method = request.getParameter("method"); String pr[] = {"北京","天津","上海","廣州","河北","山東"}; String city[] = {"1","2","3","4","5","6"}; StringBuffer sb = new StringBuffer(); if(method!=null&&method.trim().length()>0) { try { response.setContentType("text/xml;charset=UTF-8"); // 此句和下面的一定不能顛倒位置,否則頁面上會出現亂碼 PrintWriter pw = response.getWriter(); sb.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>"); if(method.equalsIgnoreCase("innitProvince")) { sb.append("<province>"); for(Object obj:pr) { String pro = (String) obj; sb.append("<name>"+pro+"</name>"); } sb.append("</province>"); pw.write(sb.toString()); pw.flush(); } else { sb.append("<province>"); for(Object obj:city) { String pro = (String) obj; sb.append("<name>"+pro+"</name>"); } sb.append("</province>"); pw.write(sb.toString()); pw.flush(); } } catch (IOException e) { e.printStackTrace(); } } return null; } }