Ajax 의 일반적인 기술 (3) - 페이지 자동 새로 고침 실현.
1, 서버 엔 드 코드
이 인 스 턴 스 서버 엔 드 코드 의 기능 은 랜 덤 수 를 만 들 고 XML 파일 형식 으로 클 라 이언 트 에 게 돌아 가 는 것 이 간단 합 니 다.메모 장 을 열 고 다음 코드 를 입력 하 십시오:
<%@ page contentType="text/html; charset=gb2312" %>
<%
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();
%>
위 코드 를 저장 합 니 다. 이름 은 auto. jsp 입 니 다.이 파일 에 서 는 자바. lang 패키지 의 Math 클래스 를 사용 하여 무 작위 수 를 만 듭 니 다.
2, 클 라 이언 트 코드
이 인 스 턴 스 클 라 이언 트 코드 는 주로 서버 에서 돌아 오 는 숫자 를 이용 하여 디 스 플레이 스타일 을 지정 합 니 다.메모 장 을 열 고 다음 코드 를 입력 하 십시오:
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<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 = "auto.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("cheh").innerHTML = "T-"+name+" ";
document.getElementById("price").innerHTML = count+" ";
}
</script>
<body onload =sendRequest()>
<table style="BORDER-COLLAPSE: collapse" borderColor=#5555555 cellSpacing=0 cellPadding=0 width=200 border=0>
<TR>
<TD align=middle bgColor=#abc2d0 height=19 colspan="2"><B> </B> </TD>
</TR>
<tr>
<td height="20"> ：</td>
<td height="20" id="cheh"> </td>
</tr>
<tr>
<td height="20"> ：</td>
<td height="20" id="price"> </td>
</tr>
</table>
</body>
위 코드 를 저장 합 니 다. 이름 은 autoRefresh. jsp 입 니 다.이 파일 에서 createXMLHttpRequest () 함 수 는 비동기 호출 대상 을 만 드 는 데 사 용 됩 니 다.sendRequest () 함 수 는 클 라 이언 트 에 요청 을 보 내 는 데 사 용 됩 니 다.processResponse () 함 수 는 서버 측의 응답 을 처리 하 는 데 사용 되 며, 처리 과정 에서 DisplayHot () 함수 로 데 이 터 를 설정 하 는 디 스 플레이 스타일 을 호출 합 니 다.그 중에서 setTimeout ("sendRequest ()", 1000) 함수 의 의 미 는 1 초 간격 으로 sendRequest () 함 수 를 호출 하 는 것 으로 이 함 수 는 Ajax 페이지 새로 고침 에서 주도 적 인 역할 을 합 니 다.DisplayHot () 함 수 는 서버 에서 되 돌아 오 는 XML 파일 을 분석 하고 되 돌아 오 는 데 이 터 를 가 져 와 현재 페이지 에 표시 합 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
원생 Ajax와 jQuery Ajax의 차이점 예시 분석선언: 이번에 소개한 것은 aax와 백그라운드를 이용하여 데이터 교환을 하는 작은 예이기 때문에 demo는 서버를 통해 열어야 합니다.서버 환경은 구축하기 매우 좋다. 인터넷에서wamp나xampp를 다운로드하여 한 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
