AJAX sau Ajax este JavaScript asincron și XML. Este utilizat pentru schimbul de date cu un server și actualizarea unei porțiuni a unei pagini web fără a reîncărca întreaga pagină web pe partea clientului. Afișarea și comportamentul paginii web existente nu se interferează deloc în timpul schimbului și actualizării datelor. Ajax este, de asemenea, considerat un grup de tehnologii care au HTML, CSS, DOM și JavaScript, care sunt utilizate pentru a marca, stiliza și permite utilizatorului să interacționeze cu informațiile de pe pagina web. În acest articol, vă va arăta cum să scrieți un program simplu în pași Ajax cu pași utilizând Notepad ++. Sunt necesare câteva cunoștințe de bază despre HTML, DOM, JavaScript și un server web local sau server Web la distanță. WampServer este utilizat în acest articol pentru un test.
Pași
Metoda 1 din 2: Codificare
Pasul 1. Pregătiți o imagine pentru scrierea unui program Ajax
Salvați imaginea în același folder în care vă veți salva fișierele html și text care afișează programul Ajax. În acest articol, directorul „ProgramInAjax” este configurat în folderul „wamp” din directorul „www” unde ați instalat WampServer.
Pasul 2. Deschideți orice editor de text
Notepad ++ este utilizat ca editor de text în acest articol.
Pasul 3. Creați un fișier nou în editorul de text
Tastați următoarele:
Oh, oh! Unde s-a dus floarea galbenă?
Puteți introduce orice doriți în interiorul etichetei HTML.
Pasul 4. Salvați fișierul ca document text cu numele „ajax-data.txt
” De fapt, puteți denumi fișierul oricum doriți, dar asigurați-vă că introduceți același nume de fișier în codare în această linie:
xmlhttp.open ("GET", "ajax-data.txt", adevărat);
Cu toate acestea, eticheta HTML este utilizată pentru antet, astfel încât să pară mai mare și mai invizibilă.
Pasul 5. Creați un fișier nou pentru o pagină web
Acest fișier este destinat unui fișier HTML pentru a vizualiza programul Ajax într-un browser Web.
Pasul 6. Copiați următorul cod:
Primul meu program Ajax de la mine Puneți codul Ajax mai jos.Faceți clic pe butonul de mai jos pentru a face floarea să dispară
Pasul 7. Salvați fișierul
Faceți clic pe butonul de salvare din bara de meniu. Este deschisă o casetă „Salvare ca”. Introduceți un nume pentru documentul dvs. În acest articol, numele fișierului este „index”.
Pasul 8. Faceți clic pe săgeata verticală pentru a alege extensia de fișier
În câmpul „Salvare ca tip”, faceți clic pe săgeata verticală pentru a alege extensia de fișier.
Pasul 9. Selectați „Fișier Hyper Text Markup Language
” Asigurați-vă că are „html” în paranteză. Faceți clic pe Salvare după selectarea „html”.
Pasul 10. Testați fișierul HTML într-un browser Web
Deschideți pagina web într-un browser web. Accesați „Rulați” din bara de meniu de sus. Faceți clic pe acesta și selectați „Lansați în Chrome” sau orice browser instalat în sistemul dvs. Google Chrome este utilizat pentru testare în acest articol. Este posibil să aveți alte browsere instalate în Notepad ++. Puteți selecta browserul dvs. preferat. O altă opțiune este să faceți clic pe pictograma WampServer din bara de activități din partea de jos a ecranului și să selectați „Localhost”. Ar trebui să vă vedeți directorul acolo și să faceți clic pe fișierul index.
Pasul 11. Faceți clic pe butonul de sub imagine pentru a testa scriptul
Pasul 12. Pagina dvs. finală
Pagina dvs. web ar trebui să fie reîmprospătată cu informațiile pe care le-ați introdus în fișierul text la început. Floarea și antetul ar trebui înlocuite cu noul antet numit „Oh oh! Unde s-a dus floarea galbenă?”
Metoda 2 din 2: Explicarea codului
Pasul 1. Secțiunea corpului
Corpul HTML are secțiunea „div” și un singur buton. Această secțiune va fi utilizată pentru a afișa informațiile returnate de pe server. Butonul apelează o funcție numită „loadXMLDoc ()”, dacă este făcută clic.
Primul meu program Ajax de la mine O imagine merge aici pentru a testa programul Ajax.Faceți clic pe butonul de mai jos pentru a face floarea să dispară
Un buton merge aici
Pasul 2. Secțiunea cap
Secțiunea head a fișierului HTML are o etichetă de script care conține funcția „loadXMLDoc ()”.
Primul meu program Ajax de la mine Puneți codul Ajax mai jos.
Pasul 3. Mai multe explicații
Cel mai important lucru al Ajax este obiectul XMLHttpRequest. Este folosit pentru a face schimb de date cu serverul și toate browserele moderne acceptă obiectul.
- Sintaxa pentru a crea un obiect XMLHttpRequest () este variabilă = new XMLHttpRequest (); dar în același timp, sintaxa pentru a crea versiuni vechi ale Internet Explorer (IE5 și IE6) care utilizează un obiect ActiveX este variabilă = ActiveXObject nou („Microsoft. XMLHTTP”);.
- Pentru a gestiona toate browserele moderne, trebuie să verifice dacă browserele acceptă obiectul XMLHttpRequest. Dacă o face, creează un obiect XMLHttpRequest. În caz contrar, va crea un obiect ActiveX pentru acesta.
- Apoi va trimite o cerere către server. Va fi utilizată metoda obiectului XMLHttpRequest numită „open ()” și „send ()”. xmlhttp.open ("GET", "ajax_info.txt", adevărat); xmlhttp.send ();.
sfaturi
- O altă opțiune pentru a previzualiza rezultatul, vă puteți deschide browserul preferat și puteți tasta „localhost / ProgramInAjax” în bara de adrese web pentru a afișa pagina web. Ar trebui să puteți vedea pagina web dacă denumiți fișierul HTML cu „index.html”.
- Salvați fișierul html mai des în timpul lucrului. Dacă apăsați simultan Ctrl și S pentru utilizatorii de Windows, veți economisi mai mult timp.
- Asigurați-vă că adăugați fișierul HTML salvat în aceeași locație în care se află imaginea și fișierul text de date.
- Când denumiți un fișier, este diferențiat de majuscule și minuscule atunci când adăugați aceste nume în cod. De exemplu, „imaginea mea” este diferită de „Imaginea mea” sau „imaginea mea”.
