AJAX è una delle più popolari applicazioni Web oggi grazie alla sua capacità di trasformare le applicazioni Web più come applicazioni desktop. AJAX è una funzionalità che altre tecnologie non potrebbero svolgere, quali l'integrazione completa con vari linguaggi di programmazione. Ha anche altre applicazioni Web e interattiva l'aggiornamento dei contenuti Web senza la necessità di caricare l'intera pagina Web. È capace di fare moduli on-line interattiva e più funzionale.
Istruzioni
1
Utilizzare il codice seguente per creare una forma con un nuovo invio comportamento. Questa forma chiamerà un JavaScript invece di inviare i dati a una pagina diversa.
< script language = "javascript" type = "text/javascript" >
Questa funzione verrà chiamata quando il modulo è inviato
Function saveData() () {
// ...
return false; //Prevent il modulo dall'essere sottomesso
}
Function init () {
document.getElementById("feedback_form").onsubmit = saveData; La funzione saveData è associata all'azione di invio del form.
}
Window. OnLoad = init; La funzione di 'init' verrà chiamata quando la pagina viene caricata.
< / script >
2
Inserire il codice seguente per creare alcune funzioni della libreria AJAX e il nome del vostro file "ajax_lib.js" o con tutto ciò che desiderate:
var jx_http = jx_getHTTPObject(); Creiamo l'oggetto HTTP
Creare un oggetto xmlHttpRequest - questo è il costruttore.
Function jx_getHTTPObject() () {
var xmlhttp;
Utilizzare oggetti ActiveX di IE per caricare il file.
Se (typeof ActiveXObject! = 'undefined') {
try {
XMLHTTP = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
Se ActiveX non è disponibile, è possibile utilizzare il XMLHttpRequest di Firefox/Mozilla ecc per caricare il documento.
} ElseIf (XMLHttpRequest) {
try {
XMLHTTP = new XMLHttpRequest ();
} catch (e) {
XMLHTTP = false;
}
} else {
XMLHTTP = false;
}
ritorno xmlhttp;
}
Questa funzione viene chiamata da script dell'utente. Ci vorrà un URL e una funzione di callback facoltativo.
Poi si leggerà il file di URL, prevedendo una stringa json. Una volta caricato il file, lo script
sarà pharse la stringa json utilizzando 'eval' e chiamare la funzione di callback definito dall'utente con questo
matrice come argomento.
Argomenti-
URL - l'URL dello script serverside che deve essere chiamato. Aggiungere tutti gli argomenti a
Questo URL params GET - come get_data.php?id=5 & auto = benz
callback - nome della funzione che deve essere chiamata una volta i dati è pronto. Se un callback
funzione non è dato, quindi verrà utilizzata la funzione predefinita 'jx_processResults'.
Function jx_getData(URL,callback) () {
return if(!jx_http);
jx_http.Open ("GET", URL, true);
Chiamare una funzione anonymos quando cambia lo stato.
jx_http.onreadystatechange = function () {
Se (jx_http.readyState = = 4) {//Ready stato saranno 4 quando il documento viene caricato.
var risultato;
if(jx_http.responseText) risultato = eval(jx_http.responseText); Sì, lo so ho usato eval - sua JSON, stupido.
altro risultato = "";
if(callback) () {
callback(result); //Give the data to the user defined function.
} else {//If non c' non è nessuna funzione definita dall'utente...
//Call a predifined function with the result.
if(jx_processResults) jx_processResults(result);
}
}
}
jx_http.Send(null);
}
3
Torna alla tua sezione di intestazione e inserire il codice seguente per stabilire la principale funzione di AJAX:
< script language = "javascript" tipo = "text/javascript" type = "text/javascript" >
Questa funzione verrà chiamata quando il modulo è inviato
Function saveData() () {
// ...
return false; //Prevent il modulo dall'essere sottomesso
}
Function init () {
if(jx_http) {//If browser supporta funzioni Ajax
document.getElementById("feedback_form").onsubmit = saveData; La funzione saveData è associata all'azione di invio del form.
}
}
Window. OnLoad = init; La funzione di 'init' verrà chiamata quando la pagina viene caricata.
< / script >
4
Applicare il codice seguente per impostare il file "save_data.php" per passare i risultati deve essere inserito nel database:
Questa funzione verrà chiamata quando il form viene inviato
Function saveData() () {
Commento di var = document.getElementById("comment").value;
e-mail di var = document.getElementById("email").value;
Chiamando questo file, abbiamo salvato i dati.
jx_getData ("save_data.php?comment=" + commento + "& email =" + email + "& ritorno = none");
Visualizzare il messaggio di ringraziamento.
document.getElementById("form_elements").innerHTML = "< h1 > Feedback Received < / h1 > Grazie per il vostro interesse - esamineremo il tuo commento appena possibile.";
return false; //Prevent il modulo venga inviato
}
5
Inserire il codice seguente per attivare il modulo, collegarlo al database e ottenere un feedback da AJAX:
<? php
include('./Connect.php'); Connettersi al database.
Inserire dati nel nostro database
mysql_query ("INSERT INTO feedback(feedback_email,feedback_comment,feedback_time)
Values('$_REQUEST[email]','$_REQUEST[comment]',Now())") o die (" Impossibile salvare: ". mysql_error());
Se ($ Request ['ritorno'] = = 'none') uscita; Uscita senza stampare la nota di ringraziamento.
? >
< html >
< head >
< title > Feedback ricevuto < / title >
< / head >
< corpo >
< h1 > Feedback ricevuto < / h1 >
Grazie per il vostro interesse - esamineremo il tuo commento appena possibile.
< / body >
< / html >
Consigli & Avvertenze
- Sempre mettere le informazioni sul linguaggio di script su sezione head della tua pagina per essere coerente con la maggior parte delle pagine Web pubblicato online. Utilizzare il tutorial online per ottenere qualche conoscenza di base di AJAX.