Ajax使用范例【原创】
以下是一个例子，以后遇到需要Ajax的地方，都可以参考。实现效果是在页面选择地区load出下级地市的效果。
jsp页面：
<div id="infoL"> <span onclick="getProvince();" /><!-- 这里触发的getProvince()就调用到了ajax，从后台读数据--> </span> </div> <div id="infoR"> <span name="code">/** 创建异步数据传输对象 */ var xmlHttp; function createXmlHttp() { if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } /** 获取省级地区信息**/ function getProvince() <!-- 就是这个！一定要有个 createXmlHttp，还有showProvinceMessage来实现利用返回的信息添加在页面上的操作-->{ createXmlHttp(); xmlHttp.onreadystatechange = showProvinceMessage; <!-- 个人感觉这一句应该在open之后，因为open了才会去后台读数据来show返回的message啊 -->xmlHttp.open("GET", "term_getProvince.do", true); <!-- 这里写处理的类（此处用struts2.0） -->xmlHttp.send(null); } /** * 显示省级地区信息. **/ function showProvinceMessage() { if (xmlHttp.readyState == 4) { document.getElementById("province").innerHTML = ""; var messageText = xmlHttp.responseText; <!-- 这里的返回数据对应着处理类里面的return 我们这时候的return是一个html字符，接下来会说明 -->if (messageText != "") { document.getElementById("province").innerHTML += messageText; document.getElementById("province").style.display = ""; document.getElementById("cities").style.display = "none"; document.getElementById("areas").style.display = "none"; } else { document.getElementById("province").style.display = "none"; document.getElementById("cities").style.display = "none"; document.getElementById("areas").style.display = "none"; } } }??后台处理类getProvince的内容：
public final String getProvince() { // 获取省级地区信息 provinces = areaService.findAreasByAreaLevel(1); if (provinces == null || provinces.isEmpty()) { logger.info("*** provinces is empty. ***"); Area a = new Area(); a.setAreaName("--暂无可用的省级地区信息--"); provinces.add(a); } return "getProvince"; }??
其中的findAreasByAreaLevel方法为：
String sql = "from Area as a where a.areaLevel=:argAreaLevel";logger.info("*** findAreasByAreaName sql is: " + sql);Query query = sessionFactory.getCurrentSession().createQuery(sql);query.setInteger("argAreaLevel", areaLevel);return query.list();??
返回符合条件的list。然后return的是 "getProvince" 我们现在看看最终这个 "getProvince"如何把后台操作的数据显示出来，它返回的是一个jsp页面peovice.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ taglib uri="/struts-tags" prefix="s"%><s:select id="provinces" name="provinceId" headerKey="-1"headerValue="--请选择--" list="provinces" listKey="id"listValue="areaName" onchange="getCitiesOfProvince();"css/>?<!-- 这时候发现，这里显示的lsit取值依据，就是上面处理类那里出现的那个接受值provinces 然后再把上面第一个jsp的display变为可视，就大功告成了-->
?
1 楼 gougou851129 2011-02-10 最原始的ajax代码