Étape 1: Application de serveur Web
Comme vous le savez les serveurs sont gros et coûteux systèmes. Il s’agit de servir nous web sites, audios, vidéos, fichiers, etc. En comparant à launchpad de serveurs web est vraiment simple. Avec launchpad, nous ne pouvons pas servir si complexe et fonctionnelle des sites web ou des fichiers. Nous ne se soucient pas que parce que nous venons d’envie les dispositifs électriques de commande et mesurer certaines quantités sur internet.
Dans ce contexte, j’ai fait simple site web. Vous pouvez voir la capture d’écran du site ci-dessus.
Comme vous le voyez le site est très simple. Elle a juste quelques textes, boutons et dessine géométriques. Launchpad est une quatre LED et deux boutons poussoirs pour une utilisation des fins générales. Sur le site web, j’ai utilisé des boutons de contrôle LED et rempli de cercles pour voir des situations LEDs et les boutons. Les éléments de texte sont également utilisés pour donner des informations. Vous pouvez voir JavaScript code du site ci-dessous.
<p>var led1, x1, led2, x2, led3, x3, led4, x4;<br>function GetSwitchState() { nocache = led1 + led2 + led3 + led4 + "&nocache="+ Math.random() * 1000000; var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) { if (this.responseText != null) { if (this.responseText.indexOf("LED1ON") > -1) { document.getElementById("LED1").style.fill = "yellow"; } else { document.getElementById("LED1").style.fill = "black"; } if (this.responseText.indexOf("LED2ON") > -1) { document.getElementById("LED2").style.fill = "yellow"; } else { document.getElementById("LED2").style.fill = "black"; } if (this.responseText.indexOf("LED3ON") > -1) { document.getElementById("LED3").style.fill = "yellow"; } else { document.getElementById("LED3").style.fill = "black"; } if (this.responseText.indexOf("LED4ON") > -1) { document.getElementById("LED4").style.fill = "yellow"; } else { document.getElementById("LED4").style.fill = "black"; } if (this.responseText.indexOf("S1:ON") > -1) { document.getElementById("SW1").style.fill = "red"; document.getElementById("text1").innerHTML ="SW1:ON"; } else { document.getElementById("SW1").style.fill = "white"; document.getElementById("text1").innerHTML ="SW1:OFF"; } if (this.responseText.indexOf("S2:ON") > -1) { document.getElementById("SW2").style.fill = "red"; document.getElementById("text2").innerHTML ="SW2:ON"; } else { document.getElementById("SW2").style.fill = "white"; document.getElementById("text2").innerHTML ="SW2:OFF"; } } } } } request.open("GET", "ajax_switch" + nocache, true); request.send(null); setTimeout('GetSwitchState()', 500); } function SetLEDStates(num) { switch(num) { case 1: if(x1==1) { led1="&LED1ON"; x1=0; } else { led1="&LED1OFF"; x1=1; } break; case 2: if(x2==1) { led2="&LED2ON"; x2=0; } else { led2="&LED2OFF"; x2=1; } break; case 3: if(x3==1) { led3="&LED3ON"; x3=0; } else { led3="&LED3OFF"; x3=1; } break; case 4: if(x4==1) { led4="&LED4ON"; x4=0; } else { led4="&LED4OFF"; x4=1; } break; case 0: led1="&LED1OFF"; x1=1; led2="&LED2OFF"; x2=1; led3="&LED3OFF"; x3=1; led4="&LED4OFF"; x4=1; break; } }</p>
Comme vous le voyez sur la fonction GetSwitchState de codes créer demande de XMLHttpRequest et définir lui-même d’exécuter périodiquement par la fonction setTimeout. Intervalle de temps, j’ai choisi 500ms pour cette application. Si vous le souhaitez, vous pouvez modifier la valeur. Lors de l’événement onload de la page une fois que GetSwitchState fonction exécutée et il est aller... Il s’agit de l’opération principale de codes et technique de l’ajax. Ainsi, vous pouvez utiliser le site web sans toujours actualiser. Découvrez ici pour apprendre des informations détaillées sur l’ajax.