一、准备
1、
tomcat解压文件 目录下找到 webapps目录建立TestAjax文件夹
2、按照
tomcat中建立可运行项目
建立个级文件夹
3、在RWQAjax文件夹内建立如下jsp文件
二、代码
ajaxTeset.jsp
<%@page language="java" contentType="text/html; charset=GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登录</title>
<script type="text/javascript">
var req;
function validate(){
var nameid = document.getElementById("userId");
var url="validate.jsp?id="+escape(nameid.value);
if(window.XMLHttpRequest){
req=new XMLHttpRequest();
}else if(window.ActiveXObject){
req=new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("GET",url,true);
req.onreadystatechange=callback;
req.send(null);
}
function callback(){
if(req.readyState==4){
if(req.status==200){
var msg = req.responseXML.getElementsByTagName("msg")[0];
setMsg(msg.childNodes[0].nodeValue);
}
}
}
function setMsg(msg){
mdiv = document.getElementById("usermsg");
if(msg=="invalid"){
mdiv.innerHTML="不存在"
}else{
mdiv.innerHTML="Valid"
}
}
</script>
</head>
<body>
<form action="" method="post">
<div
style="border-color: #0FF; width: 300px; height: 200px; margin: 0 auto; text-align: center; margin-top: 50px;">
<div
style="border-color: #0FF; width: 250px; height: 50px; margin: 0 auto; text-align: center; margin-top: 20px;">
<div>
<label>用户：</label><input type="text" name="user" id="userId" onblur="validate();"/>
</div>
<div id="usermsg">
</div>
<div style="margin-top: 10px; margin-bottom: 10px;">
密码：<input type="password" name="password" />
</div>
<div>
<input style="margin-right: 30px;" type="submit" value="登陆" />
</div>
</div>
<div></div>
</div>
</form>
</body>
</html>
validate.jsp
<%
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-store");
response.setHeader("Pragma","no-cache");
response.setDateHeader("Expires",0);
response.getWriter().write("<msg>invalid</msg>");
%>
三、运行效果
启动tomcat
运行效果如下
用户对应输入框任意输入数据，点输入框以外部分，会出现局部刷新的效果，显示一个提示信息
分享到：
相关推荐
AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX 初学者示例AJAX ...
功能基础，增，显，分页。适合初学者。 ajax+.net小例子 ajax+C#示例 ajax+.net 示例ajax+.net小例子 ajax+C#示例 ajax+.net 示例ajax+.net小例子 ajax+C#示例 ajax+.net 示例
标题“ajax+js的示例代码”表明我们将关注这两种技术的实际应用，而描述则提到了具体的应用场景，如可编辑的表格和弹出框。 AJAX是一种在无需刷新整个网页的情况下更新部分网页内容的技术。它通过后台与服务器进行...
3. "一种开发AJAX的方法，ajax.dll .docx"：这可能是另一种使用Ajax.dll的示例或教程，可能包含了一些开发技巧和最佳实践，帮助你深入理解Ajax.dll的工作原理和用法。 通过阅读并实践这些文档，你可以逐步掌握如何...
<!-- function ajaxByJyking(){ var xmlhttp_request = ""; try{ if( window.ActiveXObject ){ for( var i = 5;... xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );...
`index.asp`可能是一个ASP（Active Server Pages）页面，它可以在服务器端运行脚本，通常用来处理Ajax请求并返回数据。`test.html`则可能是包含Ajax请求代码的客户端页面。 在`test.html`中，一个简单的Ajax请求...
对于Ajax初学者，可以参考以下资源： 1. W3School的Ajax教程（https://www.w3school.com.cn/ajax/） 2. MDN Web文档的XMLHttpRequest（https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest） 3. 实战...
本示例以"AJAX之加法运算示例(asp.net)"为主题，旨在帮助初学者理解如何在ASP.NET环境中利用AJAX实现简单的加法运算，提升用户体验。 首先，我们需要了解ASP.NET是微软提供的一个强大的Web应用程序框架，它简化了...
2. **实例分析**：提供的源码实例可以帮助初学者理解AJAX在实际操作中的运用，通过分析和运行代码加深理解。 3. **动手实践**：尝试创建自己的简单项目，如模拟一个联系人管理应用，实现数据的增删改查，这将有助于...
上述示例展示了如何使用jQuery发起Ajax请求并处理服务器响应，对于初学者来说是一个很好的起点。随着技术的发展，虽然Ajax的原始形式可能逐渐被Fetch API等新技术所取代，但其核心理念——异步通信——仍然是现代Web...
**Ajax初学入门教程** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术使得用户可以与网页进行更流畅、更快捷的交互，提高了网页应用的用户体验...
对于初学者来说，理解Ajax的工作原理和基本用法是非常重要的。通过实践简单的Ajax示例，你可以掌握如何与服务器进行异步通信，从而提高你的Web开发技能。在提供的压缩包文件中，可能包含了一些基本的Ajax代码示例，...
**Ajax初学者快速入门** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术使得用户可以与网页进行更流畅的交互，提升了用户体验。Ajax的核心是...
这个示例对于初学者来说是一个很好的起点，它涵盖了SpringBoot的基本用法和Ajax的基本实践。通过阅读给出的博客文章和分析示例代码，你将能够更好地理解这两个技术如何协同工作，为你的Web应用带来更流畅的用户体验...
10. **源代码开源**：这个示例是开源的，这意味着开发者可以查看和学习其内部实现，这对于初学者或者想要深入理解文件上传技术的人来说是一份宝贵的资源。 通过以上知识点的解释，我们可以理解这个"ASP.NET Ajax 带...
本人自己动手做的一个ajax程序，仅供参考，希望对学习得朋友有所帮助，在程序里面每一行代码都做了详细的解释，应用中没有是用Struts框架，直接用servlet做的，本人会在后续版本中采用Struts+hibernate，为初学者...
这个例子可以帮助初学者理解AJAX在ASP.NET中的工作原理，并为更复杂的交互式Web应用程序奠定基础。 通过实践这样的示例，开发者能够掌握如何有效地使用AJAX提高网页的响应性和用户体验，同时减少不必要的服务器负载...
在"ajax经典demo－初学者的好东西"这个资源包中，很显然，它为初学者提供了一些经典的Ajax示例，帮助他们快速理解和掌握Ajax的核心概念和技术。下面，我们将详细讨论Ajax的关键组成部分和常见应用。 **一、Ajax的...
Ajax无刷新上传是一种在网页上实现文件上传而无需页面刷新的技术，它利用JavaScript、XMLHttpRequest对象（Ajax的核心组件）和...这个实例对初学者来说是很好的学习材料，可以帮助他们理解和实践Ajax无刷新上传技术。
本教程是为Ajax初学者准备的入门资料，将帮助你快速理解并掌握Ajax的基本概念和应用。 Ajax的核心组件包括JavaScript、XMLHttpRequest对象、DOM（Document Object Model）、CSS和JSON。首先，JavaScript是驱动Ajax...