Heim >Java >javaLernprogramm >So implementieren Sie eine teilweise Aktualisierung in JSP
So implementieren Sie eine teilweise Aktualisierung in JSP
- (*-*)浩Original
- 2019-05-15 09:42:036401Durchsuche
JSP-Methode zum Implementieren einer teilweisen Aktualisierung: Erstellen Sie zunächst eine JSP-Datei, die Ajax-Anfragen verarbeitet. Legen Sie dann das Format und den Zeichensatz der Ausgabeinformationen fest. Verwenden Sie schließlich JSP und Ajax, um eine teilweise Aktualisierung der Seite zu implementieren.
Mit AJAX kann JavaScript über das XMLHttpRequest-Objekt von JavaScript direkt mit dem Server kommunizieren. Über dieses Objekt kann JavaScript Daten mit dem Webserver austauschen, ohne die Seite neu zu laden.
Empfohlener Kurs: Java-Tutorial.
AJAX verwendet asynchrone Datenübertragung (HTTP-Anfragen) zwischen dem Browser und dem Webserver, wodurch eine Webseite kleine Informationsmengen vom Server anfordern kann und nicht die gesamte Seite.
Im Experiment wurde JSP+Ajax verwendet, um die Seite automatisch zu aktualisieren und Daten in der Datenbank zu lesen/schreiben.
Das Folgende ist ein kleines Beispiel für die Verwendung von JSP+Ajax, um eine teilweise Seitenaktualisierung zu erreichen:
Jsp-Datei, die Ajax-Anfragen verarbeitet: ajax.jsp
<%@ page contentType="text/html; charset=gb2312" %>
<%
//这是一个Java程序
//设置输出信息的格式及字符集
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control","no-cache");
out.println("<response>");
for(int i=0;i<2;i++){
out.println("<name>"+(int)(Math.random()*10)+
"号传感器</name>");
out.println("<count>" +(int)(Math.random()*100)+ "</count>");
}
out.println("</response>");
out.close();
%>
Die JSP-Datei, die die Ajax-Anfrage sendet: zx.jsp
<head>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</head>
<script language="javascript">
var XMLHttpReq;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
//发送请求函数
function sendRequest() {
createXMLHttpRequest();
var url = "ajax.jsp";
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
XMLHttpReq.send(null); // 发送请求
}
// 处理返回信息函数
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
DisplayHot();
setTimeout("sendRequest()", 1000);
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
function DisplayHot() {
var name = XMLHttpReq.responseXML.getElementsByTagName("name")[0].firstChild.nodeValue;
var count = XMLHttpReq.responseXML.getElementsByTagName("count")[0].firstChild.nodeValue;
document.getElementById("product").innerHTML = name;
document.getElementById("count").innerHTML = count;
}
</script>
<body onload =sendRequest()>
<table style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=0 width=200 bgColor=#f5efe7 border=0>
<TR>
<TD align=middle bgColor=#dbc2b0 height=19 colspan="2"><B>无线传感网</B> </TD>
</TR>
<tr>
<td height="20"> 传感器：</td>
<td height="20" id="product"> </td>
</tr>
<tr>
<td height="20">传感器个数：</td>
<td height="20" id="count"> </td>
</tr>
</body>
</table>
Der Effekt ist wie folgt (der Wert auf der Seite ändert sich automatisch):
Nach teilweiser Aktualisierung:
Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine teilweise Aktualisierung in JSP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!