Category Archives: ajax

PHP AJAX asynchronous file upload

L'upload di file asynchrono è uno delle richieste maggiori nelle applicazioni web basate su ajax. La classe standard di AJAX (XmlHttpRequest) non ha la capacità di processare p inviare file da una finestra di dialogo (input type="file"). Questo articolo contiene un esempio du applicazione (trivial file-sharing service, come rapidshare, megaupload o yousendit) che usa embedded frames (IFRAME) per l'upload di file. Mentre un file è uplodato nel frame hidden ,l'utente puo accedere ala pagina web.

http://www.anyexample.com/programming/php/php_ajax_example__asynchronous_file_upload.xml

Eventi javascript usati con ajax

  • onabort Occurs when the user aborts an action
  • onblur Occurs when an element loses the input focus
  • onchange Occurs when data in a control, such as a text field,changes
  • onclick Occurs when the user clicks an element
  • ondblclick Occurs when the user double-clicks an element
  • ondragdrop Occurs when the user drags and drops an element
  • onerror Occurs when there’s been a JavaScript error
  • onfocus Occurs when an element gets the focus
  • onkeydown Occurs when the user presses down on a key
  • onkeypress Occurs when the user presses a key
  • onkeyup Occurs when the user releases a key
  • onload Occurs when the page loads
  • onmousedown Occurs when the user presses down a mouse button
  • onmousemove Occurs when the user moves the mouse
  • onmouseout Occurs when the user moves the cursor away from an element
  • onmouseover Occurs when the user moves the cursor over an element
  • onmouseup Occurs when the user releases a mouse button
  • onreset Occurs when the user clicks a Reset button
  • onresize Occurs when the user resizes an element or page
  • onsubmit Occurs when the user clicks a Submit button
  • onunload Occurs when the browser unloads a page and moves to another page

Le proprieta dell’oggetto XMLHttpRequest

• onreadystatechange
– Event handler that fires at each state change
– You implement your own function that handles this
• readyState – sato corrente della richiesta
– 0 = uninitialized
– 1 = loading
– 2 = loaded
– 3 = interactive (some data has been returned)
– 4 = complete
• status
– HTTP Status ritornato dal server: 200 = OK
• responseText
– String version dei dati ritornati dal server
• responseXML
– XML DOM document dei dati ritornati
• statusText
– Testo dello status ritornato dal server

I metodi dell’oggetto XMLHttpRequest

• open(“method”, “URL”)
• open(“method”, “URL”, async, username, password)
– Assegna URL di destinazione, metodi, etc.
• send(content)
– Invia una richiesta includendo una stringa o un oggetto DOM
• abort()
– Termina richiesta corrente
• getAllResponseHeaders()
– Ritorna headers (labels + valuori) come una stringa
• getResponseHeader(“header”)
– Ritorna un valore di un dato header
• setRequestHeader(“label”,”value”)
– Setta header di richiesta prima di inviare

Realizzare una chat con php e ajax

Obiettivo
In questo articolo tratteremo come creare realizzare una chat con php e ajax

Articolo
La tabella di un database mysql che memorizzera' i messaggi e' cosi composta:

CREATE TABLE 'messaggi' (
'id' int(11) NOT NULL auto_increment,
'utente' varchar(30) NOT NULL default '',
'testo' varchar(255) NOT NULL default '',
PRIMARY KEY ('id')
) TYPE=MyISAM;

Cominciamo a creare la pagina php, "gestisci.php", che mostrera' i messaggi e inserira' un messaggio nuovo

<script src="ajax.js"></script>
<?
$user='root';
$password='';
$host='localhost';
$db="prova";
?>

<?
if($_GET['op']=="ins"){
$testo=$_GET['testo'];
$utente=$_GET['utente'];
mysql_connect($host,$user,$password)or die("non riesco a connettermi");
mysql_select_db("$db")or die("non riesco selezionare il database");
$dati=mysql_query("insert into messaggi(utente,testo) values('$utente','$testo')");
}
?>

<?
mysql_connect($host,$user,$password)or die("non riesco a connettermi");
mysql_select_db("$db")or die("non riesco selezionare il database");
$dati=mysql_query("select * from messaggi order by id desc limit 15");
while($array=mysql_fetch_array($dati)){
echo"<b>$array[utente]</b>: $array[testo]<br>";
}
?>

Adesso quello che dobbiamo fare, e' creare la pagina che contiene il modulo che invia i dati alla pagina "gestisci.php"
e che mostrera' i risultati della ricerca

<html>
<script src="ajax.js"></script>
<body onload="javascript:inviadati('','','');">

<div id="dati"></div><br>
<form name="theform">
<textarea rows=4 cols=40 name="testo"></textarea>
<br>
utente<input type="text" name="utente">

<input type="button" onclick="javascript:inviadati(document.theform.utente.value,document.theform.testo.value,'ins');" value="invia">

</form>
</body>
</html>

e per ultimo vediamo i file "ajax.js" che contiene le funzioni per far funzionare ajax

function createObject() {
var tipo_richiesta;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
tipo_richiesta = new ActiveXObject("Microsoft.XMLHTTP");
}else{
tipo_richiesta = new XMLHttpRequest();
}
return tipo_richiesta;
}

var http = createObject();

function inviadati(valore1,valore2,operazione) {
http.open('get', 'gestisci.php?utente='+valore1+'&testo='+valore2+'&op='+operazione);
http.onreadystatechange = handleResponse;
http.send(null);
}

function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('dati').innerHTML = response;
}
}

Un motore di ricerca con php e ajax

Obiettivo
In questo articolo tratteremo come creare un motore di ricerca di informazioni da una tabella mysql con php e ajax

Articolo
Supponiamo di voler cercare dei dati da una tabella di un database mysql cosi composta:

CREATE TABLE 'news' (
'id' int(11) NOT NULL auto_increment,
'data' varchar(10) NOT NULL default '',
'testo' varchar(255) NOT NULL default '',
PRIMARY KEY ('id')
) TYPE=MyISAM;

Cominciamo a creare la pagina php, vedi.php, che cerchera' i dati nella nostra tabella

<?
$user='root';
$password='';
$host='localhost';
$db="definitivo";

$word=$_GET['testo'];

mysql_connect($host,$user,$password)or die("non riesco a connettermi");
mysql_select_db("$db")or die("non riesco selezionare il database");

$dati=mysql_query("select * from mienews where testo like '%$word%'");
$numrows=mysql_num_rows($dati);
if($numrows>0){
while($array=mysql_fetch_array($dati)){
echo"<b>$array[data]</b> $array[testo]<br><br>";
}
}
else echo"Nessun risultato";
?>

Adesso quello che dobbiamo fare, e' creare la pagina che contiene il modulo che invia i dati alla pagina vedi.php
e che mostrera' i risultati della ricerca

<html>
<body>
<script>
function createObject() {
var tipo_richiesta;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
tipo_richiesta = new ActiveXObject("Microsoft.XMLHTTP");
}else{
tipo_richiesta = new XMLHttpRequest();
}
return tipo_richiesta;
}

var http = createObject();

function inviadati(valore) {
//image progress
var par = window.parent.document;
var images = par.getElementById('dati');
var new_div = par.createElement('div');
var new_img = par.createElement('img');
new_img.src = 'indicator.gif';
new_div.appendChild(new_img);
images.appendChild(new_div);
http.open('get', 'vedi.php?testo='+valore);
http.onreadystatechange = handleResponse;
http.send(null);
}

function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('dati').innerHTML = response;
}
}
</script>

<form name="theform">
<input type="text" name="word">
<input type="button" onclick="javascript:inviadati(document.theform.word.value);" value="cerca">
</form>
<br>
<div id="dati"></div>
</body>
</html>

Inviare una mail con php e ajax

Obiettivo
In questo articolo tratteremo come inviare una email da un modulo di contatti con php e ajax

Cominciamo a creare la pagina php, invia.php, che inviera' la mail

<?
$mittente="indirizzo_mittente@dominio.it";
$email=$_GET['email'];
$oggetto=$_GET['oggetto'];
$testo=$_GET['testo'];
if(@mail($email,$oggetto,$testo,$mittente)) {
echo "La mail stata inoltrata con successo a $email";
} else {
echo "Si sono verificati dei problemi nell'invio della mail.";
}
?>

Adesso quello che dobbiamo fare, e' creare la pagina che contiene il modulo che invia i dati alla pagina invia.php
e che mostrera' i risultati dell'invio

<html>
<body>
<script>
function createObject() {
var tipo_richiesta;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
tipo_richiesta = new ActiveXObject("Microsoft.XMLHTTP");
}else{
tipo_richiesta = new XMLHttpRequest();
}
return tipo_richiesta;
}

var http = createObject();

function inviadati(valore) {
//image progress
var par = window.parent.document;
var images = par.getElementById('dati');
var new_div = par.createElement('div');
var new_img = par.createElement('img');
new_img.src = 'indicator.gif';
new_div.appendChild(new_img);
images.appendChild(new_div);
http.open('get', 'invia.php?testo='+valore+'&oggetto='+oggetto+'&email='+email);
http.onreadystatechange = handleResponse;
http.send(null);
}

function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('dati').innerHTML = response;
}
}
</script>

<form name="theform">
Email dest <input type="text" name="email"> <br>
Oggetto <input type="text" name="oggetto"> <br>
Testo <input type="text" name="word"> <br>
<input type="button" onclick="javascript:inviadati(document.theform.word.value,document.theform.oggetto.value,document.theform.email.value);" value="invia">
</form>
<br>
<div id="dati"></div>
</body>
</html>