2011-11-11 6 views
2

mysql 데이터베이스 테이블이 변경되면 페이지 자체를 새로 고치지 않고 어떻게 데이터베이스 행 (PHP)의 값을 페이지에 자동으로 추가 할 수 있습니까?데이터베이스가 변경된 경우 내용을 자동으로 새로 고침

그래서,이 같은 비트는 다음과 같습니다 Automatically refresh browser in response to file system changes?, 하지만 대신 파일 시스템 변경으로 브라우저를 새로 고치는, 때, 데이타베이스 변경 아무것도 새로 고치지 않고, 컨텐츠를 업데이트합니다.

감사합니다. 나는 이것을 가능한 한 명확하게하려고 노력했다.

+0

당신은 exponle를 위해, 무언가 페이 스북 주석과 같은 것을 의미합니까? 새로운 주석이 데이터베이스에 삽입되면 클라이언트 측에서 디스플레이를 새로 고칩니다. –

+0

@LaithShadeed 예, 이미 입력 한 내용을 유지하십시오. –

+0

javascript의 setInterval() 및 $ .ajax를 사용하여 업데이트 된 행을 다시 페이지로 반환하는 PHP 스크립트를 폴링 할 수 있습니다. – mhoofman

답변

7

이 오래된 대답 유의하시기 바랍니다. 최근의 방법은 websockets, server-send 이벤트입니다. 그 좋은 예가 파이어베이스입니다. 간단한 코드 예제는 https://github.com/laithshadeed/wsk-feedback에서 찾을 수 있습니다. 이 예제에서는 firebase 업데이트가 websocket을 통해 브라우저에 이벤트를 보내면 UI가 업데이트됨을 알 수 있습니다.

이것은 Comet/Reverse Ajax/HTTP 서버 푸시 http://en.wikipedia.org/wiki/Comet_(programming)이라고합니다. 이러한 작업은 기존의 많은 프레임 워크뿐만 아니라이를 수행하는 많은 기술입니다.

는 SO 혜성 https://stackoverflow.com/search?q=comet에 대한

간단한 구현은 자바 스크립트의 setTimeout과 setInterval을이 MySQL을 트리거/저장 프로 시저로, 서버 상태를 확인하는 것입니다 많은 답변이 있습니다.

혜성으로 깊이 들어가기.이 멋진 책이에 대한 있습니다

Comet and Reverse Ajax 2008 By Dave Crane

Comet and Reverse Ajax Cover Image

Chapter 4 (River of Content) - Building the Realtime User Experience 2010 By Ted Roden

Building the Realtime User Experience Cover image

업데이트 : 당신은 Websockets and Server-sent 이벤트처럼 HTML5의 새로운 기술로 보일 수 있습니다 , IE 그 (것)들을, 순간에 잘 서버를 보내지 않는 사건은 not supported in IE이고 웹 소켓 전용이다

+0

을 찾을 수없는 것처럼 나는 setTimeout과 setInterval을 사용할 것입니다. 고마워요 :) –

-3

JavaScript를 사용하여 DOM을 조작하십시오.

0

정말 간단한 작업은 아니지만 그렇게 나쁘지는 않습니다. 당신은 몇 가지가 콘서트에서 작업이 필요합니다

  • specifiedintervals에서 서버와 확인 페이지에 자바 스크립트 루틴
  • 페이지에
  • 콜백 함수를 폴링 할 때 변경을보고 서버에 페이지 변경된 데이터가 서버에 의해보고되면 새 요소를 삽입하거나 기존 요소를 업데이트/삭제합니다.

변경된 데이터를 결정하는 방법에 대해 고려해야 할 사항입니다. 가장 쉬운 방법은 각 레코드에 대해 "수정 된"필드를 유지하는 것입니다. 이 방법은 자바 스크립트가 서버를 폴링 할 때 "체크 한 마지막 시간"타임 스탬프를 포함 할 수 있으며 서버는 더 최근의 변경 사항 만 리턴해야합니다.

처음에는 나타나지 않을 정도로 어렵지 않습니다. jQuery처럼 미리 만들어진 라이브러리를 활용하면 같은 작업을 수행 할 수 있습니다

$.ajax({ 
    url: 'http://example.com/checkforupdates.php?last=' + (new Date().getTime()), 
    context: document.body, 
    success: function(data){ 
    // do something here to add/update/remove elements on your page 
    // using the information returned in the data argument. 
    } 
}); 
+0

소리가 힘들어,이 모든 일을 위해 사용할 수있는 코드가있다, 예를 들어. –

관련 문제