Journal de bord
PrécédentSuivant

71. TP - Ajax

71.1. Exercice

L'objectif est de réaliser une application permettant de vérifier les données d'un formulaire.

Pour cela, créez une page web avec deux champs :

L'objectif est de tester si le paramètre est bien du type voulu. Le type pourra être :

Le test de validité sera fait en php.

Une fois que cette application fonctionne, vous rendrez la connexion invisible en utilisant AJAX. Vous récupérerez le résultat envoyé par le script PHP pour savoir si la variable est bien du type voulu.

S'il vous reste du temps, vous pouvez modifier votre script pour renvoyer un fichier XML simple contenant, en plus du résultat du test, le message d'erreur.

71.2. Implémentation

71.2.1. Code côté Client

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title></title>
		<style>
			#isValid.true {
				width: 15px;
				height: 15px;
				background-color: green;
			}
			#isValid.false {
				width: 15px;
				height: 15px;
				background-color: red;
			}
		</style>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<script type="text/javascript">

 
			function getXMLHttpRequest() {
				if (window.XMLHttpRequest)
					return new XMLHttpRequest();
				else if (window.ActiveXObject)
					new ActiveXObject("Microsoft.XMLHTTP");
				else
					return null;
			}
			
			function checkDataType(data, type) {
				var url = "http://192.168.5.53/checkDataType.php?data=" + data + "&type=" + type;
				var xhr = getXMLHttpRequest();

				xhr.onreadystatechange = function() {
					if(xhr.readyState  == 4) {
						if(xhr.status  == 200) {
							document.getElementById("isValid").className = xhr.responseText;
						} else {
							alert('Error code : ' + xhr.status); 
						}
					}
				}
				xhr.open("GET", url, true);
				xhr.send();
			}
 

		</script>
	</head>
	<body>
		<form method="GET" name="form" action="javascript:checkDataType(this.form.data.value, this.form.type.value);" >
			<table>
				<tr>
					<td><label>Data</label> : </td>
					<td><input type="text" name="data" onKeyUp="javascript:this.form.submit();" /></td>
				</tr>
				<tr>
					<td><label>Type</label> : </td>
					<td>
						<select name="type" onChange="javascript:this.form.submit();">
							<option value="integer">Integer</option>
							<option value="boolean">Boolean</option>
							<option value="string">String</option>
							<option value="date">Date</option>
							<option value="phone">Phone number</option>
						</select>
					</td>
				</tr>
				<tr>
					<td><label>Valid ? : </label></td>
					<td><div id="isValid" class=""></div></td>
				</tr>
			</table>
		</form>
	</body>
</html>

71.2.2. Code côté Serveur

<?php
	header("Access-Control-Allow-Origin: *");

	if (!isset($_GET["type"]) or !isset($_GET["data"]))
		die();

	$data = $_GET["data"];
	$type = $_GET["type"];

	switch ($type) {
		case "date":
			echo (preg_match("/[0-9]{2}[\.\/-\s]{1}[0-9]{2}[\.\/-\s]{1}[0-9]{2,4}$/", $data)) ? "true" : "false";
			break;
		case "phone":
			echo (preg_match("/^([0-9]{2}[\.\/-\s]?){4}[0-9]{2}$/", $data)) ? "true" : "false";
			break;
		case "integer":
			echo (preg_match("/^[0-9]+$/", $data)) ? "true" : "false";
			break;
		case "string":
			echo (!preg_match("/^[0-9]*$/", $data)) ? "true" : "false";
			break;
		case "boolean":
			echo ($data == "true" || $data == "false") ? "true" : "false";
			break;
		default:
			break;
	}
?>

Exemple de résultat :

Figure 60. Ajax en action

Les fichiers peuvent être directement téléchargeables grâce à ces liens :

PrécédentSommaireSuivant
Utiliser AJAX Projet - Ajax