HTTP and AJAX for Web Development PDF

Dr. AISSAOUA HABIB University Setif -1-  HTTP protocol HTTP stands for hypertext transfer protocol and is used to transfer data across the Web. HTTP is an application layer protocol that enables clients (such as a web browser) and servers to share information...

Dr. AISSAOUA HABIB University Setif -1-  HTTP protocol HTTP stands for hypertext transfer protocol and is used to transfer data across the Web. HTTP is an application layer protocol that enables clients (such as a web browser) and servers to share information. Dr. AISSAOUA HABIB University Setif -1- How does the HTTP protocol work ? When a request is send to the server, a connection is established between client and server. The server receives the request, processes the request and sends back the response and then, the connection will be closed. If another request will be sent, after that, it will be treated as a new request and a new connection will be established. HTTP is a stateless protocol, in other word the server will forget everything related to client/browser state, thus each request is independent of the other. Dr. AISSAOUA HABIB University Setif -1- Dr. AISSAOUA HABIB University Setif -1-  That’s because HTTP protocol doesn’t provide any inherent mechanism to maintain the state between multiple requests originating from the same client. Hence it’s been called a stateless protocol. Because each HTTP request contains all the information necessary to process it, there is no need for the server to keep track of connections and requests. Dr. AISSAOUA HABIB University Setif -1- Long Polling ? Traditionally, web browsers use a pull-based approach to fetch data from servers. This approach, known as short polling, can increase the network overhead as the client has to send requests to check for updates repeatedly. Furthermore, the server has to process unnecessary requests even though it does not have any new data to return. On the other hand, long polling is a push-based approach that allows the server to send updates to the client as soon as they are available. Dr. AISSAOUA HABIB University Setif -1- Long Polling ? Maintaining the HTTP connection enables the server to reply later when data becomes available or the timeout threshold has been reached. Instead of sending numerous requests repeatedly until the server receives new information, the client only has to send one request to the server to get the latest information. After receiving the data, the client can initiate a new request, repeating this process as often as necessary. Dr. AISSAOUA HABIB University Setif -1- Dr. AISSAOUA HABIB University Setif -1- What is rendering? Rendering is the process of generating HTML markup to display web pages in the browser. How, and most importantly, where that rendering process happens can have a significant impact on user experience, site performance, and Search Engine Optimization (SEO). Dr. AISSAOUA HABIB University Setif -1-  AJAX  AJAX est un ensemble de techniques préexistantes qui dépend essentiellement de XMLHttpRequest, un objet coté client utilisable en JavaScript  XMLHttpRequest est un objet JavaScript qui permet d'obtenir des données au format XML, JSON, mais aussi HTML, ou encore texte simple à l'aide de requêtes HTTP.  Ajax permet de modifier partiellement la page affichée par le navigateur pour la mettre à jour sans avoir à recharger la page entière.  Le terme asynchrone, signifie que l'exécution de JavaScript continue sans attendre la réponse du serveur qui sera traitée quand elle arrivera. Dr. AISSAOUA HABIB University Setif -1-  AJAX peut par exemple vous suggérer des valeurs comme le fait Google Dr. AISSAOUA HABIB University Setif -1-  FONCTIONNEMENT 1. Instancier un objet XMLHttpRequest; XHR = new XMLHttpRequest(); 2. Une fois que nous avons un objet de type XMLHttpRequest, nous allons pouvoir envoyer une requête au serveur. L'objet XHR dispose de deux méthodes: open: établit une connexion. send: envoie une requête au serveur.  open s'utilise de cette façon : open(Method, Url, aAsync) a. Method indique à l'objet XHR la méthode qui devra être utilisée pour la requête. Laissez le nom de la méthode en majuscules comme spécifié par la norme HTTP Dr. AISSAOUA HABIB University Setif -1- b. Url pour indiquer l'adresse du programme chargé de traiter notre requête, ça peut être une page dynamique (PHP, ASP) ou une page statique (TXT, HTML...)  Si la méthode GET est utilisée dans sMethod, on peut indiquer la liste des paramètres que nous souhaitons passer à celui-ci.  Avec POST, il faut spécifier les variables dans l'argument de la méthode send. Il faut aussi changer le type MIME de la requête avec la méthode setRequestHeader , sinon le serveur ignorera la requête Dr. AISSAOUA HABIB University Setif -1- c. aAsync définit si le mode de transfert est asynchrone ou synchrone.  send: envoie une requête au serveur. Dr. AISSAOUA HABIB University Setif -1- Quand on envoie une requête HTTP via XMLHttpRequest, celle-ci passe par plusieurs états différents. l'état est donné par la propriété readyState de XMLHttpRequest: 0 : L'objet XHR a été créé, mais pas encore initialisé (la méthode open n'a pas encore été appelée) 1 : Connexion établie avec le serveur 2 : Requête reçue 3 : réponse en cours 4 : Toutes les données sont réceptionnées Pour détecter les changements d'état nous utilisons la propriété onreadystatechange qui définit une fonction à exécuter lorsque le readyState change Dr. AISSAOUA HABIB University Setif -1- L'objet XMLHttpRequest permet d'interagir avec le serveur, grâce à ses méthodes et ses propriétés:  Propriétés: 1. readyState: C'est cette propriété qu'on va tester dans le onreadystatechange. Elle représente l'état de l'objet et peut prendre des valeurs entre 0 et 4 2. status: Le code de la réponse du serveur (200:requête réussie, 404: page non trouvée, … 3. responseText: La réponse retournée par le serveur, au format texte. 4. responseXML: La réponse retournée par le serveur, au format XML. Dr. AISSAOUA HABIB University Setif -1- Dr. AISSAOUA HABIB University Setif -1-