Prototype JavaScript Framework

Meilleur manuel et notes pour le développeur : prototype.js

Type de navigateur supporter

Microsoft Internet Explorer for Windows, version 6.0 and higher
Mozilla Firefox 1.0/Mozilla 1.7 and higher
Apple Safari 1.2 and higher

Les états de la requête

Il y a 5 états qui donne des informations sur la requête:

0	Non initialisé	La méthode open n'a pas encore été appelée	onCreate
1	Chargement	Le premier appel HTTP est en cours
2	Chargé	Les entêtes HTTP ont été reçues
3	Interactif	Le fichier est en cours de chargement
4	Complété	Le chargement de la ressource est complétée	onComplete

AJAX Indicateurs et icônes d'activité

Insérer entre les balises <body> </body> de la page, à un endroit stratégiquement et visuellement:

<div id="AjaxChargement" style="display: none;">Chargement...</div>

Mettre dans la partie réservé au javacript :

var myGlobalHandlers = {    
    onCreate: function(){
		Element.show('AjaxChargement');
    },
	onComplete: function() {
		if(Ajax.activeRequestCount == 0){
        	Element.hide('AjaxChargement');
		}
	 }
};

Insérer dans l'appel de la fonction ajax:

Ajax.Responders.register(myGlobalHandlers);

Mettre dans la partie CSS

#AjaxChargement{
	background-color: red;
	color: black;
	border: 1px solid white;
  font-weight: bolder;
	display: block;
	position: absolute;
	text-decoration: none;
	background-image:url(AjaxChargement.gif); 
}

Il est possible de retourner les erreurs, comme par exemple les 404 avec Ajax.

Par contre, en cas d'exception, Ajax n'est pas très bavard et ne revoie aucun message!

Il est bien de personnaliser les messages à retourner pour indiquer à l'utilisateur la démarche à suivre.

function reportError(t) {
	Element.hide('AjaxChargement');
	alert('Error ' + t.status + ' -- ' + t.statusText);
}
 
function reportException() {
	Element.hide('AjaxChargement');
	alert('Exception en cours');
}

function appelAjax(){
    var vParams = 'myAttribut=valeur';
 
	  Ajax.Responders.register(myGlobalHandlers);
	  urlAjaxServlet=http://localhost:8080/MyAjaxServlet
 
    var myAjax = new Ajax.Request( urlAjaxServlet, { method: 'post', parameters: vParams, onComplete: showResponse, asynchronous: true, onFailure: reportError, onException: reportException });
 
}
 
function showResponse(){
    alert("ca marche!!!");
}

Utilisation de texte

responseText pour récupérer du texte.

function showResponse(originalRequest)
	{
		$('resultatAjax').value = originalRequest.responseText;
	}
 
<textarea id=resultatAjax cols=60 rows=10></textarea>

On peut aussi utiliser innerHTML

   $("resultatAjax").innerHTML = "Received:" + originalRequest.responseText;

Utilsation de XML et du DOM javascript

responseXML pour récupérer un objet document XML.

<?xml version="1.0" encoding="ISO-8859-1"?>
<reponse>
 		<fruits>
   		<pomme>
   			La pomme est verte
   		</pomme>
   		<fraise couleur="rouge" />
		</fruits>
</reponse>

 function getXmlNodeValue(xmlNode) {
	var returnValue;
	try {
		// Mozilla, FF
		returnValue = xmlNode.textContent;
	} catch (e) {}
 
	if (returnValue == undefined) {
		// IE
		returnValue = xmlNode.text;
	}
	return returnValue;
}
 
 
 function showResponse(originalRequest){
		var vTagResponse = originalRequest.responseXML.documentElement;
		var vFruits       = vTagResponse.getElementsByTagName('fruits').item(0);
 
		var couleurPomme   = getXmlNodeValue(vFruits.getElementsByTagName('pomme')[0]);
 		var couleurFraise = vFruits.getElementsByTagName('fraise')[0].getAttribute('couleur');
}

Exécuter un upload avec Ajax et prototype.js, pour éviter d'avoir un rechargement de page, et continuer à travailler sur la même page. La fonction Ajax permet exécuter des actions sur le serveur pendant l'upload du fichier, puis de faire un traitement sur celui ci. Au retour de la fonction, l'on télécharge ce fichier au retour. Cette méthode utilise une iframe, pour capturer le message retour de la servlet d'upload. Nous ne gérons pas l'update du téléchargement dans cette exemple.

<script>    
var vFluxNomFichier = '';
var urlPieceJointeDownloadServlet = '<%=request.getContextPath()%>/DownloadServlet';
function submitUpload() {   
	var form1    = document.forms[0];
	var vAction = '<%=request.getContextPath()%>/UploadServlet';
 
	document.forms[0].target = 'UploadTarget1';
	document.forms[0].action = vAction;
 
	var vNomFile = form1.document_file.value;        
	    vNomFile = vNomFile.substring(vNomFile.lastIndexOf("\\")+1);
 
	vFluxNomFichier = vNomFile;
	form1.submit();
 
        //Lancement AJAX 
	var vParams = 'nomFichier=' + vNomFile;
	var urlAjaxServlet = '<%=request.getContextPath()%>/AjaxServlet';
	Ajax.Responders.register(myGlobalHandlers);
 
	var myAjax = new Ajax.Request( urlAjaxServlet , {method: 'post', parameters: vParams, onComplete: showResponseUpload, asynchronous: true, onFailure: reportErrorUpload, onException: reportExceptionUpload} ); 
}
 
function showResponseUpload(){
    var urlPage = urlPieceJointeDownloadServlet +'?nomFichierPieceFichier=' + vFluxNomFichier;
    location.href = urlPage; 
}
 
function reportExceptionUpload(){
   alert('message Erreur');
}		
 
function reportErrorUpload(){
   reportExceptionUpload();
}			
</script>

<form action="savePieceJointe.do" enctype="multipart/form-data" method="POST" >
<table>
	<tr>
		<td>Pièce jointe : </td>
		<td>                                                 
                    <iframe id="UploadTarget1" name="UploadTarget1" src="" style="width:0px;height:0px;border:0" ></iframe>
                    <input name="document_file" id="document_file" type="file" value="" size="50" />                   
         	</td>
		<td> </td>
                <td> </td>
      </tr>
      <tr>
              <td></td><td></td>
              <td  align="center"> 
                     <a  href="#" class="button" onClick="submitUpload();return false;">
                          Attacher le fichier
                     </a>
              </td> 
      </tr>
</table>
</form>