javascript ajax 实例

来源：互联网发布：2016网络星期一编辑：程序博客网时间：2024/06/18 12:24

原生态的简单的 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; } }

0 0