欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

开发第一个java+ajax范例

更新时间: 2014-01-05 01:54:23 责任编辑: Author_N1

 

开发第一个Java+Ajax实例

本节的例子是发送用户请求和现实服务器处理的结果,后者是Servlet。处理用户发送的请求,比把处理结果返回给用户。

运行实例:


这是一个简单的表单,只有一个输入名字的输入框,在输入框中输入名字,单击submit按钮,就在同一个页面底部显示输入的内容,该输入内容是由服务器中的servlet服务器返回的,当然这是由AJAX技术实现的。


客户端的代码:

<!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>Simple Application Form</title>
<script type="text/javascript">
  var xmlhttp;
  var outMsg;
  function createXMLHtppRequest()
  {
    if(window.ActiveXOject)
    {
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest)
    {
      xmlhttp = new XMLHttpRequest();
    }
  }
  
  
  function createQueryString()
  {
    //createRequest();
    var userName = document.getElementById("userName").value;
    var queryString=  "userName="+userName;
    return queryString;  
  }
  
  function doRequest()  
{
  createXMLHtppRequest();
  var queryString = "HelloAjaxJava1?";
  queryString = queryString+createQueryString();
  xmlhttp.onreadystatechange = handleStateChange;
  xmlhttp.open("POST", queryString, true);
  xmlhttp.send(null);
  
}
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>
  <h1>Simple Application Form</h1>
  <form action="#">
  choose your user:
  <input type="text" id="userName"/>
  <br>
  <br>
  <input type="button" id="submission" value="submit" onclick="doRequest();"/>
  </form>
  <br>
  <h2>Server Response:</h2>
  <div id="serverResponse"></div>
  

</body>
</html>

这个HTML网页提交表单用的方法是POST,请求的服务器URL地址是Servlet的URI加上参数值,这个URI是由WEB模块配置文件设置。


服务器端的代码:

package helloajax;

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 HelloAjaxJava1 extends HttpServlet {

	/**
	 * The doGet method of the servlet. <br>
	 *
	 * This method is called when a form has its tag value method equals to get.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
		out.println("<HTML>");
		out.println("  <HEAD><TITLE>A Servlet</TITLE></HEAD>");
		out.println("  <BODY>");
		out.print("    This is ");
		out.print(this.getClass());
		out.println(", using the GET method");
		out.println("  </BODY>");
		out.println("</HTML>");
		out.flush();
		out.close();
	}

	/**
	 * The doPost method of the servlet. <br>
	 *
	 * This method is called when a form has its tag value method equals to post.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		String userName = request.getParameter("userName");
		String responseText = "UserName"+userName;
		out.println(responseText);
		out.close();
	}

}

web模块配置:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <display-name></display-name>
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>HelloAjaxJava1</servlet-name>
    <servlet-class>helloajax.HelloAjaxJava1</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>HelloAjaxJava1</servlet-name>
    <url-pattern>/HelloAjaxJava1</url-pattern>
  </servlet-mapping>	
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

从上面的代码可以看到,它定义了访问Servlet的URI是HelloAJAXJava1,这就是客户端请求的URI。

上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 01:54:23
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/2867/
本文WWW.DOC100.NET DOC100.NET版权所有。