|
最近几个月，ajax一直很火，为了适应潮流，我也开始学习ajax了
写了一个例子，共享一下，为新手们开一个头吧
这是一个下拉框的连动实现，选择省份后，在另一个下拉框实时地返回我们所需要的数据.
至于ajax的优点，了解google红火的原因就知道是怎么回事了。
html文件：
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>
<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">-->
</head>
<script
type="text/javascript">
function getResult(stateVal) {
var url
= "servlet/SelectCityServlet?state="+stateVal;
if
(window.XMLHttpRequest) {
req = new XMLHttpRequest();
}else if (window.ActiveXObject) {
req = new
ActiveXObject("Microsoft.XMLHTTP");
}
if(req){
req.open("GET",url, true);
req.onreadystatechange = complete;
req.send(null);
}
}
function
complete(){
if (req.readyState == 4) {
if
(req.status == 200) {
var city =
req.responseXML.getElementsByTagName("city");
alert(city.length);
var
str=new Array();
for(var
i=0;i<city.length;i++){
str[i]=city[i].firstChild.data;
}
alert(document.getElementById("city"));
buildSelect(str,document.getElementById("city"));
}
}
}
function
buildSelect(str,sel) {
sel.options.length=0;
for(var
i=0;i<str.length;i++)
{
sel.options[sel.options.length]=new
Option(str[i],str[i])
}
}
function
test(){
alert("test");
}
</script>
<body>
<select
name="state" onChange="getResult(this.value)">
<option
value="">请选择</option>>
<option
value="zj">浙江</option>>
<option
value="zs">江苏</option>>
</select>
<select
id="city"></select>
</body>
</html>
Servlet
类：
package com.stephen.servlet;
import java.io.IOException;
import
java.io.PrintWriter;
import javax.servlet.ServletException;
import
javax.servlet.http.HttpServlet;
import
javax.servlet.http.HttpServletRequest;
import
javax.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 class
SelectCityServlet extends HttpServlet {
public
SelectCityServlet()
{
super();
}
public void destroy()
{
super.destroy();
}
public void
doGet(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException
{
response.setContentType("text/xml");
response.setHeader("Cache-Control",
"no-cache");
String state =
request.getParameter("state");
StringBuffer sb=new
StringBuffer("<state>");
if
("zj".equals(state)){
sb.append("<city>hangzhou</city><city>huzhou</city>");
}
else
if("zs".equals(state)){
sb.append("<city>nanjing</city><city>yangzhou</city><city>suzhou</city>");
}
sb.append("</state>");
PrintWriter
out=response.getWriter();
out.write(sb.toString());
out.close();
}
}
web.xml文件：
<web-app
version="2.4"
xmlns="http://java./xml/ns/j2ee"
xmlns:xsi="http://www./2001/XMLSchema-instance"
xsi:schemaLocation="http://java./xml/ns/j2ee
http://java./xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>SelectCityServlet</servlet-name>
<servlet-class>com.stephen.servlet.SelectCityServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SelectCityServlet</servlet-name>
<url-pattern>/servlet/SelectCityServlet</url-pattern>
</servlet-mapping>
</web-app>
BTW:希望可以将Flex去掉，直接命名为RIA板块，因为RIA包含了太多的技术，而ajax与flex是最常用的两种技术。
经过修改后支持中文的全程序(加入dom4j)：
MyHtml.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>
<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">-->
</head>
<script type="text/javascript">
function
getResult(stateVal) {
var url =
"servlet/SelectCityServlet?state="+stateVal;
if
(window.XMLHttpRequest) {
req = new
XMLHttpRequest();
}else if (window.ActiveXObject)
{
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if(req){
req.open("GET",url,
true);
req.onreadystatechange = complete;
req.send(null);
}
}
function complete(){
if
(req.readyState == 4) {
if (req.status == 200)
{
var city =
req.responseXML.getElementsByTagName("city");
//alert(city.length);
var str=new
Array();
for(var
i=0;i<city.length;i++){
str[i]=city[i].firstChild.data;
}
//alert(document.getElementById("city"));
buildSelect(str,document.getElementById("city"));
}
}
}
function buildSelect(str,sel) {
sel.options.length=0;
for(var i=0;i<str.length;i++)
{
sel.options[sel.options.length]=new
Option(str[i],str[i])
}
}
function test(){
alert("test");
}
</script>
<body>
<select
name="state" onChange="getResult(this.value)">
<option
value="">请选择</option>
<option
value="zj">浙江</option>
<option
value="zs">江苏</option>
<option
value="gd">广东</option>
</select>
<select
id="city"></select>
</body>
</html>
servlet代码：
SelectCityServlet.java
package org.ajaxtags.demo.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import
javax.servlet.http.HttpServlet;
import
javax.servlet.http.HttpServletRequest;
import
javax.servlet.http.HttpServletResponse;
import org.dom4j.Document;
import
org.dom4j.*;
/**
* @author stephen
*
* TODO To change the
template for this generated type comment go to Window -
* Preferences - Java
- Code Style - Code Templates
*/
public class SelectCityServlet extends
HttpServlet {
public SelectCityServlet() {
super();
}
public void destroy() {
super.destroy();
}
public void doGet(HttpServletRequest request, HttpServletResponse
response) throws
ServletException, IOException {
//没有解决中文问题的
/*
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
String state = request.getParameter("state");
StringBuffer sb=new StringBuffer("<state>");
if
("zj".equals(state)){
sb.append("<city>hangzhou</city><city>huzhou</city>");
} else if("zs".equals(state)){
sb.append("<city>nanjing</city><city>yangzhou</city><city>suzhou</city>");
}
sb.append("</state>");
PrintWriter
out=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");
}else
if("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文件：
<web-app version="2.4"
xmlns="http://java./xml/ns/j2ee"
xmlns:xsi="http://www./2001/XMLSchema-instance"
xsi:schemaLocation="http://java./xml/ns/j2ee
http://java./xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>SelectCityServlet</servlet-name>
<servlet-class>com.stephen.servlet.SelectCityServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SelectCityServlet</servlet-name>
<url-pattern>/servlet/SelectCityServlet</url-pattern>
</servlet-mapping>
</web-app>
|
