Newsgroup: it.comp.lang.javascript
Titolo: le mie piccole funzioni per ajax

Da qualche mese ho iniziato ad usare ajax con php... ho chiesto spesso 
aiuto su questo e su altri ng e ho scopiazzato da tutorial e blog...
Alla fine copiando e copiando ho messo su un paio di funzioni che 
sembrano funzionare!! Le posto nella speranza che a qualcuno siano utili 
  e magari che qualcuno posti delle migliorie.
Ecco qua:
Il tutto presume questa dichiarazione css (nel foglio di stile o dove 
utile) relativa al box da visualizzare con l'iconcina che indica che 
ajax sta lavorando. Questo è il css:
.ajax_loading {
   position: absolute;
   min-width: 64px;
   min-height: 64px;
   background: #F0F0F0;
   border: 1px solid #C0C0C0;
   background-image: url(css_images/ajax-loading.gif);
   background-position: center center;
   background-repeat: no-repeat;
   z-index: 100;
   opacity: 0.70;
}
questa funzione serve per creare il box dell'iconcina "ajax loading":
function ShowAjaxLoading (div_id) {
   var MainDiv = document.getElementById(div_id);
   var AjaxLoadingDiv = document.createElement("div");
   var curleft = curtop = 0;
   obj=MainDiv;
   if (obj.offsetParent) {
     do {
       curleft += obj.offsetLeft;
       curtop += obj.offsetTop;
     } while (obj = obj.offsetParent);
   }
   AjaxLoadingDiv.id = "ajax_loading_div";
   AjaxLoadingDiv.className= "ajax_loading";
   AjaxLoadingDiv.style.top = curtop + MainDiv.offsetTop;
   AjaxLoadingDiv.style.left = curleft + MainDiv.offsetLeft;
   AjaxLoadingDiv.style.width = MainDiv.offsetWidth+"px";
   AjaxLoadingDiv.style.height = MainDiv.offsetHeight+"px";
   AjaxLoadingDiv.style.visibility = "visible";
   var MainDivParent = MainDiv.parentNode;
   MainDivParent.appendChild(AjaxLoadingDiv);
}
quest'altra funzione elimina il box ajax loading.
function HideAjaxLoading (div_id) {
   var MainDiv = document.getElementById(div_id);
   var AjaxLoadingDiv = document.getElementById("ajax_loading_div");
   var MainDivParent = MainDiv.parentNode;
   MainDivParent.removeChild(AjaxLoadingDiv);
}
Questa è la funzione principale.
1) scripttocall è lo script php (con tanto di parametri) da chiamare in 
background
2) div_id è l'id del div della pagina in cui verrà piazzato il risultato 
(in termini di html) dello script chiamato
ad esempio:
abbiamo
<div id="box_saluti"></div>
e saluta.php così scritto:
<?
//saluta.php
echo 'Ciao bello!';
?>
se chiamiamo ajaxFunction('saluta.php','box_saluti')
all'interno del div 'box_saluti' verrà visualizzato "Ciao bello!":
Ecco la funzione:
function ajaxFunction(scripttocall,div_id){
   var ajaxRequest;  // The variable that makes Ajax possible!
   var AjaxLoadingDivIsShown=false;
 
   try{
     // Opera 8.0+, Firefox, Safari
     ajaxRequest = new XMLHttpRequest();
   } catch (e){
     // Internet Explorer Browsers
     try{
       ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) {
       try{
	ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (e){
	// Something went wrong
	alert("Your browser broke!");
	return false;
       }
     }
   }
   // Create a function that will receive data sent from the server
   ajaxRequest.onreadystatechange = function(){
     var response = ajaxRequest.responseText;
     if (ajaxRequest.readyState==4 && ajaxRequest.status==200) {
       if (response == '$command=window.reload;') {
         window.location.reload();
       } else {
         var ajaxDisplay = document.getElementById(div_id);
         ajaxDisplay.innerHTML = response;
         HideAjaxLoading(div_id);
       }
     } else {
       if (ajaxRequest.readyState==1 && AjaxLoadingDivIsShown==false) {
         var ajaxDisplay = document.getElementById(div_id);
         ShowAjaxLoading(div_id);
         AjaxLoadingDivIsShown=true;
       }
     }
   }
   ajaxRequest.open("GET", scripttocall, true);
   ajaxRequest.send(null);
}
Quest'ultima funzione serve per usare, all'interno di un div, un form 
che lavori in background.
Si crea il form e nel bottone di conferma, nell'opzione onclick si 
richiama questa funzione. I parametri sono quelli della precedente: 
input_form è l'id del form.
function ajaxSubmitPostForm(input_form,scripttocall,div_id){
   var ajaxRequest;  // The variable that makes Ajax possible!
   try{
     // Opera 8.0+, Firefox, Safari
     ajaxRequest = new XMLHttpRequest();
   } catch (e){
     // Internet Explorer Browsers
     try{
       ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) {
       try{
         ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (e){
	// Something went wrong
	alert("Your browser broke!");
	return false;
       }
     }
   }
 
   var num_elements = document.getElementById(input_form).elements.length;
   input_string= "";
   for(var i = 0; i < num_elements; i++){
     if(i < num_elements-1){
       input_string += 
document.getElementById(input_form).elements[i].name+"="+encodeURIComponent(document.getElementById(input_form).elements[i].value)+"&";
     } else  {
       input_string += 
document.getElementById(input_form).elements[i].name+"="+encodeURIComponent(document.getElementById(input_form).elements[i].value);
     }
   }
   // Create a function that will receive data sent from the server
   ajaxRequest.onreadystatechange = function(){
     var response = ajaxRequest.responseText;
     if (ajaxRequest.readyState==4 && ajaxRequest.status==200) {
       if (response == '$command=window.reload;') {
         window.location.reload();
       } else {
         var ajaxDisplay = document.getElementById(div_id);
         ajaxDisplay.innerHTML = response;
       }
     } else {
       if (ajaxRequest.readyState==1) {
         var ajaxDisplay = document.getElementById(div_id);
         ajaxDisplay.innerHTML ='<div class="ajax_loading"></div>';
       }
     }
   }
   ajaxRequest.open("POST",scripttocall,true);
 
ajaxRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded; 
charset=UTF-8");
   ajaxRequest.send(input_string);
}
Spero di non avervi annoiato!
Saluti a tutti.

      var response = ajaxRequest.responseText;
Questo mi è saltato all'occhio
perchè recuperi ajaxRequest.responseText
prima di readyState == 4 e status == 200
Ciao.

 prima di readyState == 4 e status == 200
perché sono distratto!

 
dove trovo un esempio di json
(salva form) ?
uso php5 e javascript
molto banale
sono molto INCAZZATO perche ajax non fa l'upload dei file se non con
stratagemmi assurdi

 stratagemmi assurdi
http://forum.html.it/forum/showthread.php?s=&threadid=1177950
Ciao.

Dai pure un occhio a questo thread
http://www.sitepoint.com/forums/showthread.php?t=529226
nell'esempio c'è Jquery ma basta toglierlo ;)
in validator.values ci sono tutti i valori che puoi spedire
con Json.
Ri-ciao m ma siete nottambuli ;)

Ho ritrovato il codice senza Jquery
http://forum.html.it/forum/showthread.php?s=&threadid=1169563&highlight=validator+system
(nel primo c'è anche l'esempio di utilizzo)
sono ancora addormentato stamani !

Un po di pubblicità
http://www.blogial.net/index.php?p=3
nella form per i commenti ho utilizzato
quel sistema.
Ri-ciao.