1.首先一个简单的jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <html> <head> <title>ajax例子</title> <script type="text/javascript" src="js/check.js"></script> </head> <body> <a href="#" onclick="getStu()">所有学生信息</a> <div id="stuInfo"></div> </body> </html>
2.点击所有学生信息页面时，会调用check.js代码
var xmlHttpRequest;//定义为全局变量
function getStu() {
xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open("post", "servlet/InfoServlet", true);
xmlHttpRequest.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlHttpRequest.send("name=" + "123");
xmlHttpRequest.onreadystatechange = call;
}
function call() {
var stuInfo = document.getElementById("stuInfo");
if (xmlHttpRequest.readyState == 4) {
if (xmlHttpRequest.status == 200) {
var stuDom = xmlHttpRequest.responseXML;
var stuList = stuDom.getElementsByTagName("student");
var tableNode = document.createElement("table");// 创建table
tableNode.setAttribute("border", "1");
for ( var i = 0; i < stuList.length; i++) {
var student = stuList[i];
var tr = tableNode.insertRow(i);
for ( var j = 0; j < 3; j++) {
var td = tr.insertCell(j);
var str = student.childNodes[j];
var text = document.createTextNode(str.firstChild.nodeValue);
td.appendChild(text);
}
}
stuInfo.appendChild(tableNode);
}
}
}
3.这时会XMLHttpRequest对象会与servlet对象进行交互
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import xmlUtil.GetXmlBuffer;
public class InfoServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml;charset=utf-8");
PrintWriter out = response.getWriter();
String buffer = GetXmlBuffer.getXmlBuffer();
out.println(buffer);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
4.servlet会调用GetXmlBuffer对象
package xmlUtil;
import java.util.List;
import sql.QueryStu;
import bean.Student;
public class GetXmlBuffer {
public static String getXmlBuffer(){
List<Student>list = new QueryStu().getStu();
StringBuffer buffer = new StringBuffer("<students>");
for(int i=0;i<list.size();i++){
Student stu = list.get(i);
buffer.append("<student>");
buffer.append("<id>"+stu.getId()+"</id>");
buffer.append("<name>"+stu.getName()+"</name>");
buffer.append("<sex>"+stu.getSex()+"</sex>");
buffer.append("</student>");
}
buffer.append("</students>");
String str = new String(buffer);
return str;
}
}
5.这里先把Student JavaBean文件加上
package bean;
public class Student {
private int id;
private String name;
private String sex;
.......//get,set方法
}
6.与数据交互
package sql;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class JdbcUtils {
private static Connection con = null;
private static String url = "jdbc:mysql://localhost:3306/test";
private static String user = "root";
private static String password = "1990";
static {
try {
Class.forName("com.mysql.jdbc.Driver");
con = DriverManager.getConnection(url, user, password);
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
}
public static Connection getConnection() {
return con;
}
}
package sql;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import bean.Student;
public class QueryStu {
private static Connection conn = null;
static {
conn = JdbcUtils.getConnection();
}
public List<Student> getStu(){
List<Student> list = new ArrayList<Student>();
PreparedStatement ps = null;
String sql = "select * from student where id<11";
try {
ps = conn.prepareStatement(sql);
ResultSet rs = ps.executeQuery();
while(rs.next()){
Student stu = new Student();
stu.setId(rs.getInt(1));
stu.setName(rs.getString(2));
stu.setSex(rs.getString(3));
list.add(stu);
}
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
}
7.最后全局把握一下：
这个例子，xml处理时，没有使用dom4j,只是简单的用了字符串拼接的方法，然后在javascript中利用element把xml数据取出来，然后动态的添加到页面表格中
相关推荐
而"FalstAJAX"可能是示例中的一个错误拼写，可能是指一个名为"FalseAjax"或"FallstAjax"的文件，它可能包含了错误的AJAX实现或者一个用于演示错误处理的例子。 总的来说，这个例子展示了如何使用AJAX与JSP协同工作...
总之，这个Ajax JSP例子是学习Web开发中异步交互的一个实例，通过实际操作，你可以更好地掌握Ajax技术和JSP的结合应用，从而提升网页的动态性和用户体验。在实际工作中，Ajax已经被广泛应用于各种Web应用，如实时...
总结，这个小例子展示了如何在JSP中利用AJAX进行页面间的通信，实现了前端与后端的交互，而无需刷新整个页面。这仅仅是AJAX技术的一个基础应用，实际上，你可以用它来执行更复杂的任务，如异步数据加载、表单验证等...
文档"ajax_xml运用.doc"可能包含了一个使用Ajax获取并解析XML数据的例子。通常，这个过程包括以下几个步骤： 1. **创建XMLHttpRequest对象**：在JavaScript中，通过`new XMLHttpRequest()`来创建一个实例。 2. **...
下面我们将详细介绍如何在JSP中使用Ajax，并结合一个简单的示例进行解析。 首先，确保你的JSP页面中引入了Ajax库，例如jQuery。在头部添加以下HTML代码： ```html ...
这个Ajax搜索提示的小例子展示了如何结合Struts和JavaScript来实现动态的Web应用功能。通过理解和实践这个例子，你可以更好地掌握Ajax的核心概念和实际应用，同时对Struts框架也有更深入的理解。这只是一个基础的...
综上所述，这个"一个ajax+jsp上传文件的例子"展示了如何结合AJAX的异步特性、JSP的动态页面生成以及前端进度条展示，实现了一个完整的文件上传功能。实际开发中，还可以考虑引入前端框架和库来优化代码结构和提高...
Ajax（Asynchronous JavaScript ...这个源码包提供了一个实践平台，让你深入理解Ajax与JSP的结合，如何构建高性能、高交互性的Web应用。通过研究和学习每个文件，你可以提升你的Web开发技能，并将其应用到实际项目中。
"js json ajax jsp 跨域訪問的例子"这个主题涉及到JavaScript、JSON、AJAX以及JSP等关键技术，它们在处理跨域问题时各自扮演着重要角色。下面我们将详细探讨这些技术及其在跨域访问中的应用。 首先，JavaScript（JS...
这个“使用Ajax写的一个用户登录的例子JSP版.rar”压缩包提供了一个基于JSP（JavaServer Pages）实现的Ajax用户登录示例。以下是关于这个示例的详细解释和相关知识点： 1. **Ajax基础**：Ajax的核心是JavaScript库...
在服务器端，我们通常会有一个与AJAX请求对应的JSP或Servlet来处理请求。在本例中，"process.jsp"将接收请求并执行相应的业务逻辑。这可能包括验证输入、查询数据库或其他服务器端操作。处理完后，它会生成一个响应...
下面将详细介绍如何使用JSP和Ajax进行交互，并分享一个简单的示例。** **一、Ajax基本原理** Ajax的核心是JavaScript的XMLHttpRequest对象，它允许在后台与服务器交换数据并更新部分网页内容。在用户看来，页面是...
在网页开发中，AJAX...总之，"ajax实现jsp页面表格"是一个基础但实用的教程，涵盖了AJAX技术在网页动态更新中的应用，结合了JSP、JavaScript、数据库和JSON，为初学者提供了一个了解现代Web开发技术的实践平台。
在Web开发中，JSP（JavaServer Pages）和Ajax（Asynchronous JavaScript and XML）是两种常见的技术，它们结合使用可以创建动态、交互性强的网页应用。本项目“一个简单的jsp+ajax留言板”展示了如何利用这两者实现...
总结起来，这个例子展示了如何使用Ajax与JSP结合，实现在不刷新页面的情况下进行后台数据验证。Ajax提供了无刷新用户体验，而JSP处理了服务器端的业务逻辑和数据验证。这是一个基础但实用的Web开发技术组合，对于...
在IT行业中，Ajax（Asynchronous JavaScript and XML）与JSP（JavaServer Pages）结合使用时，可以实现网页的异步数据交互，提升用户体验。在这个"Ajax+jsp注册验证用户"的示例中，我们将深入探讨如何利用这两种技术...
下面，我们将通过一个具体的例子，即使用Ajax与JSP从MySQL数据库中提取数据并实现自动刷新的页面，来详细说明实现步骤： #### 步骤一：设置数据库 首先，我们需要一个MySQL数据库，其中包含一个名为`news`的表，该...
在这个例子中，`testAjax.jsp`会返回一个包含两个键值对的JSON对象。当jQuery AJAX请求成功时，客户端会接收到这个JSON数据并在`success`回调中进行处理。 总之，jQuery、AJAX和JSP的结合使得开发者能够创建出用户...
本文介绍了一个简单的JSP/Ajax示例，通过该示例展示了如何在JSP页面中集成Ajax功能来实现异步数据交换，以及如何在服务器端处理这些请求。此技术不仅能够提升用户体验，还能够在不重载整个页面的情况下实现数据的...
【上传文件的AJAX小例子】是一个通过HTML5新特性实现的文件上传示例，它结合了AJAX技术，提供了一种无需刷新页面即可完成文件上传的交互方式。在这个例子中，IBM展示了一种创新的文件上传解决方案，尤其是利用了...