Sergio Grandrus
a- a+

Un carrello elettronico per l'e-commerce in Ajax

Una delle applicazioni più naturali della tecnica AJAXè, secondo me, l'e-commerce. In particolar modo hosempre odiato l'aggiornarsi della paginaall'immissione o alla cancellazione di un prodotto dalcarrello.

Peggio ancora quei siti che ti rimandano ad una paginadedicata per farti vedere cosa hai nel carrello (decisamenteweb 1.0!). Sfruttiamo AJAX per questo scopo ma anche per lanavigazione tra le categorie di prodotti.

Un esempio funzionante di quello che sto per spiegare lotrovate qui

I cuori dello script sono due: lib_ajax.jse process_ajax.asp

Il primo file contiene tutte le funzioni javascript chegestiscono le chiamate/risposte alla/dalla pagina dielaborazione process_ajax.asp.
La funzione gestisciCarrello
  

function gestisciCarrello(itemID,custID,act){  // branch for native XMLHttpRequest object  if (window.XMLHttpRequest) {    richiesta = new XMLHttpRequest();    //alert('sono entrato nella funzione normale')    var postData = "itemID=" +itemID+ "&custID=" +custID+ "&act=" +act;    richiesta.open("POST" , "process_ajax.asp" , true);    richiesta.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");    richiesta.setRequestHeader("Content-length" , postData.length);    richiesta.setRequestHeader("Connection" , "close");    richiesta.onreadystatechange = Response;    richiesta.send(postData);    // branch for IE/Windows ActiveX version  } else if (window.ActiveXObject) {    richiesta = new ActiveXObject("Microsoft.XMLHTTP");    //alert('sono entrato nella funzione Microsoft')    if (richiesta) {var postData = "itemID=" +itemID+ "&custID=" +custID+ "&act=" +act;richiesta.open("POST" , "process_ajax.asp" , true);richiesta.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");richiesta.setRequestHeader("Content-length" , postData.length);richiesta.setRequestHeader("Connection" , "close");richiesta.onreadystatechange = Response;richiesta.send(postData);    }  }}


 Si occupa di creare gli oggetti XHR e di postare allapagina di processo i dati che dobbiamo elaborare(ID delprodotto e del cliente) con l'azione da eseguire(ADD,REMOVE,EMPTY,ONLOAD). Notiamo che usiamo sempre sial'oggetto nativo che la versione ActiveX per avere lamassima compatibilità.
Notiamo anche che uso il metodo POST e non il classicoGET.

La funzione Response()
  

function Response() {  //alert('sono entrato nella funzione Response')  if (richiesta.readyState == 4) {    if(richiesta.status == 200) {document.getElementById('carrello').innerHTML = richiesta.responseText;    } else {var results = "C'è stato un errore. Contattare il supporto";document.getElementById('carrello').innerHTML = results;    }  }}


 Si attiva quando c'è un cambiamento dellostatus della richiesta e 'trasporta' la risposta inHTML nel div appropriato.
In realtà è questo il grande vantaggio diAJAX. Le risposte possono essere testuali ma anche in HTML eil comando innerHTML ci permette di piazzare il tutto nel divgiusto.

Nel file troviamo anche la funzione go().
  

function go(url){  document.ProcessForm.url.value=url;  document.ProcessForm.act.value='URL';  document.ProcessForm.submit();}


 Questa serve per navigare tra le varie pagine inquanto dobbiamo trasportarci alcuni valori come l'ID delcliente ecc., e così postiamo questi valori da unapagina all'altra.

Le funzioni go_list e Response_lista hannola stessa struttura di quelle viste precedentemente per ilcarrello, con l'unica differenza che servono pereffettuare le query sulle categorie di prodotti e parsare ilrisultato nel div assegnatogli.
Il vantaggio è che anche la navigazione fra categorienon richiede un ricaricamento della pagina.

Il file process_ajax.asp è invecel'interfaccia col database votata al carrello. In questocaso ho utilizzato come db Access che non èconsigliabile per il commercio elettronico se non di piccoledimensioni.
Il file è molto semplice nella struttura. Esso inbase all'azione che passo attraverso javascript(ADD,REMOVE,EMPTY,ONLOAD) rispettivamente mi permette di(aggiungere un prodotto, rimuoverne uno, svuotare ilcarrello, controllare lo stato del carrello).

Tutto il resto dello script è ordinariaamministrazione.

Adesso un po' di note:
 

  1. per la parte squisitamente e-commerce ho presto spunto da script trovati in rete (mi sembra da qualche link su ASPfaq e su HOTScripts)
  2. è possibile trovare qualche incongruenza nei file che rendo pubblici perchè questo carrello fa parte di un progetto più ampio che porto avanti quando ho tempo
  3. non c'è la parte di amministrazione dei prodotti per i motivi di cui al punto 2
  4. per far funzionare il tutto bisogna variare i percorsi al db a seconda delle proprie esigenze (nei file "/admin/cn.asp" e in "lista_prodotti.asp")
  5. lo script è usabile liberamente (e ci mancherebbe) ma gradirei venire a conoscenza di eventuali migliorie delle funzioni AJAX e sul parsing del HTML nelle pagine (ho avuto problemi con le lettere accentate e con alcuni segni/simboli)
  6. non mi stancherò mai di dire che tutto quello che è stato fatto con Classic ASP è riproducibile con qualsiasi linguaggio server side