码迷,mamicode.com
首页 > 编程语言 > 详细

AJAX+javascript+java servlet实例

时间:2014-12-04 10:17:08      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   os   sp   java   for   

工程名称: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,效果展示
在输入框下方能够及时的显示出在输入框中输入的信息

bubuko.com,布布扣

AJAX+javascript+java servlet实例

标签:style   blog   http   io   ar   os   sp   java   for   

原文地址:http://blog.csdn.net/gwcgwcjava/article/details/41720203

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!