JSP에서 부분 새로 고침을 구현하는 방법
- (*-*)浩원래의
- 2019-05-15 09:42:036352검색
jsp에서 부분 페이지 새로 고침을 구현하는 방법: 먼저 ajax 요청을 처리하는 jsp 파일을 만든 다음 출력 정보의 형식과 문자 집합을 설정하고 마지막으로 JSP 및 ajax를 사용하여 부분 페이지 새로 고침을 구현합니다.
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>
효과는 다음과 같습니다(페이지의 값이 자동으로 변경됨):
부분 새로 고침 후:
위 내용은 JSP에서 부분 새로 고침을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：JSP 페이지 란 무엇입니까?다음 기사：JSP 페이지 란 무엇입니까?