最近看ajax基础教程，学者敲书上的代码。在这里记录一下，方便以后用时可以查阅。
GetAndPostExample.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 createQueryString(){
var firstName = document.getElementById("firstName").value;
var middleName = document.getElementById("middleName").value;
var birthday = document.getElementById("birthday").value;
var queryString = "firstName="+firstName+"&middleName="+middleName
+"&birthday="+birthday;
return queryString;
}
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 = "GetAndPostExample?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>
<table>
<tbody>
<tr>
<td>firstName</td>
<td><input type="text" id="firstName"/></td>
</tr>
<tr>
<td>middleName</td>
<td><input type="text" id="middleName"/></td>
</tr>
<tr>
<td>birthday</td>
<td><input type="text" id="birthday"/></td>
</tr>
</tbody>
</table>
<form action="#">
<input type="button" value="Send Parameter use GET" onclick="doRequestUsingGET();"/>
<br/><br/>
<input type="button" value="Send Parameter use POST" onclick="doRequestUsingPOST();"/>
</form>
<br/><br/>
<h2>server response:</h2>
<div id="serverResponse">
</div>
</body>
</html>
上面的请求将调用服务器端得GetAndPostExample这个servlet。
GetAndPostExample.java代码如下：
package ajaxbook.chap3;
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;
public class GetAndPostExample extends HttpServlet{
protected void processRequest(HttpServletRequest req,
HttpServletResponse res,String method) throws IOException{
res.setContentType("text/xml");
String firstName = req.getParameter("firstName");
String middleName = req.getParameter("middleName");
String birthday = req.getParameter("birthday");
StringBuilder sBuilder = new StringBuilder();
sBuilder.append("Hello ").append(firstName).append(" ").append(middleName);
sBuilder.append(". Your birthday is ").
append(birthday).append(". Your request method is ").append(method).append(" .");
PrintWriter pw = res.getWriter();
pw.write(sBuilder.toString());
pw.close();
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
System.out.println("the get method");
processRequest(req,res,"GET");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
System.out.println("the post method");
processRequest(req,res,"POST");
}
}
开始时遇到一点小问题，客户端请求不到该servlet。后面还是想起来了，要在web.xml文件中配置servlet和请求路径。看来是用struts用多了，都忘了最基本的了。
web.xml中要配置请求的servlet.
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
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">
<servlet>
<servlet-name>GetAndPostExample</servlet-name>
<servlet-class>ajaxbook.chap3.GetAndPostExample</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>GetAndPostExample</servlet-name>
<url-pattern>/GetAndPostExample</url-pattern>
</servlet-mapping>
</web-app>
分享到：
相关推荐
在jquery中ajax提交表单有post与get方式，在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了，下面我来介绍两个提交表单数据的方法。$get方式提交表单get() 方法通过远程HTTP ，下面我...
本项目使用了jQuery的get/post两种方法提交Json格式的数据到后台，后台再把Json格式的数据传到前台。实现了JSON字符串和JSON对象之间的转换。
最近比较闲，就把以前用过的技术串一下做个手札，方便以后自己...get/post两种提交方式，但get提交容易乱码，一定多加注意 jsp页面： 代码如下: <%@ page language=”java” import=”java.util.*” pageEncodi
Ajax对象接受一个对象字面量为参数，这个对象字面量中包含method，url，success，params，fail参数
ajax，页面部分刷新，实现动态提交数据到服务器；动态从服务区获取数据。get，post两种传递数据方法，Json、html、text、xml等多种数据格式。
最近的一个项目中，需要通过 JavaScript 提交表单数据到另一个域名下的PHP接口（因为数据较大，需要HTTP POST方式提交），并获取PHP接口的返回值，在页面无刷新、无跳转的情况下，更新div标签内的内容。 浏览器...
主要介绍了ajax中data传参的两种方式,结合实例形式简单分析了ajax参数传递的POST与GET方式,非常简单实用,需要的朋友可以参考下
简单的ajax利用jquery的封装方法实现get和post两种提交方式
Ajax中send方法参数的使用 一般情况下，使用Ajax提交的参数多是些简单的字符串，可以直接使用GET方法将要提交的参数写到... 需要注意的是根据提交方式的不同，两种提交方式分别调用后台的doGet方法和doPost方法。
主要介绍了AJAX使用get与post模式的区别,实例分析了Ajax中get与post的具体用法与使用区别,具有一定参考借鉴价值,需要的朋友可以参考下
get如果请求url没有变化，取出缓存，提高效率；请求会缓存到浏览器中，可以通过历史记录查看用户信息，安全性低； post传送变化的数据显示，变动性访问；...两种方式的参数都可以用Request来获得。
使用get遇到的问题： 1.问题一. 缓存：当每次访问的url相同，客户端直接读取本地缓存里面的内容，即使后台数据...测试结果：通过使用Chrome测试，结果get的两种问题，都已经得到了解决 使用post遇到的问题： post方式，
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。 GET – 从指定的资源请求数据 POST – 向指定的资源提交要处理的数据 GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。...
JQuery中ajax,get方法在ashx,aspx,asmx中的使用,分别是在aspx页面,ashx页面,webService页面三种列举了案例,分别使用了GET和POST两种方式的请求,请求类型类型包含有text,json,xml.本案例全面,内容基础易懂,特别适合...
大家都知道GET方式提交数据有长度限制，有时我们必须使用POST方式来提交数据。 但对于POST方式，使用上述的几种方法经过多次测试，问题依旧。我郁闷了好几天。 今天把问题解决了，很简单，是使用escape(或...
在建立好XHR对象之后,客户端需要做的就是,将数据以某种方式传递到服务器,以获得相应的响应,在这里, Ajax技术总结的第二季,我将重点阐述 提交数据的两种方式。 在这之前需要了解一下我们的HTTP传输协议: HTTP 的...
* @param string type 请求类型,post,get（目前只实现了这两种） * @param strng url 请求的地址 * @param object data 当使用post请求时的请求参数，ex: data=> {name:'adam'} * @param function callback 成功...