AJAX ose Ajax është JavaScript Asinkron dhe XML. Përdoret për shkëmbimin e të dhënave me një server dhe azhurnimin e një pjese të një faqe në internet pa ngarkuar të gjithë faqen në anën e klientit. Shfaqja dhe sjellja e faqes ekzistuese të internetit nuk ndërhyn fare gjatë shkëmbimit dhe azhurnimit të të dhënave. Ajax konsiderohet gjithashtu një grup teknologjish të cilat kanë HTML, CSS, DOM dhe JavaScript të cilat përdoren për të shënuar, stiluar dhe lejuar përdoruesit të ndërveprojë me informacionin në uebfaqe. Në këtë artikull, do t'ju tregojë se si të shkruani një program të thjeshtë në hapa Ajax me hapa duke përdorur Notepad ++. Kërkohen disa njohuri themelore për HTML, DOM, JavaScript dhe një server lokal në internet ose një server të largët në internet. WampServer përdoret në këtë artikull për një provë.
Hapa
Metoda 1 nga 2: Kodimi
Hapi 1. Përgatitni një fotografi për të shkruar një program Ajax
Ruani foton në të njëjtën dosje ku do të ruani skedarët tuaj html dhe tekst që shfaqin programin Ajax. Në këtë artikull, drejtoria "ProgramInAjax" është ngritur brenda dosjes "wamp" nën drejtorinë "www" ku keni instaluar WampServer.
Hapi 2. Hapni çdo redaktues teksti
Notepad ++ përdoret si redaktues teksti në këtë artikull.
Hapi 3. Krijoni një skedar të ri në redaktuesin e tekstit
Shkruani sa vijon:
Oh oh! Ku shkoi lulja e verdhë?
Ju mund të shkruani çfarë të doni brenda etiketës html.
Hapi 4. Ruani skedarin si një dokument teksti me emrin "ajax-data.txt
” Në fakt, ju mund ta emërtoni skedarin çfarë të doni, por sigurohuni që të futni të njëjtin emër skedari në kodim në këtë rresht:
xmlhttp.open ("GET", "ajax-data.txt", e vërtetë);
Sidoqoftë, etiketat HTML përdoren për kokën në mënyrë që të duket më e madhe dhe më e padukshme.
Hapi 5. Krijoni një skedar të ri për një faqe në internet
Ky skedar është për një skedar HTML për të parë programin Ajax në një shfletues uebi.
Hapi 6. Kopjoni kodin e mëposhtëm:
Programi im i parë Ajax nga Unë Vendosni kodin Ajax më poshtë.Klikoni butonin më poshtë për ta zhdukur lulen
Hapi 7. Ruani skedarin
Klikoni butonin ruaj në shiritin e menusë. Një kuti "Ruaj si" është e hapur. Vendosni një emër për dokumentin tuaj. Në këtë artikull, emri i skedarit është "indeks".
Hapi 8. Klikoni shigjetën zbritëse për të zgjedhur shtesën e skedarit
Në fushën "Ruaj si lloj", klikoni shigjetën zbritëse për të zgjedhur shtesën e skedarit.
Hapi 9. Zgjidhni “Hyper Text Markup Language file
” Sigurohuni që të ketë "html" brenda kllapës. Klikoni në ruajtje pasi të zgjidhni "html".
Hapi 10. Testoni skedarin HTML në një shfletues uebi
Hapni faqen në një shfletues uebi. Shkoni te "Run" në shiritin e menusë së sipërme. Klikoni mbi të dhe zgjidhni "Launch in Chrome" ose ndonjë shfletues që është duke u instaluar në sistemin tuaj. Google Chrome përdoret për testimin në këtë artikull. Mund të keni disa shfletues të tjerë të instaluar brenda Notepad ++. Ju mund të zgjidhni shfletuesin tuaj të preferuar. Një opsion tjetër, mund të klikoni në ikonën WampServer në shiritat e detyrave në fund të ekranit dhe zgjidhni "Localhost". Ju duhet të shihni drejtorinë tuaj atje dhe të klikoni skedarin e indeksit.
Hapi 11. Klikoni butonin poshtë figurës për të testuar skriptin
Hapi 12. Uebfaqja juaj përfundimtare
Faqja juaj e internetit duhet të rifreskohet me informacionin që keni futur në skedarin e tekstit në fillim. Lulja dhe titulli duhet të zëvendësohen me titullin e ri të quajtur "Oh oh! Ku shkoi lulja e verdhë?"
Metoda 2 nga 2: Shpjegimi i Kodit
Hapi 1. Seksioni i trupit
Trupi i HTML ka seksionin "div" dhe një buton. Ky seksion do të përdoret për të shfaqur informacionin e kthyer nga serveri. Butoni thërret një funksion të quajtur "loadXMLDoc ()", nëse klikohet.
Programi im i parë Ajax nga Unë Një imazh shkon këtu për të testuar programin Ajax.Klikoni butonin më poshtë për ta zhdukur lulen
Një buton shkon këtu
Hapi 2. Seksioni i kokës
Seksioni i kokës së skedarit HTML ka një etiketë skripti e cila përmban funksionin "loadXMLDoc ()".
Programi im i parë Ajax nga Unë Vendosni kodin Ajax më poshtë.
Hapi 3. Më shumë Shpjegim
Gjëja më e rëndësishme e Ajax është objekti XMLHttpRequest. Përdoret për të shkëmbyer të dhëna me serverin dhe të gjithë shfletuesit modernë e mbështesin objektin.
- Sintaksa për të krijuar një objekt XMLHttpRequest () është e ndryshueshme = e re XMLHttpRequest (); por në të njëjtën kohë sintaksa për të krijuar versione të vjetra të Internet Explorer (IE5 dhe IE6) që përdor një objekt ActiveX është e ndryshueshme = e re ActiveXObject ("Microsoft. XMLHTTP");.
- Për të trajtuar të gjithë shfletuesit modernë, duhet të kontrolloni nëse shfletuesit mbështesin objektin XMLHttpRequest. Nëse po, krijon një objekt XMLHttpRequest. Nëse dikush nuk e bën, do të krijojë një objekt ActiveX për të.
- Pastaj do t'i dërgojë një kërkesë serverit. Do të përdoret metoda e objektit XMLHttpRequest të quajtur "open ()" dhe "send ()". xmlhttp.open ("GET", "ajax_info.txt", e vërtetë); xmlhttp.send ();.
Këshilla
- Një opsion tjetër për të parë paraprakisht rezultatin, mund të hapni shfletuesin tuaj të preferuar dhe të shkruani "localhost/ProgramInAjax" në shiritin e adresave të uebit për të shfaqur faqen e internetit. Ju duhet të jeni në gjendje të shihni faqen në internet nëse e emërtoni skedarin tuaj HTML në "index.html".
- Ruani skedarin tuaj html më shpesh gjatë punës tuaj. Shtypja e Ctrl dhe S në të njëjtën kohë për përdoruesit e Window do të kursejë më shumë kohë.
- Sigurohuni që të shtoni skedarin tuaj të ruajtur HTML në të njëjtin vend ku janë skedari i tekstit të imazhit dhe të dhënave tuaja.
- Kur emërtoni një skedar, është i ndjeshëm ndaj shkronjave kur i shtoni ato emra në kod. Për shembull, "myImage" është e ndryshme nga "MyImage" ose "myimage".