AJAX+javascript+java servlet实例

工程名称：test

1,jsp页面:

get方法页面getM.jsp：访问地址：http://127.0.0.1:8080/test/getM.jsp

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

	<script type="text/javascript">
		function showInfo(){
			var xmlhttp;
			if(window.XMLHttpRequest){
				xmlhttp = new XMLHttpRequest();
			}else{
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			//回调函数
			xmlhttp.onreadystatechange=function(){
				//alert(xmlhttp.readyState);
				if(xmlhttp.readyState==4&&xmlhttp.status==200){
					var respText = xmlhttp.responseText;
					var jsonT = eval("("+respText+")");
					document.getElementById("info").innerHTML=jsonT.info;
				}
			}
			var name = document.getElementById("name").value;
			var url="../test/hello?t=" + Math.random()+"&name="+name;

			xmlhttp.open("GET",url, true);
			xmlhttp.send();
		}
	</script>
  </head>

  <body>

    	<input type="text" id ="name" name ="name" onkeyup="showInfo()">

    <div id="info"></div>
  </body>
</html>

post方法页面postM.jsp：访问地址：http://127.0.0.1:8080/test/postM.jsp

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<script type="text/javascript">
		function showInfo(){
			var xmlhttp;
			if(window.XMLHttpRequest){
				xmlhttp = new XMLHttpRequest();
			}else{
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=function(){
				//alert(xmlhttp.readyState);
				if(xmlhttp.readyState==4&&xmlhttp.status==200){
					var respText = xmlhttp.responseText;
					var jsonT = eval("("+respText+")");
					document.getElementById("info").innerHTML=jsonT.info;
				}
			}
			var name = document.getElementById("name").value;
			var url="../test/hello?t=" + Math.random();
			var sendStr = "name="+name;

			xmlhttp.open("POST",url, true);
			xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			xmlhttp.send(sendStr);
		}
	</script>
  </head>

  <body>

    	<input type="text" id ="name" name ="name" onkeyup="showInfo()">
    <div id="info"></div>
  </body>
</html>

2,web.xml

<?xml version="1.0" encoding="GBK"?>
<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">
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>

  <servlet>
  	<servlet-name>getInfo</servlet-name>
  	<servlet-class>com.gwc.servlet.DataInfo</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>getInfo</servlet-name>
  	<url-pattern>/hello</url-pattern>
  </servlet-mapping>

</web-app>

3,DataInfo.java

package com.gwc.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;

public class DataInfo extends HttpServlet  {
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		System.out.println("get");
		doPost(req, resp);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		PrintWriter out = resp.getWriter();
		System.out.println("执行到了");
		String name = req.getParameter("name");
		req.setCharacterEncoding("GBK");
		resp.setContentType("text/html;charset=gbk");
		String jsonStr = "{'info':'"+name+"'}";
		out.println(jsonStr);
	}
}

4,效果展示

在输入框下方能够及时的显示出在输入框中输入的信息

时间： 2024-10-02 01:59:10

AJAX+javascript+java servlet实例的相关文章

Java 面向对象编程、jQuery、JavaScript、servlet、javabean----理论知识

一.继承1.继承(优点:代码复用方便修改) 1.1 继承的关键字:extends 1.2 实现继承步骤(1.编写父类 2.编写子类继承父类) 1.3 调用父类方法的关键字:super 1.4 继承条件下构造方法和属性的调用 1.4.1 调用父类构造方法:super(); super(实参);必须写在构造方法第一行 1.4.2 调用父类的属性和方法:super.属性 super.方法名(); 1.4.3 父类中的资源使用了pri

spring mvc 和ajax异步交互完整实例(转自CSDN）附下载地址

spring mvc 和ajax异步交互完整实例 spring MVC 异步交互demo: demo下载地址:http://download.csdn.net/download/quincylk/9521375 1.jsp页面: [java] view plain copy print? <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-

7、jQuery的Ajax与Java交互带加载图片

1.jQuery的Ajax与Java交互带加载图片 1.1 html代码 <body> <div id="main"> <button id="myBut">Ajax获取数据</button> <div id="container"> <img src="./img/load.jpg" id="myimg"> </div>

5、jQuery的Ajax与Java通过GET方式交互

1.jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求 1.1 参数: url (String) : 发送请求的URL地址. data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示,会做为jQueryString附加到请求URL中. callback (Function) : (可选) 载入成功时回调函数(只有当Resp

dwr 框架，实现 ajax 的java 框架

1. 引入 dwr.jar 包 2. 配置web.xml 文件 ,拦截请求 <servlet> <servlet-name>dwr-invoker</servlet-name> <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> <init-param> <param-name>debug</param-name> &l

3、在Ajax于Java的交互过程中,加入加载图片

1.在Ajax于Java的交互过程中,加入加载图片 1.1 html代码 <body> <button id="mybtn">点击</button> <div id="myAjax"> <img src="./img/load2.jpg" id="myimg"> </div>  </body> 1.2

1、Ajax与Java通过GET方式交互

1.关于Ajax交互的步骤 1.1 获取到xmlhttprequest 1.2 设置xmlhttprequest的onreadystatechange响应事件 1.3 准备获取ajax请求 xmlhttp.open("GET", "AjaxServerlet?age=18&name=zhang", true); //Ajax方法的GET方式请求,参数是通过xmlhttp.open()携带的 1.4 发送ajax请求xmlhttp.send();

2、Ajax与Java通过POST方式交互

1.关于Ajax交互的步骤 1.1 获取到xmlhttprequest 1.2 设置xmlhttprequest的onreadystatechange响应事件 1.3 准备获取ajax请求 xmlhttp.open("POST", "AjaxServerlet", true); 1.4 设置消息头为表单形式,模仿表单的POSt提交xmlhttp.setRequestHeader("Content-type","applicati

6、jQuery的Ajax与Java通过POST方式交互

1. jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求 1.1 参数 url (String) : 发送请求的URL地址. data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示. callback (Function) : (可选) 载入成功时回调函数(只有当Response