|
|||||||
|
|
|
 |
|
|
Strumenti |
11-05-2008, 16:11
|
#1 |
|
Senior Member
Iscritto dal: Oct 2006
Città: milano
Messaggi: 1439
|
[ajax] la mia prima prova. mi aiutate?
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 Codice:
<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>
Codice:
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;
}
}
Codice:
<?php
echo $_POST['name'];
?>
|
|
|
|
11-05-2008, 21:40
|
#2 |
|
Member
Iscritto dal: Sep 2005
Messaggi: 82
|
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: Codice:
var str = document.getElementById('textfield').value;
quindi in conclusione (index.html): Codice 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 Codice:
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);
in conclusione (lib.js) Codice:
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);
}
Codice PHP:
ora metti tutto nella stessa cartella e prova a vedere se funziona  se hai dubbi non esitare a scrivere
__________________
Saigon, shit. I'm still only in Saigon. Ultima modifica di tæo : 11-05-2008 alle 21:58. |
|
|
|
|
11-05-2008, 22:56
|
#3 |
|
Senior Member
Iscritto dal: Oct 2006
Città: milano
Messaggi: 1439
|
accidenti mi hai massacrato però adesso funziona
 ma soprattutto mi hai fatto capire delle cose che prima non mi erano chiare.. ti ringrazio
|
|
|
|
|
12-05-2008, 22:08
|
#4 |
|
Member
Iscritto dal: Sep 2005
Messaggi: 82
|
scusa, non intendevo essere brutale
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 (guida ITA - 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 Codice HTML:
<script language="JavaScript" type="text/javascript" src="prototype.js"></script> lib.js - cancella tutto e copia la nuova funzione ajax Codice:
function ajax() {
new Ajax.Updater(
'response',
'script.php, {
method: 'get',
parameters : {name: $('name').value }
}
);
}
una piccola nota, l'operatore $('name') equivale a document.getElementById('name')
__________________
Saigon, shit. I'm still only in Saigon. Ultima modifica di tæo : 12-05-2008 alle 22:33. |
|
|
|
|
12-05-2008, 22:59
|
#5 |
|
Senior Member
Iscritto dal: Oct 2006
Città: milano
Messaggi: 1439
|
ti ringrazio.. gentilissimo
|
|
|
|
|
|
| Strumenti | |
|
|
Tutti gli orari sono GMT +1. Ora sono le: 10:19.
