Discussion :

[SylvainPV]

N'oublie pas la ponctuation dans tes messages, ça peut aider à te faire comprendre

Et non, aucun besoin de setInterval dans l'histoire. Tout se fait via les évènements déclenchés par l'objet XMLHttpRequest.

[laurentg2003]

Bonjour,
J'ai suivi les tutos
voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
var a = false;
if(window.XMLHttpRequest){
a = new XMLHttpRequest();
//a.overrideMimeType("text/xml");Pas supporté par IE 10 
 
 
}
else if(window.ActiveXObject) 
{
a = new ActiveXObject("Microsoft.XMLHTTP");
 
}
else
{
 
}
 
a.open("GET","http://www.anna-tatishvili-fan.hostoi.com/anna3/modele.php",true);
a.onEnterFrame("alertContents",a,1000);// qui renvoie à une méthode permettant de passer l'objet  ajax à la fonction appelée récursivement (on m'a déjà dit que rajouter directement ma méthode à object est un peu bourrin mais c'est trés pratique(Remplace onreadystatechange )
 
Object.prototype.onEnterFrame=function(){
 
if(undefined!=arguments[0]){            
myFunction=arguments[0];}
if(undefined!=arguments[1]){            
obj=arguments[1];}
if(undefined!=arguments[2]){            
duration=arguments[2];}
if(undefined!=arguments[3]){            
iterator=arguments[3];}
if(undefined!=arguments[4]){            
stop=arguments[4];}
 
 
if(myFunction=="alertContents"){
 
callAlertContents=function(){
try {
    if (obj.readyState == 4) {
      if (obj.status == 200||obj.status==304) {
        alert(obj.responseText);clearInterval(timer);
      } else {
        alert('There was a problem with the request.');
      }
    }
  }
  catch( e ) {
    alert( e);
  }
 
 
 
 
};
 
timer=setInterval("callAlertContents()",duration);
 
 
}
}

Le problème est le suivant : quand je coupe la connexion le script continu de m'afficher mon objet json ...pas de "There was a problem with the request." le clearinterval ne fonctionne pas seul chose si je rafraichie la page ,le catch s'éxécute ....

[laurentg2003]

Tu as raison pour la ponctuation et dire que j'ai un bac L
Sinon avec ou sans setInterval ,je coupe ma connexion et jamais ce fameux else se déclenche .... je vois pas ou est le problème


Edit : Dans ma méthode onEnterFrame(terme inspiré d'actionScript) c'est l’ensemble de la requête ajax qu'il faut mettre, et cela fonctionne .Le setInterval semble obligatoire sinon le "onreadystatechange" boucle et xhr.readystate fait 0,1,,3,4 un objet json ou xml est retourné et c'est tout!!!!
I n'l y a pas un nouveau onreadystatechange(pas de récursivité) et à nouveau un xhr.readystate 0,1,2,3,4 donc
En cas de déconnexion l'objet json ou xml etant déjà retourné il va l'afficher quand même ! C'est ce que je déduis de mes tests.
Aprés le rôle d' Ajax est de retourner des données en mode synchrone ou asynchrone pas de tester la connexion sacrément utile quand même !!!!!!

[SylvainPV]

Non, je te répète que le setInterval n'est pas la solution.. Il faut utiliser l'évènement onreadystatechange. Et le readyState n'arrivera jamais à 4 si tu es déconnecté, puisque 4 = request finished and response is ready

Tu es sûr de ne pas vouloir te servir d'une librairie pour simplifier la gestion des requêtes AJAX ? Si jQuery te paraît trop lourd, tu peux prendre l'équivalent allégé Zepto

Tout ton code se réduirait alors à:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
  type: 'GET',
  url: 'http://www.anna-tatishvili-fan.hostoi.com/anna3/modele.php',
  dataType: 'json',
  timeout: 2000, //2 secondes avant timeout
  success: function(data){
    alert("sucess: "+data);
  },
  error: function(xhr, type){
    alert('There was a problem with the request.');
  }
})

[laurentg2003]

Je vais suivre ton conseil concernant la librairie ,j'ai quelques bases avec Jquery
une amie m'avait demandé de tester la sécurité de son site.
Je pense que cette bibliothèque est incontournable vu qu'il existe une version pour smartphone même si HTML5 avec l'API selector la reprend en partie
mais c'est sur que ne plus devoir se poser de questions sur la compatibilité des navigateurs doit être reposant
Je regrette juste le fait que certains développeurs connaissent Jquery et plus javaScript mais tu as raison je devrais arrêter de réinventer la roue et ce n'est pas tès pro même si j’apprends comme cela mais mon code par exemple fonctionne puisque que c'est une sorte de "onreadystatechange" mais IE 10 ne detecte l’événement qu'une fois (ce qui est cela dit suffisant)

Je vais tester ta bibliothèque légère ça a l'air sympa merci

[laurentg2003]

Aprés different tests effectivement :window.navigator.onLine est supporté par tous les navigators récent mais il n'est bien implémenté que sur Internet Explorer 10 event dom level 2!Pour moi qui ai galéré avec IE 6 j'avoue que bravo à Microsoft!

Edit:c'est plus complexe que cela :https://developer.mozilla.org/en-US/...rOnLine.onLine

[SylvainPV]

Je t'avais déjà passé ce lien sur ce topic la semaine dernière, c'était pour une bonne raison

[sekaijin]

...,j'ai quelques bases avec Jquery
une amie m'avait demandé de tester la sécurité de son site.
Je pense que cette bibliothèque est incontournable...

non pas incontournable mais c'est comme si les developpeurs ne connaissaint qu'elle
en voici des listes incomplètes. et pas à jour
http://en.wikipedia.org/wiki/List_of_Ajax_frameworks
http://en.wikipedia.org/wiki/List_of...ipt_frameworks
en fonction du besoin (lib complète ou légère, framwork applicatif avec ou sans UI, configurable ou mono block, avec ou sans chargement dynamique du source, multipage enrichie ou single page app, fourniture d'outillage et/ou d'IDE ou pas) on peut parcourir cette page pour trouver son bonheur et pas réinventer la roue.
http://en.wikipedia.org/wiki/Category:Ajax_(programming)
il y en a pour tout les goûts.

A+JYT

[SylvainPV]

Il y a aussi des sites spécialisés qui les regroupent :
http://jster.net/
http://www.jsdb.io/

[Kaamo]

Tiens je ne connaissais pas jsdb.io !

Pour compléter la liste de Sylvain : http://microjs.com/

[laurentg2003]

Merci pour votre aide et vos liens !!!!!! Sylvain oui tu m'avais donné le lien c'est une mine d'or !!!!!
Sinon à ce lien là http://www.html5rocks.com/en/mobile/workingoffthegrid/
je voudrais en cas de non réponse du serveur via la requête ajax créer mon propre gestionnaire d'événement !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var fireEvent = function(name, data) {
  var e = document.createEvent("Event");
  e.initEvent(name, true, true);
  e.data = data;
  window.dispatchEvent(e);
};

déjà je pense que c'est du DOM level 3 je doute qu'IE prenne ça en compte ???? c'est ma question merci

[laurentg2003]

Ce code fonctionne avec Opera Firefox Google Chrome j'ai même créé un gestionnaire d’événement qui fonctionne c'est assez incroyable de pouvoir faire ça Evidement Internet explorer et Safari ne réagissent pas ...
Peut être qu'avant de develloper les API HTML5 il aurait fallu s'entendre sur le DOM 2 et 3 c'est assez frustrant....

[SylvainPV]

En effet, le support laisse à désirer. jQuery propose $(element).trigger(event) avec un support très correct. D'aucuns diront que je ne connais rien d'autre que jQuery, il n'empêche si cette librairie est si populaire, c'est qu'elle s'avère extrêmement utile.

[sekaijin]

[laurentg2003]

J'ai trouvé un bon livre sur Jquery O'Reilly - JavaScript & jQuery - The.Missing.Manual 2ed(2011)
Sinon bonne nouvelle pour l'API offline "

You should include the manifest attribute on every page of your application that you want cached. The browser does not cache pages that do not contain the manifest attribute, unless such pages are explicitly listed in the manifest file itself. You do not need to list all the pages you want cached in the manifest file, the browser implicitly adds every page that the user visits and that has the manifest attribute set to the application cache."

donc pas besoin de mettre obligatoirement en dur tous les urls des pages à mettre en cache grâce à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<html manifest="example.appcache">
  ...
</html>

à mettre sur le template HTML ce qui permet de mettre en cache des pages genérées dynamiquement via javaScript les pages php faisant partie de Réseau vu qu'elles sont sur le serveur
https://developer.mozilla.org/en-US/...ces_in_Firefox
je lis que le navigateur avant d'aller charger quoique se soit sur le serveur ou via ajax ou via localstorage verifie si un fichier appCache existe si oui il charge dans le cache ma question doit sembler idiote mais existe t'il un code à faire genre Si unFichierAppCache exist charger dans cache
Sinon Charger à partir de localStorage Merci

Edit au fond il semblerait que le cache est additionnel au cache classique et que même en online il est prioritaire au fond nul besoin de tester si on est online ou pas via ajax http://alistapart.com/article/applic...is-a-douchebag je pense qu'il faut tester via le gestionnaire d’événement si le cache existe
J'avoue que c'est confus....

[SylvainPV]

Oui mais attention, cela implique que seules les pages visitées au moins une fois par l'utilisateur garderont une sauvegarde locale. Quitte à indiquer tous les fichiers CSS/JS/images dans le manifest, autant mettre toutes les pages pour que l'utilisateur déconnecté ait accès à tout le périmètre. Enfin, c'est toi qui voit.

existe t'il un code à faire genre Si unFichierAppCache exist charger dans cache Sinon Charger à partir de localStorage Merci

Le fait que tu te poses cette question montre que tu n'as pas compris comment fonctionne l'applicationCache. Lorsque le navigateur a téléchargé les fichiers dans l'applicationCache, il ne va plus requêter le serveur et systématiquement utiliser la copie locale (à moins d'un update manifest pour retélécharger le tout). De plus, le localStorage n'est pas conçu pour héberger des fichiers statiques, et ne te saura d'aucune utilité sans applicationCache pour un mode offline car il faut que ton script utilisant le localStorage soit sauvegardé lui aussi (on en avait déjà parlé dans ce topic)

[laurentg2003]

ha j'ai fait un edit pendant que tu postais.
D'accord cette fois j'ai bien compris Je vais donc déclarer toutes mes pages (8) dans mon fichier manifest :au cas ou le visiteur ne les visite pas toutes et mes scripts js (qui generent les pages).Vu qu'elles ne sont pas statiques,il faut bien stocker les données dans localStorage.

avec au départ une requete ajax qui va aller chercher les données coté serveur pour les stocker dans localStorage et là si il n'y a pas de connexion on ira directement dans localStorage chercher les données
Au fond tout le JS doit être dans appCache
On doit vraiment gagner en vitesse !!!! et merci !

J'ai lu aussi que même online comme le cache à l'avantage si une image par exemple n'est pas dans appCache elle ne s'affichera pas ...
D'ou une version sans manifest avec une iframe cachée qui prendra le relais en offline avec manifest

[SylvainPV]

Au fond tout le JS doit être dans appCache
On doit vraiment gagner en vitesse !!!! et merci !

Effectivement, l'applicationCache est un bon moyen de gagner en performances à condition que :
- on accepte le mode versionné de l'application et les update manifest à prévoir
- on tienne compte du temps de téléchargement complet initial qui est assez gourmand en requêtes
- on utilise exclusivement des pages statiques ou générées côté client

J'ai lu aussi que même online comme le cache à l'avantage si une image par exemple n'est pas dans appCache elle ne s'affichera pas ...

si l'image n'est pas listée dans le manifest, elle sera chargée normalement depuis le serveur.

[laurentg2003]

Merci pour ces précisions j'ai plus qu'à développer tout ça :bon W-E

[sekaijin]

il faut penser à toutes les images qui sont dans le js et pas dans le html.

lorsqu'on veux faire une appli qui fonc en Offline c'est beaucoup plus facile à gérer si on fait une "Single Page App" car généralement dans ce cas le DOM est généré côté client. mais du coup on n'a pas (ou presque) d'image dans la page html. les image étant ajouté dans l'interface par le js ou le css.

c'est un oubli courant lorsqu'on commence à faire ce genre d'appli.

Je rejoins @SylvainPV lorsqu'il dit qu'il faut accepter de faire du HTML du css et du js statique.

j'ajouterais que c'est une très bonne expérience pour le développent d'appli par la suite. et qu'il faut l'envisager pour aussi pour les appli online.
en effet avoir les html le js et le css en statique est très efficace pour les temps de chargement.
ce genre d'approche pousse à ne faire des échanges dynamique avec le serveur que pour les données.

dans le cas d'une appli offline c'est obligatoire. mais ça marche aussi pour une appli online et ça améliore la performance de l'application.

A+JYT