javascript ajax 实例

最新推荐文章于 2022-06-20 10:38:05 发布

getdate

最新推荐文章于 2022-06-20 10:38:05 发布

阅读量1.2k

点赞数

分类专栏： JavaScript web 编程文章标签： ajax

本文链接：https://blog.csdn.net/getdate/article/details/38086219

版权

web 编程同时被 2 个专栏收录

54 篇文章 0 订阅

订阅专栏

JavaScript

22 篇文章 0 订阅

订阅专栏

原生态的简单的 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 οnlοad="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; 
} 
}