PDA

View Full Version : [ajax] la mia prima prova. mi aiutate?

ndakota
11-05-2008, 16:11
ciao ragazzi, sto provando un po di ajax ma non riesco a far funzionare questa mia prima prova.. praticamente c'è un input text che ogni volta che viene cambiato dovrebbe stampare la stringa di quell'input, ma non lo fa.. qualcuno sa aiutarmi? grazie

ho fatto questo html

<html>
<head>
<script language="JavaScript" type="text/javascript" src="functions.js"></script>
<title>prova ajax</title>
</head>
<body>
<center>
<h2>prova ajax</h2>
inserisci un cognome:
<div id="textfield"><input type="text" name="name" onchange="ajax()"></div>
<div id="response"></div>
</center>
</body>
</html>


questo js

function getXMLHTTPRequest() {
var request = false;

if(window.XMLHTTPRequest) {
request = new XMLHTTPRequest();
}
else {
if(window.ActiveXObject) {
try {
request = new ActiveXOblect("Msml2.XMLHTTP");
}
catch(err1) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(err2) {
request = false;
}
}
}
}

return request;
}

function ajax() {
var ajaxObject = getXMLHTTPRequest();
var myUrl = 'test.php';
ajaxObject.open("POST", myUrl, true);
var str = document.getElementById('textfield').value;
ajaxObject.onreadystatechange = useHttpResponse;
ajaxObject.send(str);
}

function useHttpResponse() {
if(ajaxObject.readyState == 4 && ajaxObject.status == 200) {
var mytext = ajaxObject.responseText;
document.getElementById('response').innerHTML = mytext;
}
}


e questo php

<?php
echo $_POST['name'];
?>


insomma di una banalità pazzesca.. eppure non riesco a farlo funzionare.. help :cry: :cry:
tæo
11-05-2008, 21:40
ci sono una serie di errori concettuali e qualcuno sull'uso delle tecnologie (javascript e DOM).

partiamo dall'HTML, ho modificato l'onchange con onkeyup per un riscontro più soddisfacente, ma questo è il meno. ho aggiunto l'attributo id all'input dato che il codice che avevi scritto:

var str = document.getElementById('textfield').value;

ritornava un bell'undefined dato che nell'HTML non esiste nessun input con id="textfield", ma solo il div (che non ha campo value).
quindi in conclusione (index.html):

<html>
<head>
<script language="JavaScript" type="text/javascript" src="lib.js"></script>
<title>prova ajax</title>
</head>
<body>
<center>
<h2>prova ajax</h2>
inserisci un cognome:
<div id="textfield"><input type="text" id="name" name="name"onkeyup="ajax()"></div>
<div id="response"></div>
</center>
</body>
</html>



passiamo allo script javascript... prima di tutto non funzionava la tua getXMLHTTPRequest(), dato la chiamata al metodo open nell'oggetto ajaxObject nella funzione ajax() ritornava errori di "is not object" (la variable ajaxObject non era del giusto tipo). quindi senza saper nè leggere nè scrivere ho preso la funzione standard (spero) del W3C.
passando alla funzione ajax() ho modificato la chiamata alla open per usare il metodo "GET" e ho modificato myUrl di conseguenza

var str = document.getElementById('name').value;
var myUrl = 'script.php?name='+str; // chiamo il php passandogli il value dell'input field tramite get
ajaxObject.open("GET", myUrl, true);

infatti tu chiamando tramite POST il tuo script in realtà non passavi nessun parametro alla pagina php che quindi non poteva ritornare nessuna stringa. mi sembra di capire che tu volessi passare la stringa tramite la send, addirittura dopo aver ricevuto la risposta con la responseText. infine ho eliminato la useHttpResponse dato che dava errori di null pointer su ajaxObject perchè non gli era stato passato come parametro (infatti la sua visibilità di ajaxObject era solo locale alla funzione ajax() e quindi non esiste modo per lavorarci su in altre funzioni se non la si passa come parametro).
in conclusione (lib.js)

function getXMLHTTPRequest() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
return xmlHttp;
}

function ajax() {
var ajaxObject = getXMLHTTPRequest();
var str = document.getElementById('name').value;
var myUrl = 'script.php?name='+str;
ajaxObject.open("GET", myUrl, true);
ajaxObject.onreadystatechange = function() {
if(ajaxObject.readyState == 4 && ajaxObject.status == 200) {
var mytext = ajaxObject.responseText;
document.getElementById('response').innerHTML = mytext;
}
};
ajaxObject.send(null);
}


come ultima cosa (script.php)

<?php
echo $_GET['name'];
?>



ora metti tutto nella stessa cartella e prova a vedere se funziona :)


se hai dubbi non esitare a scrivere
ndakota
11-05-2008, 22:56
accidenti mi hai massacrato però adesso funziona :D ma soprattutto mi hai fatto capire delle cose che prima non mi erano chiare.. ti ringrazio :)
tæo
12-05-2008, 22:08
scusa, non intendevo essere brutale :D ma sono contento di esserti stato d'aiuto. cmq quando senti di aver capito abbastanza bene quello che succede dietro le quinte puoi usare dei framwork in javascript che si occupano di fare la maggior parte del lavoro di più basso livello al posto ttuo (come ad esempio ottenere l'oggetto XMLHTTPRequest ed effettuare richieste ajax).

a tal proposito ti consiglio Prototype (http://www.prototypejs.org/) (guida ITA (http://www.fabryprog.it/from_sergiopereira/prototype.js.html) - un pò datata ma ancora abbastanza valida)


scarica il file prototype.js, mettilo nella stessa cartella del nostro index.html ed ecco come verrebbe la stessa applicazione:


index.html - aggiungi nell'head questo riferimento

<script language="JavaScript" type="text/javascript" src="prototype.js"></script>



lib.js - cancella tutto e copia la nuova funzione ajax

function ajax() {
new Ajax.Updater(
'response',
'script.php, {
method: 'get',
parameters : {name: $('name').value }
}
);
}

come vedi usando il metodo Updater la classe Ajax offerta da Prototype si occupa di creare per me l'oggetto httprequest ottenere la risposta da script.php e inserire il testo ottenuto all'interno dell'oggetto con id="response".

una piccola nota, l'operatore $('name') equivale a document.getElementById('name')
ndakota
12-05-2008, 22:59
ti ringrazio.. gentilissimo :)