A JQuery egy JavaScript-könyvtár, amelynek célja "írás kevesebb, tegyen többet". A JQUERY könnyen csatlakozhat az oldalhoz, és elkezdheti használni. JQUIERY használatával sokkal könnyebbé válik a JavaScript használatához a webhelyén.
a JQUERY kiküszöböli a JavaScript-kód teljes zümmögését, és lehetővé teszi, hogy csak egy módszert hajtsa végre.
Mi az ajax?
Az Ajax egy aszinkron (azaz böngésző, kérés küldése, bármit is megtehet, például egy üzenetet, amely egy válaszra vár, görgessen az oldalt stb.) JavaScript és XML. Dinamikus és gyors weboldalak létrehozására szolgál. Az Ajax lehetővé teszi számunkra, hogy frissítsük a weboldal egy részét anélkül, hogy újraindítanák az egész oldalt.
Mi a helyzet a jquery és ajax?
A jQuery és az Ajax kombináció erős funkcionalitást biztosít. TÓL TŐL jquery használata. És Ajax kérést készíthet és információt kaphat különböző formátumokban, beleértve az XML, HTML és még a normál szöveget is. Használhatja a JSON formátumot az adatok cseréjére. Az AJAX kérés által kapott adatok HTML oldalunkon használhatók.
a JQuery egy meglévő böngésző AJAX API erősebb és könnyebben használható. Hozzon létre egy AJAX hívásokat a szokásos módon a JavaScript használatával, egy kicsit nehéz: mivel figyelembe kell venni, hogy a különböző böngészők különböző megközelítéseket igényelnek az XMLHTTPRECEST objektum létrehozásához. Ezenkívül az adatok küldése például az űrlapoktól, nehezebbé válik, ha a szokásos JavaScriptet használja az Ajax hívásához.
a JQuery egyszerű és erőteljes funkcionalitást biztosít, amely kiterjeszti a JavaScript Ajax módszereket, és rugalmasabb megközelítést biztosít.
Ebben a kis cikkben megmutatom neked hogyan kell használni a jQuery-t és ajaxot egyszerű PHP. forma. Kezdjük ... A jquery és ajax használatához két fájlra van szükségünk, az első fájl tartalmazza a HTML / PHP kódot, amellyel az AJAX lekérdezést összeállítják. A második fájlban kezeljük az Ajax lekérdezést, és visszaadjuk az eredményt az első oldalra.
1. lépés: Hozzon létre egy School.php fájlt, és helyezze be a következő kódot:
A fenti kódban megkapjuk a hallgató nevét és számát, és a jquery és ajax használatával küldjük el őket a részletek.php-nek.
| A NEVED: | ||
| Roll száma: | ||
2. lépés: Részletek létrehozása.php és helyezze el a következő kódot:
A fenti kódban a hallgató címét a sorszám és annak nevével kapjuk meg.
Ebben a példában meg kell hoznia egy iskolai adatbázisokat és a diákok asztalát. A hallgatói táblázat nevét, sorszámot és címet tartalmazó mezőket tartalmaz.
Remélem, ez a cikk hasznos lesz Önnek.
A post () módszert általában úgy tervezték, hogy adatokat küldjön a szerverre (például az űrlaptól).
A poszt-módszer kontextusához érdemes megemlíteni jSON. - A JavaScript alapján szöveges formátum. Szinte bármilyen programozási nyelv használható.
jquery, Ajax kérés post módszer
jquery.post (URL ,,,,)- Az első argumentum (URL) az a dokumentum URL-je, ahol a kérést elküldi;
- A második argumentum (adatok) a kiszolgálónak küldött adatok általában JS objektumként jelennek meg;
- A harmadik argumentum (visszahívás (adat, textstatus, jqxhr)) az F-I hívott a kiszolgáló válasz után. Mint érvek ez a funkció A kiszolgáló által küldött adatokat a kérés elvégzésének kérésére és állapotára adott válaszként.
json_decode () és json_encode ()
BAN BEN pHP nyelv (5.2), a JSON Támogatás a rendszermagban szerepel Json_Decode () funkciók formájában () funkciók (a Json String) és a JSON_ENCODE (), amely maguk a JSON DATA-típusokat a megfelelőnek megfelelően konvertálja típusok php. és fordítva.
1, "B" \u003d\u003e 2); Echo json_encode ($ ARR); ?\u003eEredmény
("A": 1, "B": 2, "C": 3, "D": 4, "E": 5)PHP példa művelet json_decode
$ JSON \u003d "(" A ": 1," B ": 2)"; Var_dump (JSON_DECODE ($ JSON, TRUE)); $ Arr \u003d json_decode ($ JSON, TRUE); Echo ""$ ARR [" A "]."
"$ ARR [" B "]."
";
Eredmény
Tömb (5) (["A"] \u003d\u003e int (1) ["B"] \u003d\u003e int (2)) 1 2Példa az AJAX lekérdezés működésére a post módszerrel
Mit csináljunk:
Ellenőrizze az elküldött (POST KÉRDÉS AJAX) adatok helyességét (adatokat a felhasználó megadja). Ha az adatok helyesek, megjelenítünk egy üzenetet. Ellenkező esetben készítsen piros háttérvilágítást a mezőkön. Minden az aszinkron módon működik, vagyis az oldal újraindítása nélkül. Te tudod használni ez az elv, például hozzászólásrendszer létrehozása az adatbázis észrevételeinek beillesztésével.
jquery.
$ (Dokumentum). Ready (funkció () (Var Working \u003d False; / * Ez a zászló megakadályozza, hogy több megjegyzés küldjön: * / $ ("forma"). Küldés (függvény (E) (E.PREVENTDEFAULT (); ha (munka ) Visszatérés hamis; munka \u003d igaz, $ ("# submit"). Val ("Várj."); $ ("Hiba"). Removeclass ("hiba"); $ .Post ("submit.php", $ (ez) .Serialize (), Funkció (MSG) (/ * SHEPHORE értékek küldése a Submit.php: * / Working \u003d FALSE; $ ("# submit"). Val ("Küldés"); ha (Msg. Állapot) // Ha az adatok helyesek, adjunk hozzá egy üzenetet (console.log (msg.status); $ ()) .HIde (). Helyezzen be ("űrlap"). Lányos ();) Ha vannak hibák, áthaladunk az objektumon keresztül az objektum // msg.Errors, és vigye el őket a $ .Erók oldalra (Msg.Errors, funkció (K, V) ($ ("#" + k) .addclass ( "Hiba"); // riasztás (k);)));)), "JSON");)));HTML.
PHP.
// Elfogadjuk az AJAX $ ARR \u003d $ _Post adatait; $ arr \u003d $ _post; Ha (Filter_Var ($ ARR, Filter_Validate_Email) && Filter_Var ($ ARR, FILTER_VALIDATE_INT)) (Echo JSON_ENCODE (Array ( "Status" \u003d\u003e 1, "HTML" \u003d\u003e "Ebben a cikkben az általam használt kód példái aJAX kérések a kiszolgálóhoz jquery.. Feladataik eltérőek lehetnek, így különböző funkciókat használhat, amelyek egyszerűsítik az írási kódot.
HTML adatkérelem a terhelés funkció használatával
Ez a legegyszerűbb Ajax lekérdezés a JQUERY-en keresztül, hogy HTML-adatokat szerezzen, és helyezze be őket a DOM elemre az ID \u003d "Eredmény" -vel (az elem tartalma cserélhető):
$ ("# Eredmény"). Terhelés ("
A terhelés fejlettebb verziója:
$ ("# Eredmény"). Terhelés ("
Ebben a példában a szerver továbbítja a paramétereket is, és a válasz kézhezvételét követően nem ellenőrizték, hogy nincs hiba (például a kiszolgálóra adott válasz nem érkezett be) és különböző műveletek végrehajtása.
AJAX kéri a Funkciókat
Ezeket a funkciókat az Ajax Query HTTP-módszerek szállították, és hozzászólást kapnak. Néhány példát adok a használatukra.
$ .get ("
Az adatátvitel nem szükséges, valamint bármilyen művelet végrehajtása után a választ kapta a választ a szerverről, azaz Ebben az esetben a 3 és 4-6 húrok eltávolíthatók, ha szükséges, és így csökkenthetik a kódot.
A szerverről kapott adatok típusa megadható adattípus hozzáadásával (lásd a következőket) - Az alapértelmezett értéket automatikusan meghatározza.
A posta használata hasonló, de a következő példában használom a funkcióhívást, miután megkapta a választ a kiszolgálón.
$ .Post ("
Valójában a Get és Post funkciók rövidített lehetőségei az AJAX funkcióhoz, amely az alábbiakban figyelembe veszi.
Getjson json adatok kapnak
getjson - az AJAX lekérdezés rövidített változata a GET módszerrel és az adatok fogadásával, mint JSON. A módszer kényelmes, például bizonyos tömbök beszerzése az adatokkal és az azt követő munkával.
$ .getjson (" A szerver oldalán a program egy tömböt képez, és egy JSON-karakterláncra konvertálja, például az alábbiak szerint: $ arr \u003d tömb (); $ Arr \u003d Array ("ID" \u003d\u003e 10, "TEXT" \u003d\u003e "TEST LINE 1"); $ Arr \u003d Array ("ID" \u003d\u003e 20, "TEXT" \u003d\u003e "TEST LINE 2"); $ Arr \u003d Array ("ID" \u003d\u003e 30, "TEXT" \u003d\u003e "TEST LINE 3"); Echo json_encode ($ ARR); Hasonlóképpen stdClass tárgyakat lehet át a szerver, átkonvertálni a JSON-karakterlánc. Most példát adok egy egyszerű lekérdezési funkcióra Ajax és a HTML adatok fogadására. $ .ajax (URL: " A kiszolgáló iránti kérelem a szerverezési módszer, mert A kérelem típusáért felelős paraméter, az alapértelmezett típus kap. Egy példa arra, hogy egy lekérdezési funkciót hajtson végre Ajax postaadat-továbbítással az események módszerével és feldolgozásával. Az alábbiakban leírom extra lehetőségekamelyeket leggyakrabban alkalmaznak. $ .ajax (URL: " Adatküldés gomb:
A példában, amikor rákattint a gombra, a gomb állapota először változik (a szöveg a "Küldés ...", és nem aktív lesz), amely a BeforeSend paraméter használatával történik. Ezután a kérést elküldi a kívánt adatok átadására. Miután a választ kapta a kiszolgálón, a gomb állapotát visszaadják ugyanarra (a szöveg "Küldés" -re változik, aktívvá válik). A válasz JSON adatoként érhető el. Röviden írja le az Ajax kérés elküldésének paramétereit, amely leggyakrabban hasznos lehet: Az alábbiakban néhány példát adok az Ajax lekérdezések használatára. Minta HTML kód:
Egyszerű Ajax lekérdezés a jquery segítségével az AJAX funkcióval
Bonyolultabb példa az AJAX kérésére a jquery segítségével
url
AJAX kérés címének küldése
típus
A küldés módja kérés. vagy posta.
adat.
Adatokat küldött adatok. Ez lehet egy string paraméterek és azok értékei PAR1 \u003d VAL1 & PAR2 \u003d VAL2 & ..., JQuery tárgy, például $ ( "Input"), vagy más adatokat.
adattípus
Adatok típusa a szerverről. Lehet HTML, JSON, SZÖVEG, Script és XML.
gyorsítótár.
A lekérdezési böngésző gyorsítótárazása (hamis - nem gyorsítótár).
async.
Aszinkron lekérdezés végrehajtása, azaz A program továbbra is végrehajtásra kerül a kiszolgáló válaszának várakozása nélkül. Ha FALSE-t ad meg, a lekérdezés szinkron módon kerül végrehajtásra, míg az oldal nem válaszol semmit, amíg a válasz nem érkezik a szerverről.
adatfeldolgozás.
Az URL formátumra küldött adatok konvertálása. Ha szükséges, hogy az adatok ne alakuljunk át, telepítse a hamis. Például, ha képet küld egy kiszolgálóra vagy XML-adatokra.
tartalom típus.
A továbbított adatok típusa, alapértelmezett "Alkalmazás / X-Www-form-urlencoded; Charset \u003d UTF-8". Ha FALSE-t ad meg, a cím nem adja meg azt a típusát, amelyre szükség lehet például a kiszolgálóra küldeni kívánt kép küldésénél.
beforeSend.
Az Ajax kérés elküldése előtt végrehajtott funkció.
teljes.
A kiszolgáló válaszának fogadása után végzett funkció (minden sikeres vagy nem).
siker.
A sikeres lekérdezéssel végzett funkció.
hiba
Hiba esetén végrehajtott funkció.
Forma küldése az összes adat AJAX kéréssel JQuery segítségével
JavaScript kód:
$ ("# Myform"). Submit (E.PREVENTDEAULT (E); $ .AJAX ((típusa: $ (oda) .attr ("Method"), URL: "
Annak érdekében, hogy az oldal újrainduljon az "Küldés" gombra kattintva, először törölje a szabványos böngésző műveleteket e.preventdefaults () .
Az adatparaméterben átadjuk az összes űrlap mezőt $ (ez) .Serialize () - Ez a szolgáltatás átalakítja az összes bemeneti S-ot, és kiválasztja a kiszolgálónak küldött karakterláncban.
A paramétert itt is használják. async: FALSE. Tehát míg az űrlap nem megy a szerverre, bármi mást nem lehet nyomni vagy készíteni.
Kép vagy Ajax lekérdezési fájl küldése jquery segítségével
A fájl vagy kép küldésének feladata, hogy az oldal újraindítása nélkül újrainduljon az oldal újraindítása nélkül. Ebben a példában a 2 zseton skála egyszerre: a gomb megnyomásával válassza ki a fájltamely lehet, mint tetszik a fájl átvitelének előrehaladása AJAX kérésszerver.
a HTML kód így lesz:
#addfile (pozíció: relatív, túlcsordulás: rejtett, szélesség: 180px; magasság: 34px;) #load_file (pozíció: abszolút; felső: 0; bal: 0, szélesség: 180px; magasság: 34px; betűtípus): 0px; : 0; Szűrés: Alpha (Opacity: 0);) #load_file: Hover (kurzor: mutató;)
Az ötlet lényege az, hogy a standard bemenet a gomb tetején jelenik meg egy fájl kiválasztásához, de teljesen átlátszó, és ugyanolyan méretű, mint egy gomb. Így a felhasználó látja a gombot, de amikor a kurzor vezet hozzá, valójában a bemenethez vezet. Ennek megfelelően, amikor megnyomja a gombot, valójában megnyomja a bemeneti fájl kiválasztását. Annak érdekében, hogy a fájl kiválasztása után ne villogjon a kurzor, a betűméret 0px-re van állítva.
Most a JavaScript fájlkód küldése egy kiszolgálóhoz egy előrehaladási kijelzővel:
$ (Funkció () ($ ("# load_file"). Be ("Change", Loadfile);)))); Funkció Loadfile () ($ ("# addfile span"). HTML ("feltöltött 0%"); fájlok \u003d $ ("# load_file"). Fájlok; Var form \u003d új formaData (); form.append ("feltöltés" , Fájlok); $ .ajax ((URL: "
Ha a fájl betöltődik a kiszolgálóhoz, akkor a gomb megmutatta, hogy mennyi% -ot továbbít a kiszolgálóra. Miután a letöltés befejeződött, a gomb neve visszaadódik, és a bemenet értéke és a fájl értéke üres, így új fájlt választhat újra.
Példa a kiszolgáló részére a PHP-n (Eugene kérésére):
$ üzenet \u003d ""; Ha (üres ($ _ fájlok ["Feltöltés"] ["Név"]) || $ _files ["Upload"] \u003d\u003d "Nincs") \u003d\u003d "Nincs") ($ üzenet \u003d "Nem választottál a fájlt";) más, ha ($ _Files ["Feltöltés"] ["méret"] \u003d\u003d 0 || $ _files ["Feltöltés"] ["Méret"]\u003e 9437184) ($ üzenet \u003d "A fájlméret nem felel meg a szabványoknak (maximum 9 MB) "), Ha (($ _files [" feltöltés "] [" Type "]! \u003d" Kép / jpeg ") && ($ _files [" Upload "] [" Type "]! \u003d" Kép / pjpeg ") ($ _files ["Feltöltés"] ["Type"]! \u003d "Kép / gif") && ($ _files ["Upload"] ["Type"]! \u003d "Kép / png") ($ üzenet \u003d "megengedett Csak képek letöltése jpg, gif és png. ";) más, ha (! IS_UPLOADED_FILE ($ _ fájlok [" feltöltés "] [" tmp_name "])) ($ üzenet \u003d" Valami rosszul ment. Próbálja meg újra letölteni a fájlt. ";) Más ($ ftype \u003d $ _files [" feltöltése "] [" Type "]; $ fname \u003d" Newname_image. "($ Ftype \u003d\u003d" kép / gif "?" GIF ": ($ ftype \u003d\u003d" Kép / PNG "?" PNG ":" jpg ")); ha (MOVE_UPLOADED_FILE ($ _ fájlok [" feltöltés "] [" tmp_name "], $ _server [" Document_root "]." / Files / ".$ Fname) ) ($ üzenet \u003d "sikeresen betöltött.";) más ($ message \u003d "valami elment nak nek. Próbálja meg újra letölteni a fájlt. ";)) Kilépés ($ üzenet);
A letöltött képről szóló információk a $ _files ["feltöltés"] szerepelnek, mert A forgatókönyvfájl a következőképpen került: form.append ("feltöltés", fájlok); Ennek megfelelően a PHP programból szükséges minden szükséges annak ellenőrzése, hogy a fájl megfelel-e a várt paramétereknek, átadja a fájlt a kívánt mappa (A fájlok mappájában szereplő példában) a következő név alatt (a Newname_Image példájában), és visszaadja a választ a böngészőre, amely példájában egyszerűen megjelenik a Felhasználói riasztás (üzenet) parancs;
Olyan helyzetek, amelyekben lehet, és szükség van az Ajax lekérdezésekre, sokat, mindegyikük itt nem szétszerel. Mindazonáltal, ha vannak javaslatok, milyen más példák találhatók hozzá, írjanak a megjegyzésekbe.
Nem tudok küldeni a legegyszerűbb kérés A szervlethez jquery segítségével. De ugyanakkor, ha elküldöm az űrlapot, minden működik egy bumm. Az alábbiakban megadom az index.html-t, ahonnan egy felhasználói bejelentkezést szeretnék küldeni. Login.js, amelyben maga a kérés, a serletstore.java maga is szervlet. És az egész projekt szerkezete.
login.js. Az egyetlen kevesebb munka URL \u003d "http: // localhost: 8080 / testhost / posta", és ők "/ testszolgáltatás / posta", "Testservlet / Post", "/ Post," Post "okozza a 404-es hibát.
FunkcióddnewVoting () (VAR XHR \u003d új XMLHTTPRECRECEST (); VAR Body \u003d "Név \u003d" + encodeurikomponens ("Név") + "& surnate \u003d" + encodeurKomponens ("Vezetéknév"); xhr.open ("Post", http: // localhost: 8080 / testservlet / posta ", true) xhr.setrequestrequestheader (" tartalom-típus "," alkalmazás / x-www-form-urlencoded ") xhr.send (test););); Funkció AddnewVoting1 () (VAR felhasználó \u003d ("FirstName": "vlad") VAR JSonSonstring \u003d Json.Stringyfy (Felhasználó); var url \u003d "http: // localhost: 8080 / testservlet / posta"; $ .ajax (URL) : URL, MÓDSZER: "POST", Adatok: JsonSonstring, ContentType: "Application / Json", Hiba: Funkció (üzenet) (üzenet (üzenet); konzol.log (JSONOBECT);), Siker: funkció (adat); jsonobject \u003d json.parse (adatok); konzol.log (jsonobject);), fejlécek: ("Elfogadás": "Alkalmazás / Json", "Elfogadás-nyelv": "EN", "Cache-Control": "Max- életkor \u003d 3600 ")));););
A második funkció hívásakor megjeleníti azt:
index.html
Servletstore.java.
Javax.Servlet.ServletException import; import javax.servlet.annotation.Webservlet; Import javax.servlet.http.httpservlet; import javax.servlet.http.httpservletrequest; Import a javax.servlet.http.httpservletresponse; Java.io.ioException import; Import Java.io.Printwriter; @WebSzervlet (név \u003d "posta", URLPATHERNS \u003d "/ Post") A nyilvános osztály Servlet kiterjeszti a HTTPSERVLETet (@OnoverRide védett Void Doget (HTTPSERRETREREQUEST REQ, HTTPSERVLETREPSE REQ) dobja a ServletException, az ioException (Printwriter Writer \u003d Resp.getwriter (); Nyomtatás ("hello");) @override védett üreg dopost (HTTPSERVLETQUEST REQ, HTTPSERVLETRESSPONSEP RESS) dobja a ServletException, az ioException (Super.Dopost (Req, Riv);))
Projektszerkezet.
A példákban lévő lecke az egyszerű aszinkron AJAX kérések megteremtését veszi figyelembe a szerverre. A kérelmek továbbításának módjaként mind a Get módszert, mind a post módszert használjuk. A kiszolgálón a PHP parancsfájlokat használó kéréseket hajt végre.
Mi az ajax aszinkron kérés?
Az Ajax technológiát elsősorban az aszinkron kérések létrehozására használják a szerverre. Az aszinkron lekérdezés olyan kérés, amelyet a háttérben végeznek, és nem akadályozza meg, hogy a felhasználó együttműködjön az oldallal.
Aszinkron kérés küldése során a böngésző (oldal) nem "fagyasztott", azaz. Vele, mint korábban, dolgozni tudsz. De akkor, hogy tudjuk, mikor jön a válasz a szerverről. Ennek meghatározásához ellenőriznie kell a ReeanTate böngésző tulajdonát (készenléti állapot). Ez a tulajdonság olyan számot tartalmaz, amelyekkel megítélheti az értéket, amelynek értéke a vizsgálat. Az alábbi táblázat a ReadeTate tulajdonság és a megfelelő állapotok fő értékeit mutatja.
Azok. Kiderül, hogy nyomon kell követnünk, ha a Readpeate tulajdonság értéke megegyezik 4. Ez azt jelenti, hogy a kiszolgáló válaszolt az elküldöttre. A gyakorlatban fennmaradó értékeket ritkán használják, és néhány böngésző nem támogatja őket.
Annak érdekében, hogy meghatározzuk, hogy milyen szakaszban van egy lekérdezés, az XMLHTTPRECRECT ONREADERSTATECHANGE objektumot kell használnia. Ez az esemény minden alkalommal történik, amikor a Readpeate tulajdonság értéke megváltozik. Következésképpen, a felvezető ezen esemény (unnamented vagy megnevezett funkció), akkor regisztráljon intézkedések, amelyeket ellenőrizni fogja, hogy az ingatlan 4 egyenlő, és például, kiadási szerver az oldalra.
Aszinkron Ajax lekérdezés létrehozása (GET módszer)
Tekintsük az aszinkron létrehozását AJAX kérés A példában, amely az oldal letöltése után lesz, hogy üdvözölje a felhasználót, és megjelenítse az IP-címét.
Ehhez 2 fájlt kell létrehoznia a kiszolgálón egy könyvtárban:
- welcome.html - HTML oldal, amely megjelenik a felhasználó számára. Ugyanezen az oldalon helyezze el a szkriptet, amely elvégzi az AJAX munkájának összes szükséges intézkedését az ügyféloldalon.
- a feldolgozás.php - PHP fájl, amely feldolgozza a kérelmet a szerver oldalon, és válaszoljon. Elkezdjük fejlődni az üdvözlés alapvető struktúrájának létrehozásától
Példa az Ajaxra
Tekintsük az ügyféloldalon végrehajtandó műveletek sorrendjét (a JavaScript-kódban):
- Az a módszer, amellyel a kiszolgálóra kerül (Get, Post).
- Az URL, amely feldolgozza a kiszolgáló kérését.
- Kérelem típusa: szinkron (hamis) vagy aszinkron (igaz).
- Szükség esetén név és jelszó.
Iratkozzon fel egy XHR objektum ONREADTATECHANGE eseményre, és rámutatjon a kezelőn anonim vagy megnevezett funkcióra. Ezt követően hozzon létre kódot ebben a funkcióban, amely ellenőrzi a válasz állapotát, és bizonyos lépéseket hajt végre az oldalon. A kiszolgálóból származó válasz mindig a válaszlehetőségi tulajdonságban van.
Ezenkívül a 4 ReadeTate Tulajdonosi érték érvényes értékével ellenőrizheti az állapot tulajdonság értékét. Ez a tulajdonság határozza meg a lekérdezési állapotot. Ha 200, akkor minden rendben van. Ellenkező esetben hiba történt (például 404 - az URL nem található).
A Send () módszerrel kérést küldünk a kiszolgálónak.
Ha a lekérdezés küldését használja, akkor adja meg az adatokat a paraméterre ez a módszer Ne. Az URL részeként továbbítják őket.
Ha a POST módot a lekérdezés küldéséhez használja, akkor az adatokat a Send () módszerrel paraméterként kell áthelyezni. Ezenkívül, hogy ezt a módszert hívja, telepítenie kell a tartalom típusú fejlécet úgy, hogy a kiszolgáló tudja, hogy melyik kódolást kapta, és megfejtette azt.
Készítse elő a kérelem végrehajtásához szükséges adatokat a kiszolgálón. Ha nincs szüksége a szerveren végrehajtandó adatokra, akkor ez a lépés kihagyható.
Hozzon létre egy változót, amely tartalmaz egy XHR objektum példányát (xmlhttpequest).
Konfigurálja a kérést a nyitott () módszerrel.
A következő paraméterek vannak megadva:
Script elem tartalma:
// 2. Hozzon létre egy kérés VAR kérés \u003d új XMLHTTPRECEST (); // 3. kérés beállítása.Open lekérdezés ("Get", "feldolgozás.php", igaz); // 4. Iratkozzon fel egy ontreadystatechange eseményre, és feldolgozza azt az anonim függvény kérésére.Addeventlistener ("ReadyStatechange", funkció () () (// Ha a lekérdezés 4 állapot és kérés állapota 200 (OK), ha ((kérés.ReadeState \u003d\u003d 4) && (kérés.Status \u003d\u003d 200)) (// Például húzza ki az XHR objektumot a konzol.log böngésző konzolhoz; // és a válasz (szöveg), amely a kiszolgálóból származott a riasztási konzolban.log ablak (kérés.responsetext); // kap egy id \u003d üdvözlő var welcome \u003d document.getelementbyid ("Welcome"); // Cserélje ki az elem tartalmát az üdvözlésből származó válaszból. )))); // 5. kérés küldése a kéréshez.Send () kiszolgáló;
Ennek eredményeként a welcome.html fájl a következő kódot kapja:
Példa az Ajaxra
A kiszolgálón (PHP használatával):
- Adatot kapunk. Ha az adatokat a Get módszeren keresztül küldi, akkor a Global Array $ _get ["Név"]. És ha az adatokat a post módszerrel továbbítja, akkor a Global Array $ _post ["Név"].
- Ezen adatok használatával végrehajthat néhány műveletet a kiszolgálón. Eredményeként, amellyel válaszolunk. Visszavonja az ECHO-val.
Aszinkron Ajax lekérdezés létrehozása (post módszer)
Módosítsa a fenti példát. Most az AJAX lekérdezés a kiszolgálóhoz a gomb megnyomásával történik. Meg fogja fogadni azt a nevet, amely a felhasználóba lépett a bemeneti elembe, és elküldi azt a Post módszerrel a szerverre. Miután megkapta a választ a kiszolgálón, cserélje ki őket a div elem tartalmát az oldalon.
Példa az Ajaxra
