首先说明一下几个名词的意思,我自己理解的
jquery 网上说是JavaScript库或框架。
ajax 一种可以进行异步通信的技术。
本实例用到了jquery库
具体实现步骤如下:
1.下载jquery库 我下载的是jquery-1.3.2.js,我试过了支持jsp,好像jquery.js不支持jsp,我也没测试成功,哪位大哥在jquery.js下面测试成功了,告我啊
2.把它放在一个web工程webroot目录下面的一个文件夹里面(如 js文件夹里面)
3.编写服务器端的程序:
AjaxServlet.java
public class AjaxServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String username = request.getParameter("name");
System.out.println(username);
if(username==null){
out.println("请输入用户名");
}
else if(username.equals("admin")){
ut.println("用户名已经被注册了");
}
else{
out.println("用户名"+username+"可以进行注册");
}
}
protected void doPost(HttpServletRequest request,HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
public void destroy() {
super.destroy();
}
public void init() throws ServletException {
super.init();
}
}
配置web-xml文件
代码如下
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>AjaxServlet</servlet-name>
<servlet-class>com.servlet.AjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxServlet</servlet-name>
<url-pattern>/AjaxServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
写前台代码:
ajax.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="js/verify.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
</head>
<body>
用户名校验Ajax实例,请输入要注册的用户名和密码:<br/>
<!-- ajax方式不需要使用表单来进行提交数据,因此不用写表单标签 -->
<!-- ajax方式不需要name属性,需要一个id的属性 -->
username:<input type="text" id="username"/><br/>
password:<input type="password" id="password"/><br/>
<input type="button" value="检测用户是否存在" onclick="verify()"/>
<!-- 这个div用于存放服务器返回的结果,开始为空 -->
<div id="result"></div>
</body>
</html>
上面得html文件里面导入了js文件,一个是jquery-1.3.2.js,一个事verify.js文件,刚才在js文件下面存放了jquery-1.3.2.js文件,需要在js文件夹下面新建一个verify.js文件
verify.js文件代码如下:
//定义用户校验的方法
function verify(){
//alert("ajax实例");
//1.获取文本框中的内容
//document.getElementById("username");dom的方式
//jquery 查找节点方式,参数中#加在id属性值可以得到一个节点
//jquery 的方法返回的都是jquery的对象,可以继续在上面执行其他的jquery方法
var jqueryObj1 = $("#username");
//获取节点的值
var username = jqueryObj1.val();
//2.将文本框中的数据发送给服务器的servlet
//使用jquery的xmlHttpRequest对象的get请求的封装 这几种方法都行
//$.get(url,date,回调函数)
$.get("AjaxServlet?name="+username,null,callback);
//$.get("AjaxServlet",username,callback);
//$.get("AjaxServlet","name="+username,callback);
}
//回调函数
function callback(data){
//alert("服务器端的数据回来了!!");
//3.接受服务器端返回的数据
//4.将服务器端返回的数据动态的显示在网页上
//找到保存结果信息的节点
var resultObj = $("#result");
//动态的改变页面节点div中的内容
resultObj.html(data);
}
到此 所有的工作都做完了,测试下就知道了
分享到:
相关推荐
在IT行业中,Ajax(Asynchronous JavaScript and XML)与JSP(JavaServer Pages)结合使用时,可以实现网页的异步数据交互,提升用户体验。在这个"Ajax+jsp注册验证用户"的示例中,我们将深入探讨如何利用这两种技术...
在这个JSP文件中,我们获取了请求参数`username`,然后使用一个假设的`UserDAO`类检查用户名在数据库中是否已经存在。最后,我们以JSON格式返回结果。 请注意,上述代码仅用于示例,实际项目中你需要连接到真实的...
这个“使用Ajax写的一个用户登录的例子JSP版.rar”压缩包提供了一个基于JSP(JavaServer Pages)实现的Ajax用户登录示例。以下是关于这个示例的详细解释和相关知识点: 1. **Ajax基础**:Ajax的核心是JavaScript库...
在IT行业中,Ajax(Asynchronous JavaScript and XML)技术被广泛应用于构建交互性强、用户体验良好的Web应用程序。Ajax允许我们在不刷新整个网页的情况下,从服务器获取数据并局部更新页面内容,极大地提高了网页的...
【Ajax用户登录示例(JSP)】 ...以上就是基于Ajax的JSP用户登录示例中的主要知识点,通过这个示例,我们可以了解到如何在客户端和服务器端之间进行异步通信,以及如何在JSP中处理用户输入并验证登录信息。
在这个名为"jsp最简单的Ajax应用 java异步验证用户"的示例中,我们将探讨如何使用Ajax来验证用户信息,比如用户名的可用性,而无需刷新整个页面。 1. **Ajax工作原理**:Ajax的核心是JavaScript对象XMLHttpRequest...
在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种技术,它允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。本项目"AJAX+servlet+jsp用户注册"是为初学者设计的一个典型示例,旨在教授...
这个示例可能包含一个简单的注册功能,用户在表单中输入信息,使用AJAX提交,服务器端验证数据并返回反馈信息,而无需刷新整个页面。这提高了用户体验,因为页面的其他部分可以保持不变,只更新与注册相关的部分。 ...
这个项目的源代码包含了使用JSP、Servlet和Ajax开发新闻发布系统的实际示例,对于初学者来说,这是一个很好的学习资源,可以深入了解这些技术如何协同工作,以及如何构建动态、交互式的Web应用。通过分析和实践,你...
在本文中,我们将深入探讨如何在JSP(JavaServer Pages)中使用AJAX(Asynchronous JavaScript and XML)技术。这是一个非常实用的技巧,允许我们实现页面的无刷新更新,提高用户体验。我们的示例是一个简单的纯JSP...
在本示例中,我们使用AJAX来验证用户名是否存在,这涉及到JSP(JavaServer Pages)、Servlet以及相关的web配置。 **JSP基础** JSP是Java的一种动态网页技术,它允许开发者在HTML代码中嵌入Java代码,以实现服务器...
在JSP中使用AJAX可以实现以下几点优势: 1. **提升用户体验**:无需刷新页面即可完成数据提交或查询。 2. **减少服务器负担**:仅需传输必要的数据,而非整个页面。 3. **增强应用程序的实时性**:比如即时聊天系统...
在本教程中,我们将深入探讨如何使用JSP(JavaServer Pages)、Servlet和Ajax技术来开发一个功能完善的新闻发布系统。这通常涉及到动态网页的创建、服务器端处理以及客户端的异步数据交互,从而提供流畅的用户体验。...
【标题】"jsp-Ajax_Login_songxv7_jsp_" 指的是一份使用JSP和Ajax技术实现无刷新登录的示例项目。在这个项目中,开发人员 "songxv7" 展示了如何在JSP页面上集成Ajax,以提供更流畅的用户体验,避免在用户进行登录...
本程序通过结合Java Server Pages (JSP) 和Asynchronous JavaScript and XML (Ajax) 技术,实现了用户在不刷新整个页面的情况下完成登录操作,减少了页面跳转带来的等待时间,使网页更加动态和响应迅速。 **JSP...
综上所述,这个示例涵盖了Struts2和jQuery在Web应用中的基本集成,展示了如何使用Ajax进行实时数据验证,提高用户体验。通过下载并研究提供的`testAjax`项目,您可以深入了解每个组件的实现细节,并将其应用于自己的...
总的来说,这个例子展示了如何利用 AJAX 和 JavaScript 在客户端进行实时的用户名验证,减少了用户的等待时间,提升了交互体验。这种方法在现代 Web 应用中非常常见,特别是在需要即时反馈的场景下,例如表单验证、...
在这个“ajax+struts2.0+jsp下拉列表级联”的示例中,我们将探讨如何利用这三个技术实现这种功能。 首先,AJAX(Asynchronous JavaScript and XML)是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页...
在这个"Ajax实现用户名验证"的例子中,我们将深入探讨如何使用Ajax、jsp(JavaServer Pages)以及相关的前端技术来验证用户输入的用户名是否已存在,从而防止重复注册。 首先,我们需要创建一个简单的HTML表单,...