JSP에서 부분 새로 고침을 구현하는 방법-java지도 시간-php.cn

JSP에서 부분 새로 고침을 구현하는 방법

(*-*)浩

풀어 주다： 2020-09-15 16:32:48

원래의

6332명이 탐색했습니다.

jsp에서 부분 페이지 새로 고침을 구현하는 방법: 먼저 ajax 요청을 처리하는 jsp 파일을 만든 다음 출력 정보의 형식과 문자 집합을 설정하고 마지막으로 JSP 및 ajax를 사용하여 부분 페이지 새로 고침을 구현합니다.

JSP에서 부분 새로 고침을 구현하는 방법

AJAX를 사용하면 JavaScript는 JavaScript의 XMLHttpRequest 개체를 사용하여 서버와 직접 통신할 수 있습니다. 이 개체를 통해 JavaScript는 페이지를 다시 로드하지 않고도 웹 서버와 데이터를 교환할 수 있습니다.

추천 과정: Java 튜토리얼.

AJAX는 브라우저와 웹 서버 간의 비동기 데이터 전송(HTTP 요청)을 사용하므로 웹 페이지가 전체 페이지 대신 서버에서 소량의 정보를 요청할 수 있습니다.

실험에서는 페이지를 자동으로 새로 고치고 데이터베이스의 데이터를 읽고 쓰는 데 JSP+ajax를 사용했습니다.

다음은 JSP+ajax를 사용하여 부분 페이지 새로 고침을 수행하는 간단한 예입니다.

ajax 요청을 처리하는 jsp 파일: 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();
%>

로그인 후 복사

ajax 요청을 보내는 jsp 파일: 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>

로그인 후 복사

효과는 다음과 같습니다(페이지의 값이 자동으로 변경됨):