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

　　　　1. 得到XMLHttpRequest

　　　　2. 使用open方法打开连接

　　　　3. 设置请求头信息

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

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

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

代码：

　　javascript：

	<script type="text/javascript">

		// 取得XMLHttpRequest对象，这个需要进行浏览器的判断

		function getXMLHttp() {

			try {

				// 绝大多数的浏览器

				return new XMLHttpRequest();

			} catch (e) {

				// ie游览器的判定

				// 判断ie6.0

				try {

					return new ActvieXObject("Msxml2.XMLHTTP");

				} catch (e) {

					// 判断ie5.5及其更早的ie游览器

					try {

						return new ActvieXObject("Microsoft.XMLHTTP");

					} catch (e) {

						alert("无法取得XMLHttpRequest");

						// 抛出异常信息

						throw (e);

					}

				}

			}

		}

		// 进行ajax操作,此操作必须在页面加载完成之后，进行操作

		window.onload = function() {

			// 第一步：取得username文本框和font标签的元素对象

			var userEle = document.getElementById("username");

			var fontEle = document.getElementById("msg");

			// 第二部：注册username文本框失去焦点事件

			userEle.onblur = function() {

				// 第三部：得到ajax的请求对象

				var xmlHttp = getXMLHttp();

				// 第四部：打开连接，第一个参数表示使用post方式提交；第二个参数表示提交的地址，第三个参数表示打开连接

				xmlHttp.open("POST", "<c:url value='/AjaxServlet'/>?method=ifRegister", true);

				// 第五步：设置请求头信息

				xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

				// 第六步：发送请求

				xmlHttp.send("username=" + userEle.value);

				// 第七步：判断是否请求和响应成功

				// 并给xmlHttp的onreadystatechange事件注册监听

				xmlHttp.onreadystatechange = function() {

					if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {

						// 表示响应成功

						// 在此处接收ajax的响应内容

						var text = xmlHttp.responseText;

						if(text=='n') {

							// 将提示信息，写到页面font标签内

							fontEle.innerHTML = "*此用户名已存在...";

						}

					}

				};

			};

		};

	</script>

　　jsp：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>Ajax操作示例</title>

	<meta http-equiv="pragma" content="no-cache">

	<meta http-equiv="cache-control" content="no-cache">

	<meta http-equiv="expires" content="0">

	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

	<meta http-equiv="description" content="This is my page">

	<script type="text/javascript">

		// 取得XMLHttpRequest对象，这个需要进行浏览器的判断

		function getXMLHttp() {

			try {

				// 绝大多数的浏览器

				return new XMLHttpRequest();

			} catch (e) {

				// ie游览器的判定

				// 判断ie6.0

				try {

					return new ActvieXObject("Msxml2.XMLHTTP");

				} catch (e) {

					// 判断ie5.5及其更早的ie游览器

					try {

						return new ActvieXObject("Microsoft.XMLHTTP");

					} catch (e) {

						alert("无法取得XMLHttpRequest");

						// 抛出异常信息

						throw (e);

					}

				}

			}

		}

		// 进行ajax操作,此操作必须在页面加载完成之后，进行操作

		window.onload = function() {

			// 第一步：取得username文本框和font标签的元素对象

			var userEle = document.getElementById("username");

			var fontEle = document.getElementById("msg");

			// 第二部：注册username文本框失去焦点事件

			userEle.onblur = function() {

				// 第三部：得到ajax的请求对象

				var xmlHttp = getXMLHttp();

				// 第四部：打开连接，第一个参数表示使用post方式提交；第二个参数表示提交的地址，第三个参数表示打开连接

				xmlHttp.open("POST", "<c:url value='/AjaxServlet'/>?method=ifRegister", true);

				// 第五步：设置请求头信息

				xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

				// 第六步：发送请求

				xmlHttp.send("username=" + userEle.value);

				// 第七步：判断是否请求和响应成功

				// 并给xmlHttp的onreadystatechange事件注册监听

				xmlHttp.onreadystatechange = function() {

					if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {

						// 表示响应成功

						// 在此处接收ajax的响应内容

						var text = xmlHttp.responseText;

						if(text=='n') {

							// 将提示信息，写到页面font标签内

							fontEle.innerHTML = "*此用户名已存在...";

						}

					}

				};

			};

		};

	</script>

  </head>

  <body>

    <div align="center">

    	<h1>注 册</h1>

    	<form action="" method="post">

    		<table>

    			<tr>

    				<td>Username : </td>

    				<td>

    					<input type="text" id="username" name="username" value=""/>

    				</td>

    				<td>

    					<font size='2px' color='red' id='msg'></font>

    				</td>

    			</tr>

    			<tr>

    				<td>Password : </td>

    				<td><input type="password" name="password" value=""/></td>

    				<td>${msg }</td>

    			</tr>

    			<tr>

    				<td colspan="2" align="center">

    					<input style="width: 100px; height: 35px;

    						border-radius:5px; background-color:blue; opacity:0.7"

    						type="submit" value="Register"/>

    				</td>

    			</tr>

    		</table>

    	</form>

    </div>

  </body>

</html>

　　dao和servlet层：

package cn.geore.ajax;

import java.io.IOException;

import java.sql.SQLException;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import priv.geore.toolutils.web.FirmHttpServlet;

public class AjaxServlet extends FirmHttpServlet {

	private AjaxDao dao = new AjaxDao();

	/**

	 * ajax异步请求，判断用户名是否已经被注册

	 *

	 * @param request

	 * @param response

	 * @throws ServletException

	 * @throws IOException

	 */

	public void ifRegister(HttpServletRequest request, HttpServletResponse response)

			throws ServletException, IOException {

		String username = request.getParameter("username");

		try {

			Hero hero = dao.findByName(username);

			System.out.println(hero);

			if(hero!=null) {

				response.getWriter().print("n");

			}

		} catch (SQLException e) {

			throw new RuntimeException(e);

		}

	}

}

package cn.geore.ajax;

import java.sql.SQLException;

import org.apache.commons.dbutils.QueryRunner;

import org.apache.commons.dbutils.handlers.BeanHandler;

import priv.geore.toolutils.jdbc.FirmQueRunner;

public class AjaxDao {

	private QueryRunner runner = new FirmQueRunner();

	public Hero findByName(String string) throws SQLException {

		String sql = "SELECT * FROM hero WHERE heroname=?";

		return runner.query(sql, new BeanHandler<Hero>(Hero.class), string);

	}

}

　　

　　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. LED音乐频谱之点阵

    转载请注明出处:http://blog.csdn.net/ruoyunliufeng/article/details/37967455 一.硬件 watermark/2/text/aHR0cDovL2 ...

  2. Spring boot集成Swagger，并配置多个扫描路径

    Spring boot集成Swagger,并配置多个扫描路径 1:认识Swagger Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目 ...

  3. 【学习总结】SQL学习总结

    参考链接: 菜鸟教程: 一.认识sql 二.sql语法 三.sql高级教程 四.sql函数 一.认识SQL SQL是什么? SQL 是用于访问和处理数据库的标准的计算机语言. SQL,指结构化查询语言 ...

  4. JQ的简单使用（基础）——————JQ

    JQ基础--JQ的简单使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /&g ...

  5. 微信小程序点击保存图片到相册

    wxml部分的代码   <view class="footer-r" bindtap="save"> <image src="../ ...

  6. MiniUI学习笔记1-新手必读

    1.mini的全局方法 2.Ajax jQuery 拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 详细jQuery Ajax教程,可参考这里. 3. ...

  7. VS2012 改C# 模版

    原始文件位置: C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\ItemTemplatesCache\CSharp\Co ...

  8. openGL如何在改变窗口大小时，使自己的图形不被拉伸

    这里要注意两个概念:视口和视景体,当视口的纵横比和视景体的纵横比相同的时候,改变窗口大小,图像才不会变形: 视景体是指成像景物所在空间的集合.它是一个空间集合体. 单个的视景体,比如一个球体,若要完全 ...

  9. AQS简介以及源码分析

    参考链接:https://www.jianshu.com/p/da9d051dcc3d 参考链接:https://www.cnblogs.com/waterystone/p/4920797.html

  10. 01.helloworld--标签

    """参考网站:http://python.cocos2d.org/doc/programming_guide/index.html""" ...