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)
