0
나는 다음과 같은 XML 파일 (인 data.xml)이 있습니다Jquery를 사용하여 XML 파일 읽기, 이것을 서버 보낸 이벤트와 결합하여 페이지를 최신 상태로 유지하는 방법?
<?xml version="1.0" encoding="UTF-8"?>
<users>
<user>
<id>2011</id>
<posX>12</posX>
<posY>29</posY>
<title>Senior Developer</title>
</user>
<user>
<id>2022</id>
<posX>99</posX>
<posY>99</posY>
<title>updated!</title>
</user>
</users>
내가 jQuery를 사용하여이 파일을 읽어
$.ajax({
url: 'js/data.xml', // name of file you want to parse
dataType: "xml",
success: parse,
error: function(){alert("Error: Something went wrong");}
});
및 사용하여 표시를;
function parse(document){
$(document).find("user").each(function(){
$("#test").append( // this is where all the reading and writing will happen
'<div style="position: absolute; top: '+$(this).find('posY').text()+'px; left: '+$(this).find('posX').text()+'px; width: 100px; height: 100px;">ID: '+$(this).find('id').text()+ // which represents user->id
'<br /> X: '+$(this).find('posX').text()+
'<br /> Y: '+$(this).find('posY').text()+
'<br /> Title: '+$(this).find('title').text()+
'</div>'
);
});
}
이 모두 정상적으로 작동합니다. XML이 읽 t지고 데이터가 표시됩니다. 이제는 페이지를로드 할 때만 발생하므로 한 번만 수행하십시오.
사용자가 xml을 업데이트 할 수 있지만 (제목이 변경되었다고 가정) 페이지를 새로 고침하면 이러한 변경 사항 만 표시됩니다. 나는 xquery를 x 초마다 jquery를 사용하여로드 할 수 있다는 것을 알고 있지만 변경 사항이있을 때 xml 파일을 전송할 수있는 서버 보내기 이벤트도 읽었습니다.
나는 이것을하고 싶다. 문제는 다음과 같습니다.이를 달성하기 위해 SSE를 구현하려면 어떻게해야합니까?
나는 몇 가지 조사를하고 몇 가지 데모 코드 발견 :var source = new EventSource("js/data.xml");
source.onmessage = function(event) {
document.getElementById("test").innerHTML += event.data + "<br>";
};
을하지만이 작동하지 않았다.
그래서 내가 원하는 :
- 로드 페이지 + 부하 XML XML이 어쨌든에서 변경되는 경우
- 는 (SSE를 사용) 페이지에 XML을 밀어 (이 현재 수행되는 것입니다)
- 표시 데이터 (POSX가 변경되는 경우, 그래서 사업부는 aswell 이동해야합니다)
내 현재 작업 HTML 코드를 뺀 SSE :
,536,913,632 10<!DOCTYPE html>
<html lang="en">
<head>
<style>
#test { position: relative; width: 500px; height: 500px; padding: 0.5em; border: 1px solid red;}
</style>
</head>
<body>
<div id="test"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script type="text/javascript">
$(document).ready(function(){
function parse(document){
$(document).find("user").each(function(){
$("#test").append( // this is where all the reading and writing will happen
'<div style="position: absolute; top: '+$(this).find('posY').text()+'px; left: '+$(this).find('posX').text()+'px; width: 100px; height: 100px;">ID: '+$(this).find('id').text()+ // which represents user->id
'<br /> X: '+$(this).find('posX').text()+
'<br /> Y: '+$(this).find('posY').text()+
'<br /> Title: '+$(this).find('title').text()+
'</div>'
);
});
}
$.ajax({
url: 'js/data.xml', // name of file you want to parse
dataType: "xml",
success: parse,
error: function(){alert("Error: Something went wrong");}
});
});
</script>
</body>
</html>
희망 누군가가 내 댓글에서
정적 파일로는이 작업을 수행 할 수 없다고 말할 수 있습니다. 서버는 이벤트를 트리거하기 위해 클라이언트에 특정 데이터를 보내야합니다. https://developer.mozilla.org/en-US/docs/Server-sent_events/Using_server-sent_events 내 최선의 조언은 시간 초과를 설정하고'HEAD' 요청을 수행하고 마지막 수정 된 날짜를 확인하는 것입니다 날짜가 XML 파일에 변경 사항이 있습니다. –