Az AJAX vagy Ajax aszinkron JavaScript és XML. Arra szolgál, hogy adatokat cseréljen a szerverrel, és frissítse a weboldal egy részét anélkül, hogy a teljes weboldalt újra kellene töltenie az ügyféloldalon. A meglévő weboldal megjelenítése és viselkedése egyáltalán nem zavarja az adatok cseréjét és frissítését. Az Ajax olyan technológiák csoportjának is tekinthető, amelyek HTML, CSS, DOM és JavaScript kódokkal rendelkeznek, és amelyeket a weboldal információinak megjelölésére, stílusára és a felhasználók interakciójára használnak. Ebben a cikkben megmutatja, hogyan írhat egyszerű programot Ajax lépésekben, a Notepad ++ használatával. Szükséges néhány alapvető HTML, DOM, JavaScript, valamint egy helyi vagy távoli webszerver ismerete. A WampServer ebben a cikkben tesztelésre szolgál.
Lépések
1 /2 -es módszer: Kódolás
1. lépés Készítsen elő egy képet Ajax program írásához
Mentse a képet ugyanabba a mappába, ahová az Ajax programot megjelenítő html és szöveges fájlokat menti. Ebben a cikkben a „ProgramInAjax” könyvtár a „wamp” mappában van beállítva a „www” könyvtár alatt, ahová a WampServer programot telepítette.
2. lépés: Nyisson meg bármilyen szövegszerkesztőt
A Jegyzettömb ++ szövegszerkesztőként szolgál ebben a cikkben.
Lépés 3. Hozzon létre egy új fájlt a szövegszerkesztőben
Írja be a következőt:
Ó, ó! Hová tűnt a sárga virág?
Ide bármit beírhat a html címkébe.
4. lépés. Mentse el a fájlt szöveges dokumentumként „ajax-data.txt” névvel
” Valójában bármikor elnevezheti a fájlt, de ügyeljen arra, hogy ugyanazt a fájlnevet adja meg a kódoláshoz ebben a sorban:
xmlhttp.open ("GET", "ajax-data.txt", igaz);
A fejléchez azonban a HTML -címkét használják, hogy nagyobbnak és láthatatlanabbnak tűnjön.
5. lépés Hozzon létre egy új fájlt egy weboldalhoz
Ez a fájl egy HTML fájl számára készült, hogy megtekinthesse az Ajax programot egy webböngészőben.
6. lépés: Másolja ki a következő kódot:
Az első Ajax programom Tedd alá az Ajax kódot.Az alábbi gombra kattintva eltűnik a virág
7. lépés. Mentse el a fájlt
Kattintson a mentés gombra a menüsorban. Megnyílik a „Mentés másként” mező. Adjon nevet a dokumentumnak. Ebben a cikkben a fájl neve „index”.
Lépés 8. Kattintson a legördülő nyílra a fájlkiterjesztés kiválasztásához
A „Mentés típusként” mezőben kattintson a legördülő nyílra a fájlkiterjesztés kiválasztásához.
9. lépés. Válassza a „Hyper Text Markup Language file
” Győződjön meg arról, hogy a zárójelben „html” van. A „html” kiválasztása után kattintson a Mentés gombra.
10. lépés: Tesztelje a HTML -fájlt egy webböngészőben
Nyissa meg a weboldalt egy webböngészőben. Lépjen a „Futtatás” elemre a felső menüsorban. Kattintson rá, és válassza az „Indítás a Chrome -ban” vagy bármely, a rendszerbe telepített böngészőt. Ebben a cikkben a Google Chrome -ot használják a teszteléshez. Előfordulhat, hogy a Notepad ++ rendszeren belül más böngészők is telepítve vannak. Kiválaszthatja kedvenc böngészőjét. Egy másik lehetőség: kattintson a WampServer ikonra a képernyő alján található tálcákon, és válassza a „Localhost” lehetőséget. Látnia kell a könyvtárat, és kattintson az indexfájlra.
11. lépés: Kattintson a kép alatti gombra a szkript teszteléséhez
12. lépés. Az utolsó weboldal
Weboldalát fel kell frissíteni azokkal az információkkal, amelyeket az elején a szövegfájlba adott. A virágot és a fejlécet le kell cserélni az új fejléccel, melynek neve „Oh oh! Hová tűnt a sárga virág?"
2. módszer 2 -ből: Kódmagyarázat
1. lépés. A testrész
A HTML törzsében található a „div” rész és egy gomb. Ez a szakasz a szerverről visszaadott információk megjelenítésére szolgál. A gomb a „loadXMLDoc ()” nevű függvényt hívja meg, ha rákattint.
Az első Ajax programom Ide kerül egy kép az Ajax program tesztelésére.Az alábbi gombra kattintva eltűnik a virág
Itt egy gomb megy
2. lépés. A fejrész
A HTML fájl fejrészében található egy szkriptcímke, amely tartalmazza a „loadXMLDoc ()” függvényt.
Az első Ajax programom Tedd alá az Ajax kódot.
3. lépés. További magyarázat
Az Ajax legfontosabb dolga az XMLHttpRequest objektum. Adatcserére szolgál a szerverrel, és minden modern böngésző támogatja az objektumot.
- Az XMLHttpRequest () objektum létrehozásának szintaxisa változó = new XMLHttpRequest (); ugyanakkor az ActiveX objektumot használó Internet Explorer régi verzióinak (IE5 és IE6) létrehozásának szintaxisa változó = new ActiveXObject ("Microsoft. XMLHTTP");.
- Az összes modern böngésző kezeléséhez ellenőriznie kell, hogy a böngészők támogatják -e az XMLHttpRequest objektumot. Ha igen, létrehoz egy XMLHttpRequest objektumot. Ha nem, akkor létrehoz egy ActiveX objektumot.
- Ezután kérést küld a szervernek. Az XMLHttpRequest objektum „open ()” és „send ()” nevű módszerét fogja használni. xmlhttp.open ("GET", "ajax_info.txt", igaz); xmlhttp.send ();.
Tippek
- Egy másik lehetőség az eredmény előnézetének megtekintésére: nyissa meg kedvenc böngészőjét, és írja be a „localhost/ProgramInAjax” parancsot a webcímsorba a weboldal megjelenítéséhez. Látnia kell a weboldalt, ha HTML -fájljának „index.html” nevet ad.
- Munkája során gyakrabban mentse el html fájlját. Ha egyszerre használja a Ctrl és az S billentyűt az Window felhasználók számára, több időt takarít meg.
- Feltétlenül adja hozzá a mentett HTML -fájlt ugyanarra a helyre, ahol a kép- és adatszöveg -fájl található.
- Amikor elnevez egy fájlt, a kis- és nagybetűk megkülönböztetése, amikor ezeket a neveket hozzáadja a kódhoz. Például a „myImage” eltér a „MyImage” vagy a „myimage” -től.
