jsp页面部分代码:
<form name="myForm" method="get">
<input type="text" name="input1" />
<input type="button" value="Click" onclick="ajaxFunctio();" />
<input type="text" name="output1" />
</form>
ajaxFunction所在的js代码,其中就有ajax的内容:
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("您的浏览器不支持AJAX!");
return false;
}
}
}
url="output.action?salt"+new Date();
xmlHttp.open("get",url,false);
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{ if(xmlHttp.status==200){
document.myForm.output1.value=xmlHttp.responseText.toString();
}
}
}
xmlHttp.send();
}
action中的get方法:
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("here is the get function");
PrintWriter out = response.getWriter();
response.setContentType("text/html");
String input1=request.getParameter("input1");
System.out.println(input1);
if("mage".equalsIgnoreCase(input1)){
System.out.println("you have entered mage"); //不要怪我,我也是v大迷。
out.print("vurtne");
out.flush();
out.close();}else{
System.out.println("you have not entered mage");
out.print("drakedog"); //也不要怪我,我觉得dd打的也不错。
out.flush();
out.close();
}
}
web.xml配置内容:
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>OutputAction</servlet-name>
<servlet-class>com.test.action.OutputAction</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>OutputAction</servlet-name>
<url-pattern>*.action</url-pattern>
</servlet-mapping>
分享到:
相关推荐
通过以上步骤,我们可以利用JS、JSP和Servlet来实现页面的局部刷新。这种方法不仅能够提高用户的操作效率,还能有效减少网络流量消耗。在实际应用中,还需要考虑错误处理、安全性等问题,以确保系统的稳定性和可靠性...
它使网页可以在不刷新整个页面的情况下,与服务器交换数据并局部更新页面内容。在登录验证时,AJAX可以异步发送请求,获取服务器的验证结果,然后在页面上显示反馈,提升用户体验。 JDBC则是Java访问数据库的标准...
在网页开发中,为了提供更好的用户体验,我们常常需要实现页面的局部刷新,而Ajax(Asynchronous JavaScript and XML)和Servlet的结合使用正是实现这一功能的关键技术。本篇将详细讲解如何利用Ajax与Servlet来实现...
本项目“ajax+servlet登陆”着重探讨如何利用这两种技术实现一个无需刷新整个页面即可完成用户登录验证的功能,提高用户体验。 首先,我们需要理解Ajax的核心概念。Ajax并非一种单一的技术,而是一种使用JavaScript...
5. **客户端接收**:前端JavaScript的Ajax回调函数接收到服务器的响应,解析JSON数据,然后更新DOM(Document Object Model),使得页面局部刷新。 博客链接(https://lzj0470.iteye.com/blog/368021)可能会提供一...
NULL 博文链接:https://congpeixue.iteye.com/blog/254799
通过使用Ajax,我们可以实现页面的局部刷新,提高用户交互体验。在这个场景下,Ajax将用于发送异步请求,检查登录名的可用性。 **Servlet**是Java Web开发中用于接收和响应HTTP请求的Java类。在Spring中,Servlet...
9. **局部刷新**:使用Ajax,我们可以只更新网页中需要改变的部分,而不是整个页面。这可以通过DOM操作(Document Object Model)实现,如使用JavaScript的innerHTML属性替换HTML元素的内容。 10. **跨域问题**:...
它通过在后台与服务器交换少量数据并局部更新页面,从而实现了页面的异步更新。在这个项目中,AJAX 负责监听第一个下拉框的选择变化,然后向服务器发送请求获取新的数据。 2. **Servlet**:Servlet是Java中用于处理...
4. Ajax应用:在JSP页面中嵌入JavaScript代码,通过Ajax发送异步请求,实现页面的局部更新。例如,用户在搜索框输入关键词,无需刷新页面即可实时显示搜索结果。 5. IDEA集成:使用IDEA创建项目,配置Tomcat服务器...
【Ajax】:Ajax的核心是JavaScript,它允许在不刷新整个页面的情况下,与服务器交换数据并局部更新页面。在购物车场景中,当用户选择商品数量或执行其他操作时,Ajax可以异步发送请求到Servlet,Servlet处理后将响应...
2. **工作原理**:AJAX通过XMLHttpRequest对象向服务器发送请求,服务器处理请求并返回数据,然后JavaScript解析数据并更新DOM,实现局部刷新。 二、Servlet基础 1. **什么是Servlet**:Servlet是Java编写的服务端...
本篇文章将探讨如何在不依赖Ajax的情况下,依然能够实现在网页上的局部刷新和异步数据递交。 首先,我们可以利用HTML5引入的`<form>`元素的新特性,如`formaction`和`formmethod`属性,来实现异步提交。这些属性...
Ajax允许页面在不刷新整个页面的情况下与服务器交换数据并局部更新页面,提供更流畅的用户体验。例如,用户在咨询页面提交问题后,后台可以通过Ajax异步处理,无需等待页面刷新,即可实时显示反馈结果。 总的来说,...
通过以上步骤,我们可以在Java Servlet和JSP页面中有效地实现AJAX请求,实现页面的无刷新更新,提升用户的交互体验。在实际开发中,还可以结合现代前端框架如Vue.js、React.js等,进一步优化AJAX请求的处理和页面...
【Ajax+Servlet实现无刷新下拉联动效果】是一种常见的网页交互技术,主要用于提高用户体验,减少不必要的页面刷新。在本文中,我们将深入探讨如何利用Ajax和Servlet来实现这种功能。 首先,下拉联动的基本原理是在...
它利用JavaScript实现局部刷新,提高了用户体验,减少了网络通信的延迟。在这个案例中,Ajax被用于用户登录,当用户输入用户名和密码后,数据不是通过传统的表单提交而是通过Ajax异步发送到服务器,服务器验证后返回...
此外,为了提高用户体验,可以使用AJAX技术实现页面局部刷新,使得数据操作更加流畅。 在"testDemo"文件中,可能包含了项目的源代码、配置文件、数据库脚本等,通过这些文件,我们可以具体了解每个组件是如何实现的...
在项目中,jQuery可能用于优化用户界面,如添加Ajax功能,实现页面无刷新更新,提升用户体验。 5. **Ajax**:Asynchronous JavaScript and XML(异步JavaScript和XML)允许在不刷新整个页面的情况下,从服务器获取...