AJAX注册1
一个MyEclipse里的AJAX例子2008-03-1919:53本例将在页面的参数以Get和POST两种方式传递到服务器，并回显到页面；
本例共包括两个主要文件getAndPostExample.html和GetAndPostExample.java以及一个配置文件web.xml
建立文件的步骤：
1.在Eclipse新建一个webproject-->ajax1
2.在ajax1里面新建一个getAndPostExample.html
3.在ajax1里面新建一个servlet-->GetAndPostExample.java
getAndPostExample.html如下
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>getAndPostExamplel.html</title>
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="thisismypage">
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<!--<linkrel="stylesheet"type="text/css"href="./styles.css">-->
<scripttype="text/javascript">
varxmlHttp;
//创建XMLhttpRequest对象
functioncreateXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}
elseif(window.XMLHttpRequest){
xmlHttp=newXMLHttpRequest();
}
}
//生成传递到服务器的参数查询串，参数值由页面表单填写得到
functioncreateQueryString(){
varfirstName=document.getElementById("firstName").value;
varmiddleName=document.getElementById("middleName").value;
varbirthday=document.getElementById("birthday").value;
varqueryString="firstname="+firstName+"&middlename="+middleName
+"&birthday="+birthday;
returnqueryString;
}
//点击按钮响应的Get方法主函数
//Get方法把参数值以名=值方式在xmlHttp.open("GET",queryString,true)中传递,queryString的形式为URL?参数名=值&参数名=值...;而xmlHttp.send(null);
functiondoRequestUsingGET(){
createXMLHttpRequest();//第一步：创建XMLHttpRequest对象
varqueryString="GetAndPostExample?";
queryString=queryString+createQueryString()
+"&timeStamp="+newDate().getTime();//第二步：定义传递的参数值字符串
xmlHttp.open("GET",queryString,true);//第三步：建立与服务器的请求
xmlHttp.onreadystatechange=handleStateChange;//第四步：监听状态-->转到监听状态函数
xmlHttp.send(null);//第五步：发送请求，并且立即返回
}
//点击按钮响应的POST方法主函数
//POST方法把参数值以名=值方式在xmlHttp.send(queryString)中传递,queryString的形式为参数名=值&参数名=值...;
functiondoRequestUsingPOST(){
createXMLHttpRequest();//第一步：创建XMLHttpRequest对象
varurl="GetAndPostExample?timeStamp="+newDate().getTime();
varqueryString=createQueryString();//第二步：定义传递的参数值字符串
xmlHttp.open("POST",url,true);//第三步：建立与服务器的请求
xmlHttp.onreadystatechange=handleStateChange;//第四步：监听状态-->转到监听状态函数
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded;");
xmlHttp.send(queryString);//第五步：发送请求，并且立即返回
}
//监听状态函数
functionhandleStateChange(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
parseResults();//-->转到函数parseResults输出从服务器返的值
}
}
}
//在页面显示从服务器传来的结果
functionparseResults(){
varresponseDiv=document.getElementById("serverResponse");
if(responseDiv.hasChildNodes()){
responseDiv.removeChild(responseDiv.childNodes[0]);
}
varresponseText=document.createTextNode(xmlHttp.responseText);//
responseDiv.appendChild(responseText);
}
</script>
</head>
<body>
<h1>Enteryourfirstname,middlename,andbirthday:</h1>
<table>
<tbody>
<tr>
<td>Firstname:</td>
<td><inputtype="text"id="firstName"/>
</tr>
<tr>
<td>Middlename:</td>
<td><inputtype="text"id="middleName"/>
</tr>
<tr>
<td>Birthday:</td>
<td><inputtype="text"id="birthday"/>
</tr>
</tbody>
</table>
<formaction="#">
<inputtype="button"value="SendparametersusingGET"
onclick="doRequestUsingGET();"/><!--调用Get方法主函数-->
<br/><br/>
<inputtype="button"value="SendparametersusingPOST"
onclick="doRequestUsingPOST();"/><!--调用POST方法主函数-->
</form>
<br/>
<h2>ServerResponse:</h2>
<divid="serverResponse"></div>
</body>
</html>
GetAndPostExample.java如下
packagecom.ajax1;
importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
publicclassGetAndPostExampleextendsHttpServlet{
protectedvoidprocessRequest(HttpServletRequestrequest,
HttpServletResponseresponse,Stringmethod)
throwsServletException,IOException{
//把响应内容类型设置为text/xml
response.setContentType("text/xml");
//得到用户参数值
StringfirstName=request.getParameter("firstName");
StringmiddleName=request.getParameter("middleName");
Stringbirthday=request.getParameter("birthday");
//生成包含用户参数值的返回字符串
StringresponseText="Hello"+firstName+""+middleName
+".Yourbirthdayis"+birthday+"."
+"[Method:"+method+"]";
//写回浏览器
PrintWriterout=response.getWriter();
out.println(responseText);
out.close();
}
protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
//Get主函数调用processRequest,完成Get方法的参数接受，返回的过程
processRequest(request,response,"GET");
}
protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)
throwsServletException,IOException{
//POST主函数调用processRequest,完成POST方法的参数接受，返回的过程
processRequest(request,response,"POST");
}
}
web.xml如下
<?xmlversion="1.0"encoding="UTF-8"?>
<web-appversion="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>
<description>ThisisthedescriptionofmyJ2EEcomponent</description>
<display-name>ThisisthedisplaynameofmyJ2EEcomponent</display-name>
<servlet-name>GetAndPostExample</servlet-name>
<servlet-class>com.ajax1.GetAndPostExample</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>GetAndPostExample</servlet-name>
<url-pattern>/GetAndPostExample</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
在这个简单的AJAX的例子里getAndPostExaple.html负责表单参数的输入和传递，而servletGetAndPostExample.java负责在服务器端接受参数。参数传递时加的时间戳是保证URL的唯一性。
相关推荐
结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo