Js AJAX

De The Linux Craftsman
Révision datée du 3 mars 2016 à 12:32 par Jc.forton (discussion | contributions) (Page créée avec « =Introduction= L'architecture informatique Ajax (acronyme d'Asynchronous JavaScript and XML) permet de construire des applications Web et des sites web dynamiques interact... »)
(diff) ← Version précédente | Voir la version actuelle (diff) | Version suivante → (diff)
Aller à la navigation Aller à la recherche

Introduction

L'architecture informatique Ajax (acronyme d'Asynchronous JavaScript and XML) permet de construire des applications Web et des sites web dynamiques interactifs sur le poste client en se servant de différentes technologies ajoutées aux navigateurs web entre 1995 et 2005.

Ajax combine JavaScript, les CSS, JSON, XML, le DOM et le XMLHttpRequest afin d'améliorer maniabilité et confort d'utilisation des applications internet riches (RIA) 1,2 :

  • DOM et JavaScript permettent de modifier l'information présentée dans le navigateur en respectant sa structure ;
  • l'objet XMLHttpRequest sert au dialogue asynchrone avec le serveur Web ;
  • XML structure les informations transmises entre serveur Web et navigateur.

Outre le XML, les échanges de données entre client et serveur peuvent utiliser d'autres formats, tels que JSON.

Les applications Ajax fonctionnent sur tous les navigateurs Web courants : Google Chrome, Safari, Mozilla Firefox, Internet Explorer, Konqueror, Opera, etc.

Wikipedia


Nous allons utiliser l'objet XmlHttpRequest (XHR) avec une structure des informations en JSON. La partie serveur sera en Php et la partie cliente en Javascript / HTML / CSS.

Pré-requis

Pour développer en PHP, il ne faut pas oublier d'installer les paquetages suivants :

# yum -y install php httpd

Paramétrez votre serveur HTTPD.

Partie serveur

Structure du projet

Créez l'arborescence suivante dans votre projet :

Projet user js php.png

Objet user

Nous allons créer un objet User qui contiendra les attributs suivants:

  • nom;
  • prenom;
  • age;

Cet objet implémentera une fonction toJson qui permettra de récupérer la chaine de caractères représentant l'objet.

Cela nous donne le contenu suivant pour le fichier user.php:

<?php

class User{
	
  public $nom, $prenom, $age;
	
  public function User($nom, $prenom, $age){
    $this->nom = $nom;
    $this->prenom = $prenom;
    $this->age = $age;
  }
	
  public function toJson(){
    return json_encode($this);
  }

}

Web Service RESTful en PHP

Nous allons faire une simple page qui répond au GET ainsi qu'au POST. GET sert à récupérer des informations et POST sert à créer / insérer des informations. N'hésitez pas à relire le cours !

Créez une page user.php à la racine de votre serveur web qui contient les lignes suivantes: