So implementieren Sie eine teilweise Aktualisierung in JSP-javaLernprogramm-php.cn

So implementieren Sie eine teilweise Aktualisierung in JSP

(*-*)浩

Freigeben： 2020-09-15 16:32:48

Original

6278 Leute haben es durchsucht

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.

So implementieren Sie eine teilweise Aktualisierung in JSP

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();
%>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!