下面介绍JSP前台表单内容通过Ajax异步提交到后台Servlet进行校验（校验方式多种，包括提取数据库信息，校验用户名是否重复等），异步在JSP表单页面显示校验结果信息的基本过程。

一、说明：

1.由于本文只限于介绍JSP+Servlet+Ajax运用的基本流程，重点不在于后台数据库的访问和校验内容，因此省略Servlet对数据库的访问。

二、基本流程：

1. JSP页面login.jsp提供一个表单“form”，表单中有两个“text”类型的输入框，其中我们将用第一个输入框来做实验。

在第一个输入框中（输入用户名），通过onblur=validate();，当用户光标离开输入框时，触发JS函数validate() ，函数validate()在Ajax.js文件中声明。

  1. <%@page contentType="text/html" pageEncoding="UTF-8"%>
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  3. "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <script type="javascript" src="Ajax.js"></script>
  8. </head>
  9. <body>
  10. <h1>Test Ajax</h1><p>
  11. <form action="" method="get" name="form">
  12. <br>
  13. 输入用户名：
  14. <input type="text" size="10" maxlength="8" id="userName" name="name" onblur="validate()">
  15. <span id="info"></span>
  16. <br>
  17. 输入商品名：
  18. <input type="text" size="10" maxlength="8" >
  19. </form>
  20. </body>
  21. </html>

2、Ajax.js文件声明了一系列函数，用于完成向表单与servlet的中接处理。

2.1、函数validate()要点：

2.1.1、通过document.getElementById(String id)获取表单中有特定id值的输入框的值，即获取用户输入的用户名。

2.1.2、声明一个变量url，存放要访问的servlet:"validate.do?id=" + escape(idField.value)，问号？后面表示在url后添加一个值，这个值在validate.do这个servlet中可以通过request.getParameter("id")来获取。

  1. var url = "validate.do?id=" + escape(idField.value);

2.1.3、 通过if()语句以兼容IE，Firefox等多个浏览器版本的方式创建一个XMLHttpRequest对象。

  1. if(window.XMLHttpRequest) {
  2. //IE7, Firefox, Opera支持
  3. req = new XMLHttpRequest();
  4. }else if(window.ActiveXObject) {
  5. //IE5,IE6支持
  6. req = new ActiveXObject("Microsoft.XMLHTTP");
  7. }

2.1.4、调用XMLHttpRequest对象函数open()准备向servlet发送请求（此时只是“准备发送”，并没有发送）

  1. req.open("GET", url, true);

2.1.5、 调用XMLHttpRequest对象函数send(param)向servlet发送请求。param参数的值null（关于send()方法使用请另外查阅）

  1. req.send(null);

2.1.6、调用一个触发事件onreadystatechange，每当 readyState 改变时，onreadystatechange 函数就会被执行。readyState有5个可能值：0：请求未初始化（在调用open()之前）；1：请求已经提出（调用send()之前）；2：请求已经发送（这里通常可以从响应得到内容头部）；3：请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）；4：请求已经完成（可以访问服务器响应并使用它）

  1. req.onreadystatechange = callback;

2.2、function callback()要点：

2.2.1    XMLHttpRequest.status = 200表示服务器已经成功响应。

通过XMLHttpRequest.responseText获取servlet端的getPrintWriter().write()输出的响应。得到的值是 一个String类型数据。

  1. var check = req.responseText;

2.3、通过show()函数输出结果到标签标记的位置。

完整的Ajax.js文件：

  1. var req;
  2. function validate() {
  3. //获取表单提交的内容
  4. var idField = document.getElementById("userName");
  5. //访问validate.do这个servlet，同时把获取的表单内容idField加入url字符串，以便传递给validate.do
  6. var url = "validate.do?id=" + escape(idField.value);
  7. //创建一个XMLHttpRequest对象req
  8. if(window.XMLHttpRequest) {
  9. //IE7, Firefox, Opera支持
  10. req = new XMLHttpRequest();
  11. }else if(window.ActiveXObject) {
  12. //IE5,IE6支持
  13. req = new ActiveXObject("Microsoft.XMLHTTP");
  14. }
  15. /*
  16. open(String method,String url, boolean )函数有3个参数
  17. method参数指定向servlet发送请求所使用的方法，有GET,POST等
  18. boolean值指定是否异步，true为使用，false为不使用。
  19. 我们使用异步才能体会到Ajax强大的异步功能。
  20. */
  21. req.open("GET", url, true);
  22. //onreadystatechange属性存有处理服务器响应的函数,有5个取值分别代表不同状态
  23. req.onreadystatechange = callback;
  24. //send函数发送请求
  25. req.send(null);
  26. }
  27. function callback() {
  28. if(req.readyState == 4 && req.status == 200) {
  29. var check = req.responseText;
  30. show (check);
  31. }
  32. }
  33. function show(str) {
  34. if(str == "OK") {
  35. var show = "<font color='green'>恭喜！！用户名可用！</font>";
  36. document.getElementById("info").innerHTML = show;
  37. }
  38. else if( str == "NO") {
  39. var show = "<font color='red'>对不起，用户名不可用！！请重新输入！</font>";
  40. document.getElementById("info").innerHTML = show;
  41. }
  42. }

三、servlet处理：

重点1：通过以下几行代码设置浏览器不进行Ajax处理页面的缓存（如果出现缓存，将导致一些不可预知的麻烦）

  1. response.setContentType("text/html");
  2. response.setHeader("Cache-Control", "no-store");
  3. response.setHeader("Pragma", "no-cache");
  4. response.setDateHeader("Expires", 0);

重点2：通过request.getParameter()来获取Ajax传递的参数。

  1. String name = request.getParameter("id");

重点3：通过response.getWriter().write()向Ajax输出参数，在Ajax一端通过var check = XMLHttpRequest.responseText获取参数值。

  1. if(name.equals("1")) {
  2. out.write("OK");
  3. }
  4. else {
  5. out.write("NO");
  6. }

完整的servlet代码：

  1. package com.model;
  2. import java.io.IOException;
  3. import java.io.PrintWriter;
  4. import javax.servlet.ServletException;
  5. import javax.servlet.http.HttpServlet;
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;
  8. public class DoAjaxServlet extends HttpServlet {
  9. protected void processRequest(HttpServletRequest request, HttpServletResponse response)
  10. throws ServletException, IOException {
  11. response.setContentType("text/html;charset=UTF-8");
  12. PrintWriter out = response.getWriter();
  13. try {
  14. response.setContentType("text/html");
  15. response.setHeader("Cache-Control", "no-store");
  16. response.setHeader("Pragma", "no-cache");
  17. response.setDateHeader("Expires", 0);
  18. String name = request.getParameter("id");
  19. if(name.equals("1")) {
  20. out.write("OK");
  21. }
  22. else {
  23. out.write("NO");
  24. }
  25. } finally {
  26. out.close();
  27. }
  28. }
  29. @Override
  30. protected void doGet(HttpServletRequest request, HttpServletResponse response)
  31. throws ServletException, IOException {
  32. processRequest(request, response);
  33. }
  34. @Override
  35. protected void doPost(HttpServletRequest request, HttpServletResponse response)
  36. throws ServletException, IOException {
  37. processRequest(request, response);
  38. }
  39. @Override
  40. public String getServletInfo() {
  41. return "Short description";
  42. }
  43. }

最后，记得在web.xml配置文件中配置这个servlet:

  1. <servlet>
  2. <servlet-name>DoAjaxServlet</servlet-name>
  3. <servlet-class>com.model.DoAjaxServlet</servlet-class>
  4. </servlet>
  5. <servlet-mapping>
  6. <servlet-name>DoAjaxServlet</servlet-name>
  7. <url-pattern>/validate.do</url-pattern>
  8. </servlet-mapping>

jsp ajax实例讲解的更多相关文章

  1. Ajax学习总结（1）——Ajax实例讲解与技术原理

    摘要:AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.AJAX 是一种用 ...

  2. 详解AJAX工作原理以及实例讲解（通俗易懂）

    什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...

  3. jsp+ajax实现无刷新

    jsp+ajax实现无刷新,鼠标离开文本框即验证用户名 jsp+ajax实现无刷新,鼠标离开文本框即验证用户名(本功能多用于注册) input.jsp(表单提交页面): %@ page content ...

  4. 实例讲解基于 React+Redux 的前端开发流程

    原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 s ...

  5. 这是一份很详细的 Retrofit 2.0 使用教程（含实例讲解）（转）

    前言 在Andrroid开发中,网络请求十分常用 而在Android网络请求库中,Retrofit是当下最热的一个网络请求库 今天,我将献上一份非常详细Retrofit v2.0的使用教程,希望你们会 ...

  6. 这是一份很详细的 Retrofit 2.0 使用教程（含实例讲解）

    前言 在Andrroid开发中,网络请求十分常用 而在Android网络请求库中,Retrofit是当下最热的一个网络请求库 今天,我将献上一份非常详细Retrofit v2.0的使用教程,希望你们会 ...

  7. jQuery Ajax 实例 ($.ajax、$.post、$.get)

    jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...

  8. float实例讲解

    float实例讲解 float是个强大的属性,在实际前端开发过程中,人们经常拿它来进行布局,但有时,使用的不好,也麻烦多多啊. 比如,现在我们要实现一个两列布局,左边的列,宽度固定:右边的列,宽度自动 ...

  9. S3C2440上RTC时钟驱动开发实例讲解(转载)

    嵌入式Linux之我行,主要讲述和总结了本人在学习嵌入式linux中的每个步骤.一为总结经验,二希望能给想入门嵌入式Linux的朋友提供方便.如有错误之处,谢请指正. 共享资源,欢迎转载:http:/ ...

随机推荐

  1. https 多路复用的理解~转载

    https://segmentfault.com/q/1010000005167289 这里面的http/2连接是指tcp/ip层的连接还是http应用层(也就是我们平常在chrome F12 net ...

  2. nodejs 优雅的连接 mysql

    1.mysql 及 promise-mysql nodejs 连接 mysql 有成熟的npm包 mysql ,如果需要promise,建议使用 promise-mysql: npm:https:// ...

  3. 【codeforces85D】

    去实验培训回来了……写个题先玩玩 这题给人一种平衡树的感觉 但是呢,实际上操作离线+离散化+线段树一样能做 #include<bits/stdc++.h> #define lson (o& ...

  4. 2015多校第6场 HDU 5355 Cake 贪心，暴力DFS

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5355 题意:给你n个尺寸大小分别为1,2,3,…,n的蛋糕,要求你分成m份,要求每份中所有蛋糕的大小之 ...

  5. 步骤一：下载jdk并安装和配置java环境变量

    1.下载JDk地址: http://download.eclipse.org/oomph/jre/?vm=1_1_7_0_64_0 2.进入下载页面(下载的是jdk7),点击:Oracle JDK1. ...

  6. GT-----FAQ整理

    1.pss0,pss1,这里的序号0和1是什么意思?      说明选的目标调试 App 有至少 2 个进程,先启动的那个进程的 pss 值会被加后缀 0,后启动那个会被加后 缀 1.所有参数前面的“ ...

  7. 前端javascript实现二进制读写操作

    由于种种原因,在浏览器中无法像nodejs那样操作二进制. 最近写了一个在浏览器端操作读写二进制的帮助类 !function (entrance) { "use strict"; ...

  8. Ubuntu 16.04 LTS安装Docker并使用加速器

    参考优酷:http://v.youku.com/v_show/id_XMTkxOTYwODcxNg==.html?spm=a2h0k.8191407.0.0&from=s1.8-1-1.2 首 ...

  9. ARM芯片stm32中的AHB和APB

    AHB,是Advanced High performance Bus的缩写,译作高级高性能总线,这是一种“系统总线”.AHB主要用于高性能模块(如CPU.DMA和DSP等)之间的连接.AHB 系统由主 ...

  10. [hdu-3007]Buried memory 最小覆盖圆

    大致题意: 平面上有n个点,求一个最小的圆覆盖住所有点 最小覆盖圆裸题 学习了一波最小覆盖圆算法 #include<cstdio> #include<iostream> #in ...