[jQuery, Ajax] Afficher en temps réel contenteditable

Dans le fichier save.php
<?php header("Content-Type: application/json"); ?>
<?php header('Content-Type: charset=utf-8'); ?>

Declarer une variable tableau;

$data_collector=array();

utlise le select query pour récupérer les informations

$data-finder="selsect * from table"

foreach ($data-finder as $key => $val) {
$data_collector[]=array(
'id'=>$val->id,
'ville'=>$val->ville,
'siteweb'=>$val->siteweb,
'tel'=>$val->telephone,
);}

echo json_encode($data_collector);

Dans le code jquery **
ajoute dataType: 'json',

success: function(data**) {
aroundconsole.log(data); // la tu auras un objet avec vos données
var rspns = eval(data); //eval c'est pour récupérer les données on format text

$.each(rspns, function() {
console.log(this.id); // return ID
console.log(this.ville), // return ville
console.log(this.siteweb), // return siteweb       })

Salut, alors après avoir fait ton code et qui me retour quelque chose de très bien mais seulement en console ^^
Je voudrais pouvoir l'appliquer dans la div ^^
Comment, je peu faire pour que sa utilise empty, ou simplement sa fait croire que sa écrit :D

Car dans mon cas, si je fait ceci :

setInterval(function () {
        load(1);
    }, 1000);

    function load(id){

        $.ajax({
            type: 'POST',
            url: 'save.php',
            dataType: 'json',
            data: {
                action: 'load',
                id: id
            },
            success: function(data) {
                var rspns = eval(data);
                $.each(rspns, function() {
                    console.log(this.content);
                    $(RTE_DIV).empty();
                    $(RTE_DIV).append(this.content);

                });
            }
        });
        textarea;
    }

Sa ne fonctionne pas vraiment...

Salut et je fait un UP.
Bon, j'ai compris ton code, il me permet de chager la contenue, mais je voudrais le faire en temps réel.
J'ai donc modifier :

$.ajax({
            type: 'POST',
            url: 'save.php',
            dataType: 'json',
            data: {
                action: 'load',
                id: 1
            },
            success: function(data) {
                var rspns = eval(data);
                $.each(rspns, function() {
                    //console.log(this.content);
                    $(RTE_DIV).empty();
                    $(RTE_DIV).append(this.content);

                });
            }
        });

Mais, maintenant il me reste plus que a faire avec en temps réel, de pouvoir écrire et que les autres le voit en temps réel, ou même que plusieurs écrit etc...
J'avais pensé, de faire en sorte de sauvegarder le focus à chaque fois avant le empty, et ensuite remettre le focus juste après
que le texte est afficher, mais je ne sais pas faire sa.
Cordialement

EDIT :
J'ai fait un poste sur openclasrroms pour avoir des réponses des deux cotés et plusieurs avis, voici ou j'en suis : http://openclassrooms.com/forum/sujet/save-restore-position-focus-contenteditable

Ce poste un récapitulatif de mon problème.
Alors problème numéro 1:* *Afficher le tout dès le chargement de la page**

Alors pour cela, c'ets utiliser ajax dès le chargement de la page :

 /*

    LOAD

     */

    $(RTE_DIV).attr('contenteditable', false);
    $(RTE_DIV).css({
       'background':'#E9E9E9'
    });
    $(RTE_DIV).append('<p style="text-align:center;font-size:1.5em;color:black;font-weight: bold;">Chargement en cour...</p>');

    $.ajax({
        type: 'POST',
        url: 'save.php',
        dataType: 'json',
        data: {
            action: 'load',
            id: 1
        },
        success: function(data) {
            $(RTE_DIV).attr('contenteditable', true);
            var rspns = eval(data);
            $.each(rspns, function() {
                //console.log(this.content);
                $(RTE_DIV).css('background','');
                $(RTE_DIV).empty();
                $(RTE_DIV).append(this.content);

            });
        }
    });

Merci à @TROJAN pour le morceau de code.
Alors ceci vas faire au chargement de récuprer le tout d'un coup.

Alors problème numéro 2:* *Afficher en real-time**

Ceci n'est pas résolus.

Mon but est de afficher en temps réel comme sur http://codeshare.io/ (merci à @tidus pour m'avoir fait connaitre se site)
Et donc, j'ai pensé a faire une sauvegarde du focus et de le restaurer toute les une secondes, mais malheuresement, je n'y arrive pas :'(
Concernant la sauvegarde du focus, j'ai fait un poste sur Open ClassRooms (SZD) : http://openclassrooms.com/forum/sujet/save-restore-position-focus-contenteditable

donc le code actuel :
setInterval(function () {
reload();
}, 1000);

function reload(){
    $.ajax({
        type: 'POST',
        url: 'save.php',
        dataType: 'json',
        data: {
            action: 'load',
            id: 1
        },
        success: function(data) {
            saveRangePosition();
            var rspns = eval(data);
            $.each(rspns, function() {
                $(RTE_DIV).empty();
                $(RTE_DIV).append(this.content);
            });
        }
    });
}

function saveRangePosition()
{
    var range=window.getSelection().getRangeAt(0);
    var sC=range.startContainer,eC=range.endContainer;

    A=[];while(sC!==$('#contentarea')){A.push(getNodeIndex(sC));sC=sC.parentNode}
    B=[];while(eC!==$('#contentarea')){B.push(getNodeIndex(eC));eC=eC.parentNode}

    window.rp={"sC":A,"sO":range.startOffset,"eC":B,"eO":range.endOffset};
}

/*function restoreRangePosition()
{
    bE.focus();
    var sel=window.getSelection(),range=sel.getRangeAt(0);
    var x,C,sC=bE,eC=bE;

    C=rp.sC;x=C.length;while(x--)sC=sC.childNodes[C[x]];
    C=rp.eC;x=C.length;while(x--)eC=eC.childNodes[C[x]];

    range.setStart(sC,rp.sO);
    range.setEnd(eC,rp.eO);
    sel.removeAllRanges();
    sel.addRange(range)
}*/
function getNodeIndex(n){var i=0;while(n=n.previousSibling)i++;return i}