AJAX o Ajax è JavaScript asincrono e XML. Viene utilizzato per lo scambio di dati con un server e l'aggiornamento di una parte di una pagina Web senza ricaricare l'intera pagina Web sul lato client. La visualizzazione e il comportamento della pagina Web esistente non subiscono alcuna interferenza durante lo scambio e l'aggiornamento dei dati. Ajax è anche considerato un gruppo di tecnologie che ha HTML, CSS, DOM e JavaScript che vengono utilizzati per contrassegnare, modellare e consentire all'utente di interagire con le informazioni sulla pagina web. In questo articolo, ti mostrerà come scrivere un semplice programma in Ajax passo dopo passo usando Notepad++. È richiesta una conoscenza di base di HTML, DOM, JavaScript e un server Web locale o un server Web remoto. WampServer viene utilizzato in questo articolo per un test.
Passi
Metodo 1 di 2: codifica
Passaggio 1. Preparare un'immagine per scrivere un programma Ajax
Salva l'immagine nella stessa cartella in cui salverai i tuoi file html e di testo che mostrano il programma Ajax. In questo articolo, la directory "ProgramInAjax" è impostata all'interno della cartella "wamp" nella directory "www" in cui è installato WampServer.
Passaggio 2. Apri qualsiasi editor di testo
Notepad++ è usato come editor di testo in questo articolo.
Passaggio 3. Crea un nuovo file nell'editor di testo
Digita quanto segue:
Oh, oh! Dov'è finito il fiore giallo?
Puoi digitare quello che vuoi all'interno del taghere html.
Passaggio 4. Salva il file come documento di testo con il nome di "ajax-data.txt
” In realtà, puoi nominare il file come vuoi, ma assicurati di inserire lo stesso nome file nella codifica in questa riga:
xmlhttp.open("GET", "ajax-data.txt", true);
Tuttavia, il tag HTML viene utilizzato per l'intestazione in modo che appaia più grande e più invisibile.
Passaggio 5. Crea un nuovo file per una pagina web
Questo file è per un file HTML per visualizzare il programma Ajax in un browser Web.
Passaggio 6. Copia il seguente codice:
Il mio primo programma Ajax di Me Metti il codice Ajax qui sotto.Fare clic sul pulsante in basso per far scomparire il fiore
Passaggio 7. Salva il file
Fare clic sul pulsante Salva nella barra dei menu. Viene aperta una casella "Salva con nome". Inserisci un nome per il tuo documento. In questo articolo, il nome del file è "indice".
Passaggio 8. Fare clic sulla freccia a discesa per scegliere l'estensione del file
Nel campo "Salva come", fare clic sulla freccia a discesa per scegliere l'estensione del file.
Passaggio 9. Selezionare "File Hyper Text Markup Language
” Assicurati che abbia "html" all'interno della parentesi. Fare clic su Salva dopo aver selezionato "html".
Passaggio 10. Testare il file HTML in un browser Web
Apri la pagina web in un browser web. Vai su "Esegui" nella barra dei menu in alto. Fare clic e selezionare "Avvia in Chrome" o qualsiasi browser installato nel sistema. Google Chrome viene utilizzato per i test in questo articolo. Potresti avere altri browser installati all'interno di Notepad ++. Puoi selezionare il tuo browser preferito. Un'altra opzione, puoi fare clic sull'icona WampServer nella barra delle applicazioni nella parte inferiore dello schermo e selezionare "Localhost". Dovresti vedere la tua directory lì e fare clic sul file index.
Passaggio 11. Fare clic sul pulsante sotto l'immagine per testare lo script
Passaggio 12. La tua pagina web finale
La tua pagina web dovrebbe essere aggiornata con le informazioni che hai inserito nel file di testo all'inizio. Il fiore e l'intestazione dovrebbero essere sostituiti con la nuova intestazione chiamata "Oh oh! Dov'è finito il fiore giallo?"
Metodo 2 di 2: Spiegazione del codice
Passaggio 1. La sezione del corpo
Il corpo dell'HTML ha la sezione "div" e un pulsante. Questa sezione verrà utilizzata per visualizzare le informazioni restituite dal server. Il pulsante chiama una funzione denominata "loadXMLDoc()", se viene cliccato.
Il mio primo programma Ajax di Me Un'immagine va qui per testare il programma Ajax.Fare clic sul pulsante in basso per far scomparire il fiore
Un pulsante va qui
Passaggio 2. La sezione della testa
La sezione head del file HTML ha un tag script che contiene la funzione "loadXMLDoc()".
Il mio primo programma Ajax di Me Metti il codice Ajax qui sotto.
Passaggio 3. Ulteriori spiegazioni
La cosa più importante di Ajax è l'oggetto XMLHttpRequest. Viene utilizzato per scambiare dati con il server e tutti i browser moderni supportano l'oggetto.
- La sintassi per creare un oggetto XMLHttpRequest() è variabile=new XMLHttpRequest(); ma allo stesso tempo la sintassi per creare vecchie versioni di Internet Explorer (IE5 e IE6) che utilizzi un oggetto ActiveX è variabile=new ActiveXObject("Microsoft. XMLHTTP");.
- Per gestire tutti i browser moderni, è necessario verificare se i browser supportano l'oggetto XMLHttpRequest. In caso affermativo, crea un oggetto XMLHttpRequest. In caso contrario, creerà un oggetto ActiveX per esso.
- Quindi invierà una richiesta al server. Verrà utilizzato il metodo dell'oggetto XMLHttpRequest chiamato “open()” e “send()”. xmlhttp.open("GET", "ajax_info.txt", true); xmlhttp.send();.
Suggerimenti
- Un'altra opzione per visualizzare in anteprima il risultato, è possibile aprire il browser preferito e digitare "localhost/ProgramInAjax" nella barra degli indirizzi Web per visualizzare la pagina Web. Dovresti essere in grado di vedere la pagina web se assegni al tuo file HTML il nome "index.html".
- Salva il tuo file html più spesso durante il tuo lavoro. Premendo contemporaneamente Ctrl e S per gli utenti di Windows si farà risparmiare più tempo.
- Assicurati di aggiungere il file HTML salvato nella stessa posizione in cui si trovano l'immagine e il file di testo dei dati.
- Quando assegni un nome a un file, fa distinzione tra maiuscole e minuscole quando aggiungi quei nomi nel codice. Ad esempio, "myImage" è diverso da "MyImage" o "myimage".
