Ajax案例(1)

原文地址：http://xiongjiajia.iteye.com/blog/1319245

1.简单的级联下拉框

    Xml代码 
    
  
 <?xmlversion="1.0"encoding="UTF-8"?>
<web-appxmlns="http://java.sun.com/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"version="2.5"xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
servletservlet-name>SelectCityServlet</servlet-class>com.demo.servlet.SelectCityServletservlet-mappingurl-pattern>/servlet/SelectCityServletwelcome-file-listwelcome-file>index.jspweb-app>

    Java代码 
    
  
packagecom.demo.servlet; 
importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
publicclassSelectCityServletextendsHttpServlet{
publicSelectCityServlet(){super();}
voiddestory(){super.destroy();}
 @Override
protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
 //TODOAuto-generatedmethodstub
 response.setContentType("text/xml");
 response.setHeader("Cache-Control","no-cache");
 response.setCharacterEncoding("UTF-8");
 Stringstate=request.getParameter("state");
 StringBufferbuffer=newStringBuffer("<state>");
if("hn".equals(state)){
 buffer.append("<city>郑州</city><city>洛阳</city>");
 }elseif("hb".equals(state)){
 buffer.append("<city>武汉</city><city>荆州</city><city>黄冈</city>");
 }
 buffer.append("</state>");
 PrintWriterout=response.getWriter();
 out.write(buffer.toString());
 out.close();
 }

HTML代码 <%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%<%

Stringpath=request.getContextPath();

StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%@H_982_301@ <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"htmlheadscripttype="text/javascript"@H_982_301@ functiongetResult(stateVal){

　　varurl="servlet/SelectCityServlet?state="+stateVal;

　　if(window.XMLHttpRequest){

　　req=newXMLHttpRequest();

　　}elseif(window.ActiveXObject){

　　req=newActiveXObject("Microsoft.XMLHTTP");

　　}

　　if(req){

　　req.open("GET",url,true);

　　req.onreadystatechange=complete;

　　req.send(null);

functioncomplete(){

　　if(req.readyState==4){

　　if(req.status==200){

　　varcity=req.responseXML.getElementsByTagName("city");

　　file://alert(city.length);

　　varstr=newArray();

　　for(vari=0;icity.length;i++){

　　str[i]=city[i].firstChild.data;

　　file://alert(document.getElementById("city"));

　　buildSelect(str,document.getElementById("city"));

functionbuildSelect(str,sel){

　　sel.options.length=0;

str.length;i++){

　　sel.options[sel.options.length]=newOption(str[i],str[i])

scriptbodyselectname="state"onChange="getResult(this.value)"@H_982_301@ 　　optionvalue="">Selectoptionoptionvalue="hn">河南optionvalue="hb">湖北selectselectid="city">CITY>

原文链接：https://www.f2er.com/ajax/166905.html

上一篇：原生态Ajax——字符串两次切割下一篇：ajax 导致浏览器卡死

猜你在找的Ajax相关文章