html頁面：
- <%@ page language="java" pageEncoding="utf-8"%>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <script type="text/javascript" src="js/register.js"></script>
- </head>
- <body>
- <form>
- 用戶名
- <input type="text" name="username" id="username" />
- <input type="button" value="提交" id="btn1"/>
- <div id="myDiv"></div>
- </form>
- </body>
- </html>
我們利用js給提交按鈕綁定事件。js代碼：
- var xmlhttp;
- window.onload = function()
- {
- var btn1 = document.getElementById("btn1");
- btn1.οnclick= loadXMLDoc;
- }
- function loadXMLDoc()
- {
- if (window.XMLHttpRequest)
- {// code for IE7+, Firefox, Chrome, Opera, Safari
- xmlhttp = new XMLHttpRequest();
- }
- else
- {// code for IE6, IE5
- xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
- }
- //綁定回調函數
- xmlhttp.onreadystatechange = function()
- {
- if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
- {
- document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
- }
- }
- //取得輸入的值
- var name = document.getElementById("username").value;
- //第一個參數表示post請求，第二個參數表示提交給AjaxServlet，第三個參數爲true，表示異步請求
- xmlhttp.open("POST", "AjaxServlet", true);
- xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
- xmlhttp.send("name="+name);
- }
響應的servlet：
- package com.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 AjaxServlet extends HttpServlet {
- public void doGet(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- doPost(request,response);
- }
- public void doPost(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- response.setContentType("text/html");
- response.setCharacterEncoding("utf-8");
- PrintWriter out = response.getWriter();
- String name = request.getParameter("name");
- System.out.println(name);
- if(name.equals("shizhan"))
- {
- out.write("用戶名已經存在，請更換");
- }
- else
- {
- out.write("用戶名可以使用");
- }
- out.flush();
- out.close();
- }
- }
結果頁面：
輸入sss，點擊提交
輸入shizhan，點擊提交
來源：http://blog.csdn.net/linshizhan/article/details/7915939