ajax应用的基本流程
1、从web表单中获取需要的数据
2 、建立到服务器的url
3 、打开到服务器的连接
4、 设置服务器在完成后要运行的函数
5 、发送请求
ajax.html
<html>
<head>
<script src="selectcustomer.js"></script>
</head>
<form name="form">
select a customer
<select name="customers" onchange="showCustomer(document.form.customers.options[document.form.customers.selectedIndex].text)">
<option value="1">000100</option>
<option value="2">000101</option>
<option value="3">000102</option>
</select>
</form>
<p>
<div id="txtHint"><b>Customer info will be listed here.</b></div>
</p>
</html>
selectcustomer.js
var xmlHttp;
function showCustomer(str)
{
xmlHttp=GetXmlHttpObject();
if(xmlHttp==null)
{
alert("Browser does not support HTTP Request");
return ;
}
var url="ajax.jsp";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if(xmlHttp.readyState==4||xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null;
if(window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return objXMLHttp;
}
ajax.jsp
<%@page contentType="text/html; charset=gb2312" import="java.sql.*"%>
<html>
<body>
<%
String sql=(String)request.getParameter("q");
//out.println(q);
String str="select * from customers where customerid='"+sql+"'";
//String str1="select * from customers";
Class.forName("org.gjt.mm.mysql.Driver").newInstance();
Connection con=java.sql.DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","");
Statement stmt=con.createStatement();
ResultSet rst=stmt.executeQuery(str);
%>
<table>
<%
while(rst.next())
{
%>
<tr>
<td><%=rst.getString("customerid")%></td>
<td><%=rst.getString("customername")%></td>
<td><%=rst.getString("companyname")%></td>
<td><%=rst.getString("contactname")%></td>
<td><%=rst.getString("address")%></td>
<td><%=rst.getString("postalcode")%></td>
</tr>
<% }
//关闭连接、释放资源
rst.close();
stmt.close();
con.close();
%>
</table>
</body>
</html>
分享到：
相关推荐
通过分析和学习这个源码，你可以了解到Ajax和JSP如何协同工作来创建一个实时的用户交互应用，以及如何使用Access数据库进行数据存储。这对于初学者了解Web开发中的前端与后端交互，以及数据库操作有着很好的实践价值...
本项目中，"JavaDB+JSP+AJAX实现的级联下拉菜单"是一个经典的应用场景，用于提升用户界面的用户体验，特别是在数据关联和筛选时。 **JavaDB** 是一个轻量级的关系型数据库管理系统，它基于开源的Derby数据库。Java...
"ajax,jsp,servlet无刷新实现级联效果"是一个常见的应用场景，主要涉及的技术包括Ajax（异步JavaScript和XML）、Java Servlet以及JSP（JavaServer Pages）。在这个场景中，我们将探讨如何通过这些技术实现在网页上...
《基于JSP、Servlet、Ajax和MySQL的花卉管理系统详解》 在信息技术领域，Web应用程序的开发是不可或缺的一部分，尤其对于初学者和大学生来说，实践一个简单的管理信息系统是学习的重要环节。"JSP+servlet+ajax+...
7. `Ajax` 和 `jQuery` 相关的JS文件：这些脚本用于实现页面的异步更新，提高用户体验。 8. `bootstrap` 文件夹：包含Bootstrap框架的CSS和JS文件，用于快速构建响应式和移动设备优先的网页设计。 综上所述，这个...
在这个投票系统中，JSP作为服务器端脚本语言处理数据，而AJAX则用于在不刷新整个页面的情况下更新部分内容，提供更流畅的用户体验。 **1. JSP（JavaServer Pages）** JSP是Java平台上的动态网页技术，它允许开发者...
- **AJAX**：在本项目中，AJAX主要负责在后台与服务器进行异步通信，用户输入消息后，AJAX会将数据发送到服务器，服务器处理后再将响应返回，所有这些过程都在后台进行，用户界面保持不变，提供流畅的交互体验。...
在本"JSP+Ajax网络相册系统"中，JSP主要负责显示数据，这可能涉及到使用`<jsp:include>`或`<jsp:forward>`标签来引入其他页面内容，或者使用EL（Expression Language）和JSTL（JavaServer Pages Standard Tag ...
Ajax的核心在于其异步特性，它允许后台与服务器进行数据交换，而不会打断用户的操作。在用户名验证场景中，当用户在输入框中键入内容时，Ajax可以即时发送请求到服务器检查该用户名是否已存在，如果服务器返回用户名...
对于前端，可以引入Bootstrap或其他前端框架提升用户体验，或者采用Ajax实现异步加载，提高页面响应速度。 总之，这个MySQL+jsp网上购物系统源码提供了学习和实践的机会，涵盖了数据库设计、JSP编程、Web应用架构等...
5. **AJAX通信**：使用XMLHttpRequest对象或现代浏览器的fetch API进行异步请求，避免页面刷新，提高用户体验。 6. **样式美化**：可能还需要使用CSS来调整菜单的样式，使其符合设计要求和用户习惯。 总的来说，...
-AJAX异步更新 -运用json-lib.jar包将数据转化为JSON格式 -标签库JSTL -JavaWeb三层框架的分离 ## 准备 1.导入第三方包，c3p0配置文件和db.proerties数据库配置文件 2、建包 -dao,dao.impl -service,...
此外，考虑到用户体验，前端可能采用Ajax异步技术，实现无刷新更新，提高交互性。 总的来说，"JSP+SQL网上订餐"系统涉及的知识点包括：JSP编程、SQL数据库设计与操作、前端交互设计、MVC架构、会话管理、数据安全...
【标题】"基于jsp+servlet+ajax的图书管理系统"是一个典型的Web应用开发案例，它结合了三种核心技术，用于实现一个高效、动态的图书管理平台。jsp（JavaServer Pages）是Java技术的一种，用于生成动态网页内容；...
在本案例中，我们可以使用jQuery的Ajax方法向服务器发送异步请求，获取分页数据，而无需刷新整个页面，提升用户体验。 5. **Excel导出** 要将数据导出为Excel，可以使用Apache POI库，这是一个强大的API，用于读写...
2. **Web应用程序开发**：系统设计包括前端用户界面和后端服务器逻辑，这需要掌握HTML、CSS、JavaScript（可能使用AJAX进行异步通信）以及Servlet和JSP之间的交互。 3. **数据库设计**：使用SQL（可能的MySQL或...
2. AJAX：前端与后端的通信通常采用AJAX，实现无刷新页面更新，提升用户体验。 3. JUnit & MyBatis-Test：进行单元测试，确保每个模块功能的正确性，降低系统缺陷。 四、系统部署与维护 1. 部署：系统部署通常在...
1. **实时更新**：当用户发表评论或点赞时，无需刷新整个页面，而是通过Ajax调用后台接口，获取最新的评论列表或点赞数，然后动态更新到页面上。 2. **分页加载**：浏览文章列表时，Ajax可以实现无限滚动或者点击...
在学习这个在线考试系统的源码时，你可以深入了解Java Web开发流程，理解MVC（Model-View-Controller）架构模式，熟悉Servlet和JSP的协同工作，掌握MySQL数据库的操作，以及如何通过Ajax实现前后端异步通信。...