这应该是入门级别的，呵呵。
把页面上select控件上选中的值传给服务端得servlet。
postingXML.html.html的代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var xmlHttp ;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function sendXML(){
createXMLHttpRequest();
var url = "PostExamplePets?timeStamp="+ new Date().getTime();
xmlHttp.open("Post",url,true);
xmlHttp.onreadystatechange= handleStateChange;
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
var xmlPets = getClientPets();
xmlHttp.send(xmlPets);
}
function getClientPets(){
var xmlPets ="<pets>";
var option = document.getElementById("petTypes");
if (option) {
for (var i = 0 ; i < option.length; i++) {
if(option[i].selected) {
xmlPets= xmlPets +"<type>" +option[i].value+"<\/type>";
}
}
}
xmlPets= xmlPets +"<\/pets>";
return xmlPets;
}
function doRequestUsingGET(){
createXMLHttpRequest();
var queryString = "GetAndPostExample?";
queryString = queryString + createQueryString()+
"×tamp="+ new Date().getTime();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET",queryString,true);
xmlHttp.send(null);
}
function doRequestUsingPOST(){
createXMLHttpRequest();
var url = "GetAndPostExamplePets?timestampe=" + new Date().getTime();
xmlHttp.open("POST",url,true);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
var queryString = createQueryString();
xmlHttp.send(queryString);
}
function handleStateChange(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200) {
parseResults();
}
}
}
function parseResults(){
var responseDiv = document.getElementById("serverResponse");
if (responseDiv.hasChildNodes()){
responseDiv.removeChild(responseDiv.childNodes[0]);
}
var responseText = document.createTextNode(xmlHttp.responseText);
responseDiv.appendChild(responseText);
}
</script>
</head>
<body>
<form action="#">
<h1>please select the pets type in your home:</h1><br/>
<select id="petTypes" size="6" multiple="true">
<option value="dog">dog</option>
<option value="bird">bird</option>
<option value="pig">pig</option>
<option value="duck">duck</option>
<option value="rabbit">rabbit</option>
<option value="wugui">乌龟</option>
</select>
<br/><br/>
<input type="button" value="submit the pets" onclick="sendXML();"><br/><br/>
</form>
<h2>server response:</h2>
<div id="serverResponse">
</div>
</body>
</html>
处理客户端请求的java代码PostExamplePets.java
package ajaxbook.chap3;
import java.io.BufferedReader;
import java.io.ByteArrayInputStream;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;
import org.w3c.dom.Document;
import org.w3c.dom.NodeList;
import org.xml.sax.SAXException;
public class PostExamplePets extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
// TODO Auto-generated method stub
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
String result = this.getRequestPets(req);
Document xmlDoc = null;
try {
xmlDoc = DocumentBuilderFactory.newInstance().newDocumentBuilder().
parse(new ByteArrayInputStream(result.getBytes()));
} catch (SAXException e) {
e.printStackTrace();
} catch (ParserConfigurationException e) {
e.printStackTrace();
}
NodeList selectedPetsType = xmlDoc.getElementsByTagName("type");
StringBuilder sb = new StringBuilder("selected pet type are : ");
for (int i = 0 ; i < selectedPetsType.getLength() ;i ++ ){
sb.append(selectedPetsType.item(i).getFirstChild().getNodeValue()).append(" ");
}
res.setContentType("text/xml");
res.getWriter().print(sb.toString());
}
private String getRequestPets(HttpServletRequest req) {
StringBuilder sb = new StringBuilder();
BufferedReader bufferedReader = null;
try {
bufferedReader = req.getReader();
String line ;
while((line=bufferedReader.readLine()) != null) {
sb.append(line);
}
}
catch (IOException e) {
e.printStackTrace();
} finally{
try {
bufferedReader.close();
} catch (IOException e) {
e.printStackTrace();
}
}
return sb.toString();
}
}
同样，servlet需要在web.xml文件中配置。
分享到：
相关推荐
在基于数据的应用中，用户需求的数据如联系人列表，可以从独立于实际网页的服务端取得并且可以被动态地写入网页中，给缓慢的Web应用体验着色使之像桌面应用一样。 虽然大部分开发人员在过去使用过XMLHttp或者...
Java数据压缩与传输实例，可以学习一下实例化套按字、得到文件输入流、压缩输入流、文件输出流、实例化缓冲区、写入数据到文件、关闭输入流、关闭套接字关闭输出流、输出错误信息等Java编程小技巧。 Java数组倒置...
Ajax(Asynchronous JavaScript and XML):翻译成中文就是异步的JavaScript和XML。 从功能上来看是一种在无需重新加载整个网页的情况下能够更新部分网页的技术。 传统的网页 想要更新内容或者提交表单就要重新加载或...
//dateType:null, //'xml','script',or 'json'(接受服务端返回的类型) //clearForm:true, //成功提交后，清除所有表单元素的值 //resetForm:true, //成功提交后，重置所有表单的值 //timeout:3000 //限制请求的...
processData(true) 数据类型: Boolean 在默认的情况下，如果data选项传进的数据是一个对象而不是字符串，将会自动地被处理和转换成一个查询字符串，以适应默认的content-type－－"application/x-...
Java数据压缩与传输实例，可以学习一下实例化套按字、得到文件输入流、压缩输入流、文件输出流、实例化缓冲区、写入数据到文件、关闭输入流、关闭套接字关闭输出流、输出错误信息等Java编程小技巧。 Java数组倒置...
Java数据压缩与传输实例，可以学习一下实例化套按字、得到文件输入流、压缩输入流、文件输出流、实例化缓冲区、写入数据到文件、关闭输入流、关闭套接字关闭输出流、输出错误信息等Java编程小技巧。 Java数组倒置...
Django获取多个数据以及文件上传 Django的CBV和FBV Django模板语言循环字典 Django基于正则表达式的URL Django对应的路由名称 Django路由分发 DjangoORM基本创建基本类型以及生成数据库结构 DjangoORM使用mysql注意 ...
以“％”开头，[第几个数值$][flags][宽度][.精确度][格式] printf()的引入是为了照顾c语言程序员的感情需要 格式化输出 Formatter；格式化输入 Scanner；正则表达式 输出格式控制： 转义符： \ddd 1到3位8...
Java数据压缩与传输实例，可以学习一下实例化套按字、得到文件输入流、压缩输入流、文件输出流、实例化缓冲区、写入数据到文件、关闭输入流、关闭套接字关闭输出流、输出错误信息等Java编程小技巧。 Java数组倒置...
Java数据压缩与传输实例，可以学习一下实例化套按字、得到文件输入流、压缩输入流、文件输出流、实例化缓冲区、写入数据到文件、关闭输入流、关闭套接字关闭输出流、输出错误信息等Java编程小技巧。 Java数组倒置...
Java数据压缩与传输实例，可以学习一下实例化套按字、得到文件输入流、压缩输入流、文件输出流、实例化缓冲区、写入数据到文件、关闭输入流、关闭套接字关闭输出流、输出错误信息等Java编程小技巧。 Java数组倒置...
数字证书：从文件中读取数字证书，生成文件输入流,输入文件为c:/mycert.cer，获取一个处理X.509证书的证书工厂…… Java+ajax写的登录实例 1个目标文件 内容索引:Java源码,初学实例,ajax,登录 一个Java+ajax写的...
数字证书：从文件中读取数字证书，生成文件输入流,输入文件为c:/mycert.cer，获取一个处理X.509证书的证书工厂…… Java+ajax写的登录实例 1个目标文件 内容索引:Java源码,初学实例,ajax,登录 一个Java+ajax写的...
分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、对Ajax的支持...
分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、对Ajax的支持...
6.7.4 服务端的Ajax 6.8 内容协商 7. 验证 7.1 声明约束 7.2 验证约束 7.3 客户端验证 7.4 验证和国际化 8. 服务层 8.1 声明式事务 8.2 服务的作用域 8.3 依赖注入和服务 8.4 使用Java的服务 9. 测试 9.1 单元测试 ...
1:数据访问层:主要看数据层里面有没有包含逻辑处理，实际上它的各个函数主要完成各个对数据文件的操作。而不必管其他操作。 2:业务逻辑层:主要负责对数据层的操作。也就是说把一些数据层的操作进行组合。 3:表示层:...