AJAX

Correction TP4 AJAX

Un cours complet pour maîtriser Correction TP4 AJAX.

0 chapitres 0 QCM Accès gratuit

Objectifs
- Etre capable de manipuler l’objet XMLHttpRequest de JavaScript..

Exercice 01

Énoncé
- Vous pouvez visualiser l'énoncé de l'application

Solution

<!doctype html>
<html lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Filtre de base First</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript"> function TestXHR() {
       if (window.XMLHttpRequest) var xhr = new XMLHttpRequest();
        else alert("Votre navigateur ne supporte pas XMLHTTPRequest");
         var monDiv = document.getElementById("IdDiv");
          xhr.onreadystatechange = function() { 
            monDiv.innerHTML += xhr.readyState +"<br/>";
             } 
             xhr.open("GET", "db.xml", true); xhr.send(null);
              } 
              </script> 
              </head> 
<body> 
      <form action="">
      <input type="button" value="Envoyer" onclick="TestXHR()" /> 
      <div id="IdDiv"> 

      </div> 
    </form> 
  </body> 
  </html>

Exercice 02

Énoncé
- Vous pouvez visualiser l'énoncé de l'application

Solution

<!doctype html>
<html lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Filtre de base First</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
      <script type="text/javascript"> 
      function TestXHR() { 
        var xhrstatus = new Array(); 
          xhrstatus["200"]="La requête est exécutée avec succès";
          xhrstatus["403"]="Accès interdit (refusé)"; 
          xhrstatus["404"]="Fichier non trouvé"; 
          xhrstatus["500"] = "Erreur interne au serveur"; 
         if (window.XMLHttpRequest) 
         var xhr = new XMLHttpRequest(); 
         else alert("Votre navigateur ne supporte pas XMLHTTPRequest"); 
         var monDiv = document.getElementById("IdDiv"); 
         var monTxt = document.getElementById("IdText"); 
         xhr.onreadystatechange = function() { 
           monDiv.innerHTML += xhr.readyState +"<br/>"; 
           monTxt.value = xhrstatus[xhr.statusText]; 
           alert(xhrstatus[xhr.status]);
           } 
           xhr.open("GET", "db.xml", true); 
           xhr.send(null); } 
           </script> 
           </head> 
           <body>
             <form action=""> 
               <input type="button" value="Envoyer" onclick="TestXHR()" /> 
               <input type="text" value="" id="IdText" size="50"/> 
               <div id="IdDiv"> 
               </div> 
              </form> 
            </body>
             </html>

Exercice 03

Énoncé
- Vous pouvez visualiser l'énoncé de l'application

Solution

<!doctype html>
<html lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Filtre de base First</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script type="text/javascript"> 
       function TestXHR() { 
         var xhrstatus = new Array(); 
         xhrstatus["200"]="la requête est exécutée avec succès"; 
         xhrstatus["403"]="accès interdit (refusé)"; 
         xhrstatus["404"]="fichier non trouvé"; 
         xhrstatus["500"] = "erreur interne au serveur"; 
         if (window.XMLHttpRequest) 
         var xhr = new XMLHttpRequest();
          else alert("Votre navigateur ne supporte pas XMLHTTPRequest"); 
          var monDiv = document.getElementById("IdDiv"); 
          var monTxt = document.getElementById("IdText");
           xhr.onreadystatechange = function() { 
             monDiv.innerHTML += xhr.readyState +"<br/>"; 
             monTxt.value = xhrstatus[xhr.status]; 
             if (xhr.readyState == 4 && xhr.status == 200) { 
               alert(xhr.responseText); 
              } 
              xhr.open("GET", "db.txt", true); xhr.send(null); 
            }
          } 
   </script> 
            </head> 
            <body>
              <form action=""> 
                <input type="button" value="Envoyer" onclick="TestXHR()" />
                <input type="text" value="" id="IdText" size="50"/> 
                <div id="IdDiv"> </div>
              </form> 
            </body>
        </html>

Exercice 04

Énoncé
- Vous pouvez visualiser l'énoncé de l'application

Solution

calculatrice.php

<!doctype html>
<html lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Filtre de base First</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<style>
 fieldset 
	{
		border: 1px solid #ddd !important;
		margin: 0;
		xmin-width: 0;
		padding: 10px;       
		position: relative;
		border-radius:4px;
		background-color:#f5f5f5;
		padding-left:10px!important;
	}	
	
		legend
		{
			font-size:14px;
			font-weight:bold;
			margin-bottom: 0px; 
			width: 35%; 
			border: 1px solid #ddd;
			border-radius: 4px; 
			padding: 5px 5px 5px 10px; 
			background-color: #ffffff;
		}
    #resultat{
      font-size:36px;
			font-weight:bold;
      margin-left: 10px; 
    }
</style>

</head> 
<body> 
  <div class="container"> 
    <div class="row">
    <fieldset class="col-4">
    <legend>Calculatrice</legend>
        <div class="form-group">
          <label for="usr">Premier nombre:</label>
          <input type="text" class="form-control" id="nbr1">
        </div>
        <div class="form-group">
          <label for="pwd">Deuxième nombre:</label>
          <input type="text" class="form-control" id="nbr2">
        </div>
        <button type="button" class="btn btn-lg btn-primary mb-2" onclick="calc('add')">+</button>
        <button type="button" class="btn btn-lg btn-secondary mb-2" onclick="calc('sub')">-</button>
        <button type="button" class="btn btn-lg btn-success mb-2" onclick="calc('mult')">X</button>
        <button type="button" class="btn btn-lg btn-warning mb-2" onclick="calc('div')">/</button>
        <button type="button" class="btn btn-lg btn-info mb-2" onclick="calc('mod')">%</button>

        <div class="form-group">
          <label for="pwd">Résultat:<span id="resultat"></span></label>
        </div>
</fieldset>
</div>
</div>
<script>
    function calc(reqtype){
      var xhr = new XMLHttpRequest();
      var num1= document.getElementById("nbr1").value;
      var num2= document.getElementById("nbr2").value;
      xhr.onreadystatechange = function() {
              if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("resultat").innerHTML = xhr.responseText;
              }
      }
        xhr.open("post","calcul.php","true");
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send("req="+reqtype+"&n1="+num1+"&n2="+num2);

    }
  </script>
  </body> 
  </html>

calcul.php

<?php
$num1=$_REQUEST["n1"];
$num2=$_REQUEST["n2"];
$req=$_REQUEST["req"];


if($req=='add'){
  echo $num1+$num2;
}
elseif($req=='sub'){
  echo $num1-$num2;
}
elseif($req=='mult'){
  echo $num1*$num2;
}
elseif($req=='div'){
  echo $num1/$num2;
}
elseif($req=='mod'){
  echo $num1%$num2;
}
?>

Les méthodes get et post jQuery AJAX

Sommaire du cours AJAX

Correction TP4 AJAX

Sommaire du cours

Autres catégories

Objectifs

Exercice 01

Énoncé

Solution

Exercice 02

Énoncé

Solution

Exercice 03

Énoncé

Solution

Exercice 04

Énoncé

Solution

calculatrice.php

calcul.php

Sommaire du cours AJAX