Category Archives: ajax

Inserire dati in una tabella con php e ajax

Obiettivo
In questo articolo tratteremo come inserire dati in una tabella mysql con php e ajax

Articolo
Supponiamo di voler inserire dei dati in una tabella di un database mysql cosi composta:

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

Cominciamo a creare la pagina php, inserisci.php, che inserira' i dati nella nostra tabella

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

$testo=$_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("insert into mienews(testo) values('$testo')");
if($dati){echo"inserito $testo";}
else{echo"non inserito";}
?>

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

<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', 'inserisci.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="inserisci">
</form>
<br>
<div id="dati"></div>
</body>
</html>

Creare un completo sistema di gestione news con php e ajax

Obiettivo
In questo articolo tratteremo come creare un completo sistema di gestione news con php e ajax

Articolo
La prima cosa che dobbiamo fare e' creare una tabella "news" in cui inserire i nostri dati:

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

Fatto cio',creiamo il file .js, "ajax.js" che conterra' tutte le funzioni ajax necessarie

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,operazione) {
// add 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', 'gestisci.php?testo='+valore+'&op='+operazione);
http.onreadystatechange = handleResponse;
http.send(null);
}

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

La procedura

function inviadati(valore,operazione)

invia i dati alla pagina "gestisci.php" ,che creeremo subito sotto , che a seconda dei parametri passati, eseguira' le operazioni
necessarie:

<script src="ajax.js"></script>

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

<?
if($_GET['op']=="del"){
$id=$_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("delete from news where id='$id'");
//if($dati)echo"Cancellato $id";
//else echo"Errore ".mysql_error();
}
?>

<?
if($_GET['op']=="ins"){
$testo=$_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("insert into news(testo) values('$testo')");
//if($dati){echo"inserito $testo";}
//else{echo"non inserito";}
}
?>

<table>
<?
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 news");
while($array=mysql_fetch_array($dati)){
echo"<tr><td>$array[testo]</td><td><a href=\"javascript:void(0)\" onclick=\"javascript:inviadati('$array[id]','del');\">Canc</a></td></tr>";
}
?>
</table>

Possiamo subito vedere che a seconda del parametro $_GET['op'], avremo inserimento o cancellazione, mentre i dati verrano mostrati
sempre.

Non ci resta che creare la pagina principale che mostrera' i dati e dalla quale potremmo cancellare o inserire altri dati

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

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

Pagine piu veloci con php e ajax

Obiettivo
In questo articolo tratteremo come incrementare la velocita' di una pagina php utilizzando ajax.

Articolo
Lo scopo di ajax e' quello di ridurre la quantita' di dati caricati in una pagina attraverso l'instaziamento di
un oggetto javascript che fa una richiesta http di dati. I dati possomo essere di qualsiasi tipo ma chiaramente
saranno i risultati di qualche ricerca o visualizzazione di record dal database. Quello vche faremo vedere e' come
selezionare degli articoli per tipo mediante questo metodo. Avremo una pagina principale che ci mostra gli articoli

<html>
<body>
<script src="ajax.js"></script>

<a href="#" onclick="javascript:richiedi('asp');">asp</a>
<a href="#" onclick="javascript:richiedi('php');">php</a>

<br>br>

<div id="dati"></div>

</body>
</html>

e che ci fa scegliere il tipo, richiamando la funzione "richiedi" e passadogli come parametro una stringa con
il tipo desiderato.

<div id="dati"></div>

e' il posto in cui verranno visualizzati i risultati.
Il file "ajax.js" e' definito qui sotto

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 richiedi(valore) {
http.open('get', 'tutorials.php?tipo='+valore);
http.onreadystatechange = handleResponse;
http.send(null);
}

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

vediamo in cosa consiste:

if(browser == "Microsoft Internet Explorer"){
tipo_richiesta = new ActiveXObject("Microsoft.XMLHTTP");
}else{
tipo_richiesta = new XMLHttpRequest();
}

Seleziona il tipo di browser in uso

function richiedi(valore) {
http.open('get', 'tutorials.php?tipo='+valore);
http.onreadystatechange = handleResponse;
http.send(null);
}

Fa una richiesta di tipo "get" alla pagina "tutorials.php" passando come parametro, il parametro preso in precedenza
e chiama la funzione handleResponse.

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

E' la funzione che stampa nel $lt;div> di nome "dati", il flusso derivante dalla pagina "tutorials.php".Infine vediamo
la pagina tutorials.php che non fa altro che eseguire una semplice query sul database prendendo come parametro
il parametro $tipo preso mediante:

$tipo=$_REQUEST['tipo'];

Il codice completo della pagina tutorials.php e' il seguente

<?
$tipo=$_REQUEST['tipo'];
?>

<h1>Tutorials </h1>
<br>
<?
$obj->connessione();
$dati=mysql_query("select * from articoli where tipo='$tipo'");
while($array=mysql_fetch_array($dati)){
echo"<a href=\"leggi.php?tutorial=$array[titolo]\">$array[titolo]</a>";
echo"<br>";
}
?>

Upload di file con php e ajax

Obiettivo
In questo articolo tratteremo come fare l'upload di file con php e ajax

Articolo
Abbiamo visto parecchi articoli su come utilizzare ajax per le nostre applicazioni, in questo articolo faremo l'upload di file con php e ajax. Creiamo la pagina "index.php" in cui metteremo un iframe che conterraì la pagina "upload.php" che farà tutto il lavoro.

<html>
<body>
<div id="iframe">
<iframe src="upload.php" frameborder="0"></iframe>
</div>
<div id="images"></div>
</body>
</html>

La nostra pagina "upload.php" che si occupera' di fare l'upload del file nella cartella "upload/" è:

<?
$ftmp = $_FILES['image']['tmp_name'];
$oname = $_FILES['image']['name'];
$fname = 'upload/'.$_FILES['image']['name'];
if(move_uploaded_file($ftmp, $fname)){
echo "<script>";
echo "var par = window.parent.document;";
echo "var images = par.getElementById('images'); ";
echo "images.innerHTML = 'file $oname caricato';";
echo "</script>";
}
?>

<script language="javascript">
function upload(){
// hide old iframe
var par = window.parent.document;

// add image progress
var images = par.getElementById('images');
var new_div = par.createElement('div');
var new_img = par.createElement('img');
new_img.src = 'indicator.gif';
new_img.className = 'load';
new_div.appendChild(new_img);
images.appendChild(new_div);

// send
document.iform.submit();
}
</script>

<form name="iform" action="" method="post" enctype="multipart/form-data">
<input id="file" type="file" name="image" onchange="upload()" />
</form>
?>

Upload di file con php e ajax

Obiettivo
In questo articolo tratteremo come fare l'upload di file con php e ajax

Articolo
Abbiamo visto parecchi articoli su come utilizzare ajax per le nostre applicazioni, in questo articolo faremo l'upload di file con php e ajax. Creiamo la pagina "index.php" in cui metteremo un iframe che conterraì la pagina "upload.php" che farà tutto il lavoro.

<html>
<body>
<div id="iframe">
<iframe src="upload.php" frameborder="0"></iframe>
</div>
<div id="images">
</body>
</html>

La nostra pagina "upload.php" che si occupera' di fare l'upload del file nella cartella "upload/" è:

<?
$ftmp = $_FILES['image']['tmp_name'];
$oname = $_FILES['image']['name'];
$fname = 'upload/'.$_FILES['image']['name'];
if(move_uploaded_file($ftmp, $fname)){
echo "<script>";
echo "var par = window.parent.document;";
echo "var images = par.getElementById('images'); ";
echo "images.innerHTML = 'file $oname caricato';";
echo "</script>";
}
?>
<script language="javascript">
function upload(){
// hide old iframe
var par = window.parent.document;
// add image progress
var images = par.getElementById('images');
var new_div = par.createElement('div');
var new_img = par.createElement('img');
new_img.src = 'indicator.gif';
new_img.className = 'load';
new_div.appendChild(new_img);
images.appendChild(new_div);
// send
document.iform.submit();
}
</script>
<form name="iform" action="" method="post" enctype="multipart/form-data">
<input id="file" type="file" name="image" onchange="upload()" />
</form>
?>