Ajax kezdőknek

Mi az aszinkron hívást?

Ha nem használja az Ajax, minden adatcsere a szerver és a kliens-án kerül sor a hagyományos minta, vagyis a frissítés web-oldalak vagy tölts le egy újat.

Például, ha azt írja néhány nevezési lapot és nyomjuk meg a Küld, a bevitt adatokat küld a szerverre, és a kezelés után vissza, amely maga után vonja a teljes oldal frissítése, vagyis ez az oldal betöltődik egy új dokumentum helyett az előzőt.

Hála Ajax helyett, a szerver és a kliens képes kommunikálni „a háttérben” időben időközönként, vagy amikor egy adott esemény bekövetkezik.

Ha ezt még nem jQuery könyvtár. töltse le a hivatalos weboldalon.

Hozzon létre egy weboldalt ajax.html, amely tartalmazni fogja egy egyszerű beviteli forma, ahol szeretné, hogy adja meg az első és az utolsó név.

Mint látható, az űrlap után került DIV blokk azonosító eredményezheti azt a későbbiek kimeneti eredményeit feldolgozó formában.

Most hozzon létre egy oldalt, result.php amelyet meg kell küldeni az adatokat a formában. És tegye meg a következő.

Ez a kód csak egy üzenetet jelenít meg a helyettesített továbbított adatokat olyan formában POST módszerrel.

A felvétel JQuery és képzési feladatokat

Most visszatér a fájl ajax.html csatlakoztassa jQuery könyvtár és felírni a szükséges funkciókat.

Most hozzon létre egy kívánt jQuery kódot, amelyet részletesebben ismertetjük.

És ezért azt mondjuk, az első sorban:

Az elem az ID „input_form”, amikor a „küldés” esemény történik, hogy ezt a funkciót.

A második és harmadik sor:

var lastname = $ ( "# lastname") attr ( 'érték') .;

Mi határozza meg a változó nevét, eltávolítjuk a tulajdonság „érték” elem id „név” és „last name”.

Mi továbbra is végrehajtja egy Ajax hívás. A JQuery három ellenőrzési módszerek aszinkron hívások $ .post, $ Szálljon és $ .ajax. Ebben az első példában most $ .post, amely adatokat küld a szerverre POST.

- szükségünk van arra, hogy választ, hogy meg kell küldeni a szerver felállítása «adatok».

A mi esetünkben, küldjön egy vizsgálatot result.php, adatokat szolgáltatva a paraméter nevét és a változó neve (korábban kibővített tartalom neve beviteli mező egy formája) és a változó paraméterek és az utolsó név.

Abban az esetben, ha a $ .ajax eljárás, megkapjuk ugyanazt az eredményt, de csak akkor van szükség, hogy átírják a funkciót.

Ez a módszer egy kicsit bonyolultabb szintaktikai, de az is jobban testreszabható, mint a módszer $ .post és $ Szálljon. A teljes lista a paraméterek megtalálhatók a dokumentációban.

Hogyan kell kezelni a ajax kérelem segítségével a JSON.

Ebben a példában fogjuk, ha megnyom egy gombot, hogy megkapja az aktuális dátum és idő a szerveren. Kezdjük egy PHP oldal (result2.php).

Szánj időt mutató, időt és a dátumot, majd megjeleníti azt a JSON formátum

Most viszont, hogy az Ajax-json.html oldal

Itt a forma áll egy gombot, a berendezés is jelen div id = „eredmény”, amely helyébe az érték a lekérdezés eredménye.

Most zaberom ezt a kódot részletesebben.

A #input_form elem egy esemény bekövetkeztekor nyújt be ezt a funkciót. Ezután készíts Ajax kérés result2.php oldalon.

Most hoztak létre adattípus paraméterértékeihez JSON. Ez azt mondja jQuery milyen választ kellene adni ebben a formában tehát a választ a szerver lesz helyezve a «» adat objektumot. Emiatt például az érték, amit küldött a nap nevét ( „nap”: '$ nap), megkapjuk a data.day.

Így tudjuk, hogy három érték (itt ez érdekes, hogy képest az előző példában, amelyben az eredmény egy külön egység, most már az adatok kezelését egyenként) egy olyan helyzetben alapján a meghatározott értékek id.

Meg kell adni kellő figyelmet a dolgozó Ajax, figyelembe véve a különböző tényezőket, amelyek befolyásolják a adatcsere a szerverrel. Tegyük fel, hogy a kérés összetett vagy a szerver foglalt, ez eltarthat egy ideig. Egy tipikus kérést a szerver a böngésző ablakot, látjuk a „Várakozás megnyitása a WWW” „Adatátvitel a hálózatról. „Stb de ha a kérelmet az Ajax, hogy nem történik meg. Ennek következtében az, hogy a felhasználó azt gondolhatja, hogy nem történik semmi, ez egy hiba a használhatóság.

Ezért szükséges, hogy helyettesítse a teljes hossza a lekérdezés minden animált jel, amely egyértelművé tette, hogy megtörténjen bizonyos intézkedéseket.

Nézzük az utolsó példa (Ajax-json.html), és benne valami megváltozott:

A képet illessze a gomb melletti