对于在不使用Ajax的情况下，使用JS来进行局部刷新，主要有如下的几步：

　　　　1. 得到XMLHttpRequest

　　　　2. 使用open方法打开连接

　　　　3. 设置请求头信息

　　　　4. 注册onreadystatechange事件，并判断是否请求响应成功（使用readyState和status）

　　　　5. 在请求和响应成功之后，取得服务器响应的数据，使用responseText

　　对于直接使用js来自己编写，这样工作复杂，步骤多，我们可以将其进行封装好。同时还有一种更好的方式，就是使用jquery中的ajax方法。

代码：

　　javascript：

  1. 	<script type="text/javascript">
  2. 		// 取得XMLHttpRequest对象，这个需要进行浏览器的判断
  3. 		function getXMLHttp() {
  4. 			try {
  5. 				// 绝大多数的浏览器
  6. 				return new XMLHttpRequest();
  7. 			} catch (e) {
  8. 				// ie游览器的判定
  9. 				// 判断ie6.0
  10. 				try {
  11. 					return new ActvieXObject("Msxml2.XMLHTTP");
  12. 				} catch (e) {
  13. 					// 判断ie5.5及其更早的ie游览器
  14. 					try {
  15. 						return new ActvieXObject("Microsoft.XMLHTTP");
  16. 					} catch (e) {
  17. 						alert("无法取得XMLHttpRequest");
  18. 						// 抛出异常信息
  19. 						throw (e);
  20. 					}
  21. 				}
  22. 			}
  23. 		}
  24.  
  25. 		// 进行ajax操作,此操作必须在页面加载完成之后，进行操作
  26. 		window.onload = function() {
  27. 			// 第一步：取得username文本框和font标签的元素对象
  28. 			var userEle = document.getElementById("username");
  29. 			var fontEle = document.getElementById("msg");
  30. 			// 第二部：注册username文本框失去焦点事件
  31. 			userEle.onblur = function() {
  32. 				// 第三部：得到ajax的请求对象
  33. 				var xmlHttp = getXMLHttp();
  34. 				// 第四部：打开连接，第一个参数表示使用post方式提交；第二个参数表示提交的地址，第三个参数表示打开连接
  35. 				xmlHttp.open("POST", "<c:url value='/AjaxServlet'/>?method=ifRegister", true);
  36. 				// 第五步：设置请求头信息
  37. 				xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  38. 				// 第六步：发送请求
  39. 				xmlHttp.send("username=" + userEle.value);
  40. 				// 第七步：判断是否请求和响应成功
  41. 				// 并给xmlHttp的onreadystatechange事件注册监听
  42. 				xmlHttp.onreadystatechange = function() {
  43. 					if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
  44. 						// 表示响应成功
  45. 						// 在此处接收ajax的响应内容
  46. 						var text = xmlHttp.responseText;
  47. 						if(text=='n') {
  48. 							// 将提示信息，写到页面font标签内
  49. 							fontEle.innerHTML = "*此用户名已存在...";
  50. 						}
  51. 					}
  52. 				};
  53. 			};
  54. 		};
  55.  
  56. 	</script>

　　jsp：

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  4. <html>
  5.   <head>
  6.     <title>Ajax操作示例</title>
  7. 	<meta http-equiv="pragma" content="no-cache">
  8. 	<meta http-equiv="cache-control" content="no-cache">
  9. 	<meta http-equiv="expires" content="0">
  10. 	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  11. 	<meta http-equiv="description" content="This is my page">
  12.  
  13. 	<script type="text/javascript">
  14. 		// 取得XMLHttpRequest对象，这个需要进行浏览器的判断
  15. 		function getXMLHttp() {
  16. 			try {
  17. 				// 绝大多数的浏览器
  18. 				return new XMLHttpRequest();
  19. 			} catch (e) {
  20. 				// ie游览器的判定
  21. 				// 判断ie6.0
  22. 				try {
  23. 					return new ActvieXObject("Msxml2.XMLHTTP");
  24. 				} catch (e) {
  25. 					// 判断ie5.5及其更早的ie游览器
  26. 					try {
  27. 						return new ActvieXObject("Microsoft.XMLHTTP");
  28. 					} catch (e) {
  29. 						alert("无法取得XMLHttpRequest");
  30. 						// 抛出异常信息
  31. 						throw (e);
  32. 					}
  33. 				}
  34. 			}
  35. 		}
  36.  
  37. 		// 进行ajax操作,此操作必须在页面加载完成之后，进行操作
  38. 		window.onload = function() {
  39. 			// 第一步：取得username文本框和font标签的元素对象
  40. 			var userEle = document.getElementById("username");
  41. 			var fontEle = document.getElementById("msg");
  42. 			// 第二部：注册username文本框失去焦点事件
  43. 			userEle.onblur = function() {
  44. 				// 第三部：得到ajax的请求对象
  45. 				var xmlHttp = getXMLHttp();
  46. 				// 第四部：打开连接，第一个参数表示使用post方式提交；第二个参数表示提交的地址，第三个参数表示打开连接
  47. 				xmlHttp.open("POST", "<c:url value='/AjaxServlet'/>?method=ifRegister", true);
  48. 				// 第五步：设置请求头信息
  49. 				xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  50. 				// 第六步：发送请求
  51. 				xmlHttp.send("username=" + userEle.value);
  52. 				// 第七步：判断是否请求和响应成功
  53. 				// 并给xmlHttp的onreadystatechange事件注册监听
  54. 				xmlHttp.onreadystatechange = function() {
  55. 					if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
  56. 						// 表示响应成功
  57. 						// 在此处接收ajax的响应内容
  58. 						var text = xmlHttp.responseText;
  59. 						if(text=='n') {
  60. 							// 将提示信息，写到页面font标签内
  61. 							fontEle.innerHTML = "*此用户名已存在...";
  62. 						}
  63. 					}
  64. 				};
  65. 			};
  66. 		};
  67.  
  68. 	</script>
  69.  
  70.   </head>
  71.  
  72.   <body>
  73.     <div align="center">
  74.     	<h1>注 册</h1>
  75.     	<form action="" method="post">
  76.     		<table>
  77.     			<tr>
  78.     				<td>Username : </td>
  79.     				<td>
  80.     					<input type="text" id="username" name="username" value=""/>
  81.     				</td>
  82.     				<td>
  83.     					<font size='2px' color='red' id='msg'></font>
  84.     				</td>
  85.     			</tr>
  86.     			<tr>
  87.     				<td>Password : </td>
  88.     				<td><input type="password" name="password" value=""/></td>
  89.     				<td>${msg }</td>
  90.     			</tr>
  91.     			<tr>
  92.     				<td colspan="2" align="center">
  93.     					<input style="width: 100px; height: 35px;
  94.     						border-radius:5px; background-color:blue; opacity:0.7"
  95.     						type="submit" value="Register"/>
  96.     				</td>
  97.     			</tr>
  98.     		</table>
  99.     	</form>
  100.     </div>
  101.   </body>
  102. </html>

　　dao和servlet层：

  1. package cn.geore.ajax;
  2.  
  3. import java.io.IOException;
  4. import java.sql.SQLException;
  5.  
  6. import javax.servlet.ServletException;
  7. import javax.servlet.http.HttpServletRequest;
  8. import javax.servlet.http.HttpServletResponse;
  9.  
  10. import priv.geore.toolutils.web.FirmHttpServlet;
  11.  
  12. public class AjaxServlet extends FirmHttpServlet {
  13. 	private AjaxDao dao = new AjaxDao();
  14. 	/**
  15. 	 * ajax异步请求，判断用户名是否已经被注册
  16. 	 *
  17. 	 * @param request
  18. 	 * @param response
  19. 	 * @throws ServletException
  20. 	 * @throws IOException
  21. 	 */
  22. 	public void ifRegister(HttpServletRequest request, HttpServletResponse response)
  23. 			throws ServletException, IOException {
  24. 		String username = request.getParameter("username");
  25. 		try {
  26. 			Hero hero = dao.findByName(username);
  27. 			System.out.println(hero);
  28. 			if(hero!=null) {
  29. 				response.getWriter().print("n");
  30. 			}
  31. 		} catch (SQLException e) {
  32. 			throw new RuntimeException(e);
  33. 		}
  34. 	}
  35. }
  36.  
  37. package cn.geore.ajax;
  38.  
  39. import java.sql.SQLException;
  40.  
  41. import org.apache.commons.dbutils.QueryRunner;
  42. import org.apache.commons.dbutils.handlers.BeanHandler;
  43.  
  44. import priv.geore.toolutils.jdbc.FirmQueRunner;
  45.  
  46. public class AjaxDao {
  47. 	private QueryRunner runner = new FirmQueRunner();
  48.  
  49. 	public Hero findByName(String string) throws SQLException {
  50. 		String sql = "SELECT * FROM hero WHERE heroname=?";
  51. 		return runner.query(sql, new BeanHandler<Hero>(Hero.class), string);
  52. 	}
  53. }

　　

　　photo：

　　

　　

注意：　

　　(1)onreadystatechange 属性

　　　　onreadystatechange 属性存有处理服务器响应的函数。

　　(2)readyState 属性

　　　　readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。

readyState 属性
状态 描叙
0 请求未初始化（在调用 open() 之前）
1 请求已提出（调用 send() 之前）
2 请求已发送（这里通常可以从响应得到内容头部）
3 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4 请求已完成（可以访问服务器响应并使用它）

　　(3)responseText 属性

　　　　可以通过 responseText 属性来取回由服务器返回的数据。

Ajax局部刷新（使用JS操作）的更多相关文章

  1. ajax局部刷新

    //5秒刷新一次 $(function () { setInterval(Refresh, 5000); }); //ajax局部刷新 function Refresh() { $.ajax({ ty ...

  2. php Ajax 局部刷新

    php Ajax 局部刷新: HTML部分 </head> <body> <h1>Ajax动态显示时间</h1> <input type=&quo ...

  3. Ajax 局部刷新 异步提交

    AJAX简介 局部刷新,异步提交. AJAX 不是新的编程语言,而是一种使用现有标准的新方法.它最大的有点就是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容. 浏览器朝后端发送请 ...

  4. thickbox关闭子页后ajax局部刷新父页

    1. 首先注意需要调用thickbox的js <script type="text/javascript" src="<%=path%>/js/jque ...

  5. 实现AJAX局部刷新以及PageMethod方法的使用

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  6. 用户登录ajax局部刷新验证码

    用户登录的时候,登录页面附带验证码图片,用户需要输入正确的验证码才可以登录,验证码实现局部刷新操作. 效果如图: 代码如下: #生成验证码及图片的函数  newcode.py import rando ...

  7. 应用js函数柯里化currying 与ajax 局部刷新dom

    直接上代码吧 最近读javascript核心概念及实践的代码 感觉很有用 备忘. <div id="request"></div> <script t ...

  8. Ecshop ajax 局部刷新购物车功能

    1.比如我们category.dwt 里有 <a href='flow.php'><SPAN id='cart_count_all'>{insert name='cart_in ...

  9. 前端不缓存，ajax不缓存，js操作cookie

    今天实现网站注销功能时,需要清除cookie缓存,开始在网上搜索的是“js清除缓存”,发现很多都是预先防患缓存存储的内容,千篇一律,不过也学习到了:后来换成"js清除cookie" ...

随机推荐

  1. A dreamstart的催促 （快速幂） B TRDD got lost again

    A   dreamstart的催促 链接:https://ac.nowcoder.com/acm/contest/322/A来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ ...

  2. TypeScript从入门到Vue项目迁移

    1. 前言 ES6的普及,大大简化了JavaScript的表达方式 大型项目中,js没有类型检查.表达方式灵活,多人协作代码调试和维护成本高 2. 定义 TypeScript 是 JavaScript ...

  3. Failed to determine the https port for redirect

    原文:Failed to determine the https port for redirect warn: Microsoft.AspNetCore.HttpsPolicy.HttpsRedir ...

  4. runtime 理解笔记

    runtime 简称运行时,是系统运行的一种机制,在oc中通过c语言编写一个运行系统库.考进行一些非常底层的操作(oc无法完成的). 1.利用runtime,在程序运行过程中,动态创建一个类(比如KV ...

  5. linux中的一些常用命令

    shutdown -h now 现在马上关机 shutdown -r now 现在重新启动 reboot 现在重新启动 su - 如果当前是普通用户,则输入这条命令切换到管理员用户(root),如果要 ...

  6. MySQL第五天——日志

    日志 log_error(错误日志) 用于记录 MySQL 运行过程中的错误信息,如,无法加载 MySQL数据库的数据文件,或权限不正确等都会被记录在此. 默认情况下,错误日志是开启的,且无法禁止. ...

  7. TensorFlow学习笔记2：逻辑回归实现手写字符识别

    代码比较简单,没啥好说的,就做个记录而已.大致就是现建立graph,再通过session运行即可.需要注意的就是Variable要先初始化再使用. import tensorflow as tf fr ...

  8. Linux架构之NFS共享存储1

    第35章 NFS共享存储 35.1 NFS基本概述 NFS是Network File System的缩写及网络文件系统.NFS主要功能是通过局域网络让不同的主机系统之间可以共享文件或目录. 常见的文件 ...

  9. onupdate

    数据的初始化显示刚开始写在onupdate中,文档类中的数据更新之后,希望通过调用UpdateAllViews(FALSE)来实现视图的更新,可以实现!后来觉得不妥,想把初始化显示写在ondraw中, ...

  10. 对Promise的研究3

    Promise.race() Promise.race方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例. const p = Promise.race([p1, p2, p ...