html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax_demo</title>
<script src="js/ajax.js"></script>
<script>
function click1(){
var userName = document.getElementById("userName");
var url = "AjaxDemo";
var params = "userName="+userName.value;
loadXMLDoc(url,params,show);
}
/*用于回调*/
function show(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("show").innerHTML = xmlhttp.responseText;
}
}
</script>
</head>
<body>
<form action="#">
<h2>获取姓名:</h2>
<input id="userName" type="text" />
<br>
<div id="show" style="border-bottom-color: red;" ></div>
<br>
<button type="button" onclick="click1()">请点击</button>
</form>
</body>
</html>
在WebContent下建立一个js的文件夹,然后在建立一个ajax.js
ajax.js部分
/**
*
*/
var xmlhttp = null;
function createXHR(){
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
} else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function loadXMLDoc(url,params,handler) {
//var queryString = "AjaxDemo?userName="+userName;
/*
* 创建XMLHttpRequest对象
* */
createXHR();
/*
* 当该对象状态发生变化,则调用该函数
* */
xmlhttp.onreadystatechange = handler;
/*xmlhttp.open("POST", queryString, true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();*/
/*
* 建立到服务器的连接
* */
xmlhttp.open("POST", url+"?"+params, true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
/*
* 发送请求
* */
xmlhttp.send();
}
Servlet部分
package com.liqiang.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 AjaxDemo extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String encoding = "UTF-8";// 字符编码
request.setCharacterEncoding(encoding);// 请求编码
response.setContentType("text/html;charset=" + encoding);// 响应编码
PrintWriter out = response.getWriter();
String userName = request.getParameter("userName");
System.out.println(userName+"hhh");
String responseText = "UserName:" + userName;
out.println(responseText);
out.close();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>ajax_demo</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<servlet>
<!-- servlet的内部名称,自定义。尽量有意义 -->
<servlet-name>AjaxDemo</servlet-name>
<!-- servlet的类全名: 包名+简单类名 -->
<servlet-class>com.liqiang.servlet.AjaxDemo</servlet-class>
</servlet>
<!-- servlet的映射配置 -->
<servlet-mapping>
<!-- servlet的内部名称,一定要和上面的内部名称保持一致!! -->
<servlet-name>AjaxDemo</servlet-name>
<!-- servlet的映射路径(访问servlet的名称) -->
<url-pattern>/AjaxDemo</url-pattern>
</servlet-mapping>
</web-app>