AJAX入门级应用-数据加载时提示信息

最新推荐文章于 2023-08-27 12:25:14 发布

最新推荐文章于 2023-08-27 12:25:14 发布 · 105 阅读

文章标签：

#Ajax #应用服务器 #Servlet #JavaScript #Cache #ViewUI

本文介绍了一个使用JSP技术和AJAX实现的简单页面交互示例。该示例展示了如何通过JavaScript发送异步请求到服务器端的Servlet，并根据响应更新页面内容。具体包括前端页面结构、mesgload.js脚本文件中的AJAX调用及服务器端LoadServlet的实现。

------------------------------------------------jsp页面-------------------------------------------------------------
<%@ page language="java" pageEncoding="gb2312"%>
<html>
<head>
<title>TEST页面</title>
<script language="JavaScript" src="mesgload.js"></script>
</head>
<body>
<br>
<div align="center">
<table width="70%" border="1">
<tr>
<td>
<div id='hade' style="display: none"></div>
<div id='code' style="display: none"></div>
</td>
</tr>
<tr>
<td align="center">
<input type="button" value="提交" onClick="Display()"> 
</td>
</tr>
</table>
</div>
</body>
</html>

------------------------------------------------mesgload.js----------------------------------------------------------------
var req;
var url="frame";
function Display(){
if(window.XMLHttpRequest){
req = new XMLHttpRequest(); //创建XMLHttpRequest对象
}
else if(window.ActiveXObject){
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if(req){
req.open("POST",url,true); //建立请求
req.onreadystatechange = callback; //指定回调函数
req.send(null);
}
}
function callback(){
if(req.readyState == 3){
sendMessage();
}
if(req.readyState == 4){
if(req.status == 200){
alert("数据正在传送中，请点击<确定>按钮");
alert("数据发送完毕!");
sendcompMessage();

}
}
}
function sendMessage(){
var content = document.getElementById('code');
var content1= document.getElementById('hade');
content.style.display = "";
content1.style.display ="none";
content.innerHTML = "页面LOADING....";
}
function sendcompMessage(){
var content = document.getElementById('hade');
var content1 = document.getElementById('code');
content1.style.display="none";
content.style.display="";
content.innerHTML = "页面SUCCESS!";
}

---------------------------------------------------------LoadServlet -----------------------------------------------------------
public class LoadServlet extends HttpServlet {
public LoadServlet() {
super();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html"); //设置字符编码和头部信息
response.setHeader("Cache-Control", "no-cache");
System.out.println("服务器已经收到消息!");
response.getWriter().write(""); //返回空字符串

}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
}
-------------------------------------------------------web.xml-----------------------------------------------------------------
<servlet>
<servlet-name>frame</servlet-name>
<servlet-class>messageload.LoadServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>frame</servlet-name>
<url-pattern>/frame</url-pattern>
</servlet-mapping>