Exemples de requêtes AJAX

Les méthodes $.get(), $.getJSON() et $.post() de la librairie jQuery

Exemple 1 : code HTML statique

Récupérer du code HTML à partir d'un fichier existant

  • Méthode Http : GET
  • Url cible : static-content/static-content.html
  • Données transmises : aucune
  • Réponse attendue : code HTML
  • Création de la réponse : fichier statique

Envoi de la requête

Code javascript : $.get('static_content/static_content.html', onGetResponseExample1);

Réponse du serveur

Une fois la requête effectuée, la réponse est insérée via javaScript dans un élément HTML prévu à cet effet :

Code javascript : $('#example-1').html(staticHtmlContent);

Contenu brut de la réponse

La réponse du serveur correspond au contenu du fichier static_content/static_content.html

Cette réponse est visible dans la console web via l'onglet "Network" ou "réseau" une fois la requête effectuée avec le type XHR (Objet XMLHttpRequest)

En cliquant sur l'objet, puis sur l'onglet "Response" ou "Réponse", le contenu transmis est visible : 


				

			


			

				

					

						
Exemple 2 : données JSON statiques

						

							Récupérer des données au format JSON à partir d'un
							fichier existant
						

					

					
    
						
  • Méthode Http : GET
    • 
						
  • 
							Url cible :
							static-content/static-data.json
						
    • 
						
  • Données transmises : aucune
    • 
						
  • Réponse attendue : données JSON
    • 
						
  • 
							Création de la réponse : fichier
							statique
						
    • 
					


					
Envoi de la requête

					
					

						Code javascript :
						
							$.getJSON('static_content/static_data.json',
							onGetResponseExample2);
						
					


					
Réponse du serveur

					

						Une fois la requête effectuée, la réponse JSON reçue
						est déjà traduite en javaScript; elle
						est insérée, après traitement d'un objet, dans l'élément
						HTML prévu à cet effet :
					


					


					
Contenu brut de la réponse

					

				

			


			

				

					

						
Exemple 3 : code HTML dynamique (PHP)

						

							Récupérer du code HTML généré dynamiquement en PHP
						

					

					
    
						
  • Méthode Http : GET
    • 
						
  • 
							Url cible :
							static-content/static-data.json
						
    • 
						
  • Données transmises : aucune
    • 
						
  • Réponse attendue : code HTML
    • 
						
  • 
							Création de la réponse : générée
							dynamiquement en PHP
						
    • 
					


					
Envoi de la requête

					
					

						Code javascript :
						
							$.get('dynamic_content/movies.php',
							onGetResponseExample3);
						
					


					
Réponse du serveur

					


					
Contenu brut de la réponse

					

						Le contenu PHP étant interprété côté serveur, celà
						revient à recevoir du code HTML statique
					

					

				

			


			

				

					

						
Exemple 4 : données JSON dynamiques (PHP/MySQL)

						

							Récupérer des données JSON générées dynamiquement en
							PHP à partir de la base de données
						

					

					
    
						
  • Méthode Http : GET
    • 
						
  • 
							Url cible :
							static-content/static-data.json
						
    • 
						
  • Données transmises : aucune
    • 
						
  • Réponse attendue : code HTML
    • 
						
  • 
							Création de la réponse : générée
							dynamiquement en PHP
						
    • 
					


					
Envoi de la requête

					
					

						Code javascript :
						
							$.getJSON('dynamic_content/trucks.php',
							onGetResponseExample4);
						
					


					
Réponse du serveur

					


					
Contenu brut de la réponse

					

						Le contenu est récupéré en dataBase puis traduit en JSON
						par PHP; il est récupéré en JSON retraduit en
						javaScript.
					

					

				

			


			

				

					

						

							Exemple 5 : poster des données vers un fichier (PHP)
						

						

							Enregistrer dans un fichier côté serveur des données
							provenant du client puis les afficher
						

					

					
    
						
  • Méthode Http : POST
    • 
						
  • Url cible : post-data.php
    • 
						
  • 
							Données transmises : du texte dans le
							corps (body) de la requête
						
    • 
						
  • 
							Réponse attendue : données JSON du
							fichier
						
    • 
						
  • 
							Création de la réponse : générée
							dynamiquement en PHP
						
    • 
					


					
Liste de courses

					

						

							
							
						

					


					
Envoi de la requête

					
					

						Code javascript :
						
							$.post('post-data.php', {data: course},
							onGetResponseExample5);
						
					


					
Réponse du serveur

					
    

					
    Contenu brut de la réponse
    
					
    
						Le contenu est récupéré du fichier par PHP et envoyé au
						client en JSON; le JSON est désérialisé en JavaScript.