Admin CliCours
Compléments sur Javascript et Ajax, bibliothèque Jquery, tutoriel apprendre jquery document PDF.
Présentation de Ajax
Spécifications de XMLHttpRequest
Exemple en Javascript
Résumé sur Javascript et Ajax
PRÉSENTATION DE AJAX
-ORIGINES
-FONCTION XMLHTTPREQUEST CRÉÉE PAR MICROSOFT EN 1999 2 récupération par un script, d’un texte distant via le protocole HTTP, au format XML ou non, réalisée en mode asynchrone.
-AVANTAGES POUR UNE APPLICATION DANS UNE PAGE WEB récupération d’information distante sans (re)chargement de page,économie par réduction du volume des échanges avec le serveur.
-TECHNIQUES RÉUNIES DANS L’APPELLATION AJAX scripts en Javascript avec échanges en XML via XMLHttpRequest,application notamment dans les applications Internet (RIA 3)
-GÉNÉRALISATION DANS LES NAVIGATEURS RÉCENTS incompatibilités existantes et normalisation en cours par le W3C
SPÉCIFICATIONS DE XMLHTT PREQUEST
EXEMPLE D’UTILISATION DE AJAX
-CAS D’UN FICHIER DISTANT (SUR LE MÊME SITE)
-CAS D’UN FICHIER SITUÉ SUR LE POSTE
EXEMPLE D’UTILISATION DE AJAX : CODE XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Essai avec Ajax</title>
<style type="text/css"><!--
#contenu, #traces
{ border: gray solid thin; padding: 1em; margin: 1em 0; }
#traces p { font-weight: bold; margin: 0; }
--></style>
</head>
<body onload="document.forms['f'].elements['zurl'].value =
window.location;">
<h1>Essai avec Ajax</h1><hr />
<form action="" onsubmit="return false;" id="f" >
<p>Fichier
<input type="file" name="zfichier" id="zfichier" size="80" />
<input type="button" value="Charger"
id="boutonfichier" onclick=
"lancerRequeteAjax(this.form.elements['zfichier'].value)" />
</p>
<p>URL
<input type="text" name="zurl" id="zurl" size="90" value="" />
<input type="button" value="Charger" id="boutonurl" onclick=
"lancerRequeteAjax(this.form.elements['zurl'].value)" /></p>
</form>
<div id="traces">
<noscript>Désolé ! pas de javascript disponible.</noscript>
</div>
<div id="contenu"></div>
<hr />
<address>MC 2 XII 2009</address>
<script type="text/javascript" src="essai-ajax.js"></script>
</body>
</html>
EXEMPLE D’UTILISATION DE AJAX : SCRIPT
/* essai-ajax.js - MC 2 XII 2009 */
function lancerRequeteAjax(adresse) {
// chargement via Ajax du contenu en adresse,
// traces d'avancement dans la division 'resultat'
// et si recupere, contenu mis dans la division 'contenu'
var xhr;
// controle minimal sur l'adresse
if (! adresse) {
return;
}
// verification de la compatibilite avec DOM
if (! domhtmldispo('1.0') ) {
window.alert('Anomalie : DOM inutilisable !');
return;
}
// nettoyages
supprimerContenu('traces');
supprimerContenu('contenu');
// creation de l'objet associe a la requete
xhr = false; // a priori
if ('function' == (typeof window.XMLHttpRequest) ) {
xhr = new XMLHttpRequest();
} else if ('function' == (typeof window.ActiveXObject) ) {
// cas de Internet explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch(erreur) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch(erreur) {
xhr = false;
}
}
}
if (! xhr) {
ajoutContenu('P', "Anomalie : pas d'Ajax !", 'traces');
return;
}
………
Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)Compléments sur Javascript et Ajax, bibliothèque Jquery (391.03 KO) (Cours PDF)
