神马文学网一个ajax的例子(连动列表实现)
来源：百度文库 编辑：神马文学网 时间：2024/04/29 01:23:21
最近几个月，ajax一直很火，为了适应潮流，我也开始学习ajax了
写了一个例子，共享一下，为新手们开一个头吧
这是一个下拉框的连动实现，选择省份后，在另一个下拉框实时地返回我们所需要的数据.
至于ajax的优点，了解google红火的原因就知道是怎么回事了。
html文件：
MyHtml.html
function getResult(stateVal) {
var url= "servlet/SelectCityServlet?state="+stateVal;
if(window.XMLHttpRequest) {
req = new XMLHttpRequest();
}else if (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) {
var city =req.responseXML.getElementsByTagName("city");
alert(city.length);
varstr=new Array();
for(vari=0;istr[i]=city[i].firstChild.data;
}
alert(document.getElementById("city"));
buildSelect(str,document.getElementById("city"));
}
}
}
functionbuildSelect(str,sel) {
sel.options.length=0;
for(vari=0;isel.options[sel.options.length]=newOption(str[i],str[i])
}
}
functiontest(){
alert("test");
}
请选择>
浙江>
江苏>
Servlet类：
package com.stephen.servlet;
import java.io.IOException;
importjava.io.PrintWriter;
import javax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
/**
* @author stephen
*
* TODO To change the template for this generated type comment go to Window-
* Preferences - Java - Code Style - Code Templates
*/
public classSelectCityServlet extends HttpServlet {
publicSelectCityServlet(){
super();
}
public void destroy(){
super.destroy();
}
public voiddoGet(HttpServletRequest request, HttpServletResponseresponse)
throws ServletException, IOException{
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-cache");
String state =request.getParameter("state");
StringBuffer sb=newStringBuffer("");
if("zj".equals(state)){
sb.append("hangzhou huzhou ");
}elseif("zs".equals(state)){
sb.append("nanjing yangzhou suzhou ");
}
sb.append(" ");
PrintWriterout=response.getWriter();
out.write(sb.toString());
out.close();
}
}
web.xml文件：
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
SelectCityServlet
com.stephen.servlet.SelectCityServlet
SelectCityServlet
/servlet/SelectCityServlet
BTW:希望可以将Flex去掉，直接命名为RIA板块，因为RIA包含了太多的技术，而ajax与flex是最常用的两种技术。
经过修改后支持中文的全程序(加入dom4j)：
MyHtml.html:
MyHtml.html
请选择
浙江
江苏
广东
servlet代码：
SelectCityServlet.java
package org.ajaxtags.demo.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
import org.dom4j.Document;
importorg.dom4j.*;
/**
* @author stephen
*
* TODO To change thetemplate for this generated type comment go to Window -
* Preferences - Java- Code Style - Code Templates
*/
public class SelectCityServlet extendsHttpServlet {
public SelectCityServlet() {
super();
}
public void destroy() {
super.destroy();
}
public void doGet(HttpServletRequest request, HttpServletResponseresponse) throws
ServletException, IOException {
//没有解决中文问题的
/*
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
String state = request.getParameter("state");
StringBuffer sb=new StringBuffer("");
if("zj".equals(state)){
sb.append("hangzhou huzhou ");
} else if("zs".equals(state)){
sb.append("nanjing yangzhou suzhou ");
}
sb.append(" ");
PrintWriterout=response.getWriter();
out.write(sb.toString());
out.close();
*/
//下面代码解决了中文问题，并使用了dom4j生成XML，这样在IE、Firefox中都可以正常显示中文
response.setCharacterEncoding("UTF8");
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
String state =request.getParameter("state");
Document document = DocumentHelper.createDocument();
Element root = document.addElement("state");
Element city = null;
if ("zj".equals(state)){
city = root.addElement("city");
city.setText("杭州");
city =root.addElement("city");
city.setText("huzhou");
}elseif("gd".equals(state)){
city =root.addElement("city");
city.setText("广州");
city =root.addElement("city");
city.setText("深圳");
city =root.addElement("city");
city.setText("惠州");
city =root.addElement("city");
city.setText("东莞");
} else {
city = root.addElement("city");
city.setText("南京");
city =root.addElement("city");
city.setText("苏州");
city= root.addElement("city");
city.setText("yangzhou");
}
PrintWriter out = response.getWriter();
String s =root.asXML();
out.write(s);
out.close();
}
}
下面是配置的情况：
web.xml文件：
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
SelectCityServlet
com.stephen.servlet.SelectCityServlet
SelectCityServlet
/servlet/SelectCityServlet
写了一个例子，共享一下，为新手们开一个头吧
这是一个下拉框的连动实现，选择省份后，在另一个下拉框实时地返回我们所需要的数据.
至于ajax的优点，了解google红火的原因就知道是怎么回事了。
html文件：
function getResult(stateVal) {
var url= "servlet/SelectCityServlet?state="+stateVal;
if(window.XMLHttpRequest) {
req = new XMLHttpRequest();
}else if (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) {
var city =req.responseXML.getElementsByTagName("city");
alert(city.length);
varstr=new Array();
for(vari=0;i
}
alert(document.getElementById("city"));
buildSelect(str,document.getElementById("city"));
}
}
}
functionbuildSelect(str,sel) {
sel.options.length=0;
for(vari=0;i
}
}
functiontest(){
alert("test");
}
Servlet类：
package com.stephen.servlet;
import java.io.IOException;
importjava.io.PrintWriter;
import javax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
/**
* @author stephen
*
* TODO To change the template for this generated type comment go to Window-
* Preferences - Java - Code Style - Code Templates
*/
public classSelectCityServlet extends HttpServlet {
publicSelectCityServlet(){
super();
}
public void destroy(){
super.destroy();
}
public voiddoGet(HttpServletRequest request, HttpServletResponseresponse)
throws ServletException, IOException{
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-cache");
String state =request.getParameter("state");
StringBuffer sb=newStringBuffer("
if("zj".equals(state)){
sb.append("
}elseif("zs".equals(state)){
sb.append("
}
sb.append("
PrintWriterout=response.getWriter();
out.write(sb.toString());
out.close();
}
}
web.xml文件：
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
BTW:希望可以将Flex去掉，直接命名为RIA板块，因为RIA包含了太多的技术，而ajax与flex是最常用的两种技术。
经过修改后支持中文的全程序(加入dom4j)：
MyHtml.html:
servlet代码：
SelectCityServlet.java
package org.ajaxtags.demo.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
import org.dom4j.Document;
importorg.dom4j.*;
/**
* @author stephen
*
* TODO To change thetemplate for this generated type comment go to Window -
* Preferences - Java- Code Style - Code Templates
*/
public class SelectCityServlet extendsHttpServlet {
public SelectCityServlet() {
super();
}
public void destroy() {
super.destroy();
}
public void doGet(HttpServletRequest request, HttpServletResponseresponse) throws
ServletException, IOException {
//没有解决中文问题的
/*
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
String state = request.getParameter("state");
StringBuffer sb=new StringBuffer("
if("zj".equals(state)){
sb.append("
} else if("zs".equals(state)){
sb.append("
}
sb.append("
PrintWriterout=response.getWriter();
out.write(sb.toString());
out.close();
*/
//下面代码解决了中文问题，并使用了dom4j生成XML，这样在IE、Firefox中都可以正常显示中文
response.setCharacterEncoding("UTF8");
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
String state =request.getParameter("state");
Document document = DocumentHelper.createDocument();
Element root = document.addElement("state");
Element city = null;
if ("zj".equals(state)){
city = root.addElement("city");
city.setText("杭州");
city =root.addElement("city");
city.setText("huzhou");
}elseif("gd".equals(state)){
city =root.addElement("city");
city.setText("广州");
city =root.addElement("city");
city.setText("深圳");
city =root.addElement("city");
city.setText("惠州");
city =root.addElement("city");
city.setText("东莞");
} else {
city = root.addElement("city");
city.setText("南京");
city =root.addElement("city");
city.setText("苏州");
city= root.addElement("city");
city.setText("yangzhou");
}
PrintWriter out = response.getWriter();
String s =root.asXML();
out.write(s);
out.close();
}
}
下面是配置的情况：
web.xml文件：
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
一个ajax的例子(连动列表实现)
iBATIS实现的一个例子
利用XMLHTTP实现的二级连动Select
利用XMLHTTP实现的二级连动Select
一个ajax.Net库的使用例子－－下拉框联动
实现一个无刷新的基于ajax的简易聊天室
计算机科学论坛--一个yale-cas实现单点登录的简单例子实现
简单的列表框ListBox的例子
一个BPEL的例子
一个BPEL的例子
实现AJAX风格的Portal
实现AJAX风格的Portal
Ajax 基础和例子
Ajax 基础和例子
一个spring的简单例子
一个真实的大学生例子
堕落：一个负面的例子
Ajax+jsp用户登陆例子
Jquery的get方式实现AJAX
一个简单的XML Schema的例子
载荷为位置函数的一个例子
使用Hibernate的一个完整例子
C# Remoting的一个简单例子
载荷为位置函数的一个例子