Ajax局部刷新（使用JS操作）
对于在不使用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 函数就会被执行。
| 状态 | 描叙 |
| 0 | 请求未初始化（在调用 open() 之前） |
| 1 | 请求已提出（调用 send() 之前） |
| 2 | 请求已发送（这里通常可以从响应得到内容头部） |
| 3 | 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应） |
| 4 | 请求已完成（可以访问服务器响应并使用它） |
(3)responseText 属性
可以通过 responseText 属性来取回由服务器返回的数据。
Ajax局部刷新（使用JS操作）的更多相关文章
- ajax局部刷新
//5秒刷新一次 $(function () { setInterval(Refresh, 5000); }); //ajax局部刷新 function Refresh() { $.ajax({ ty ...
- php Ajax 局部刷新
php Ajax 局部刷新: HTML部分 </head> <body> <h1>Ajax动态显示时间</h1> <input type=&quo ...
- Ajax 局部刷新 异步提交
AJAX简介 局部刷新,异步提交. AJAX 不是新的编程语言,而是一种使用现有标准的新方法.它最大的有点就是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容. 浏览器朝后端发送请 ...
- thickbox关闭子页后ajax局部刷新父页
1. 首先注意需要调用thickbox的js <script type="text/javascript" src="<%=path%>/js/jque ...
- 实现AJAX局部刷新以及PageMethod方法的使用
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- 用户登录ajax局部刷新验证码
用户登录的时候,登录页面附带验证码图片,用户需要输入正确的验证码才可以登录,验证码实现局部刷新操作. 效果如图: 代码如下: #生成验证码及图片的函数 newcode.py import rando ...
- 应用js函数柯里化currying 与ajax 局部刷新dom
直接上代码吧 最近读javascript核心概念及实践的代码 感觉很有用 备忘. <div id="request"></div> <script t ...
- Ecshop ajax 局部刷新购物车功能
1.比如我们category.dwt 里有 <a href='flow.php'><SPAN id='cart_count_all'>{insert name='cart_in ...
- 前端不缓存，ajax不缓存，js操作cookie
今天实现网站注销功能时,需要清除cookie缓存,开始在网上搜索的是“js清除缓存”,发现很多都是预先防患缓存存储的内容,千篇一律,不过也学习到了:后来换成"js清除cookie" ...
随机推荐
- Latex--入门系列一
Latex 专业的参考 tex对于论文写作或者其他的一些需要排版的写作来说,还是非常有意义的.我在网上看到这个对于Latex的入门介绍还是比较全面的,Arbitrary reference .所以将会 ...
- CentOS7 设置电源选项，待机、睡眠、挂起
设置装有 CentOS7 的笔记本合盖后黑屏进入睡眠模式 systemd 能够处理某些电源相关的 ACPI事件,你可以通过从 /etc/systemd/logind.conf 以下选项进行配置: Ha ...
- 原生JS实现图片循环切换
<!-- <!DOCTYPE html> <html> <head> <title>原生JS实现图片循环切换 —— 方法一</title&g ...
- css定位选择兄弟元素，nth-of-type
<span class="input-group-btn" the-id="num-change"> <button class=" ...
- django之创建子应用
一:子应用 Django的视图编写是放在子应用中的.类似于flask中的视图. 二:创建子应用 例如:在刚才的dj_study项目中,创建一个名字为user的子应用(目录):注意是第一级的dj_stu ...
- Java第二阶段之常用类
包装类缓存-128到127之间的数字(系统初始的时候就创建了,当我们调用ValueOf时,首先检查是否在范围内,在则直接取用)integer in1 ＝ integer.valueOf(-128):i ...
- Java面向对象(一) 类和对象
一.软件开发进化史 摘自<从零开始学架构> 机器语言(1940年) 最早的软件开发使用的是“机器语言”,直接使用二进制码0和1来表示机器可以识别的指令和数据. 汇编语言(20世纪40年代) ...
- datatables屏蔽警告弹窗
//不显示任何错误信息 $.fn.dataTable.ext.errMode = 'none'; //以下为发生错误时的事件处理,如不处理,可不管. $('#tableId').on( 'error. ...
- darknet-yolov3使用opencv3.4.8时，undefined reference 'imshow()'、'waitKey()'、'nameWindows()'
解决办法:暴力卸载 卸载办法:进入到opencv3.4.8的安装目录下:make uninstall 然后重新安装了其他版本的,立马编译通过了.
- ConversionService HttpMessageConverter
ConversionService是属于spring core部分 所有spring管理的bean等等 都使用它进行类型转换,而它又需要注册一些converter 来完成类型转换. 这个可以看我博客 ...