AJAX technológia segítségével

A történelem a fejlődés a web-alkalmazások

Figyelembe véve, ez vagy az új technológia először is meg kell érteni, mi ez a technológia a legnagyobb szükség van, és mit tesz lehetővé (vagy könnyebb) kell csinálni, hogy nem teszik lehetővé más technológiák. Ahhoz, hogy jobban megértse, milyen feltételek vannak, hogy a megjelenése AJAX, láthatjuk a folyamat evolúciós fejlődésének web-oldalak.







A hajnal az internetes oldal egy sor egyszerű statikus oldalak - a felhasználó kéri egy forrás a kiszolgáló és a kiszolgáló a statikus oldal. Ez az oldal egy egyszerű HTML szöveget, és tárolni, mint egy szöveges fájlt a kiszolgálón. Ez az oldal a mellékelt mint a felhasználó, sőt, nem volt kliensoldali szkript.

Az első kísérlet, hogy oldalt a dinamikusabb volt a Common Gateway Interface (CGI). CGI lehetővé teszi a fejlesztők végrehajtható programok által generált oldal amely lehetővé teszi a felhasználó számára, hogy beállításokat. Mivel ezeket a paramétereket, lehetséges volt, hogy létrehoz egy egyedi oldalt. Nagyjából, az alkalmazott megközelítés ma ugyanabban ASP.NET, PHP, stb

Generation oldalak a szerver oldalon is szép, de kénytelen minden alkalommal, még a jelentéktelen és a felhasználó beavatkozását, hogy a kérést a szerver, hogy túlterheli az egész oldalt. Ahhoz, hogy ne terhelje túl a teljes oldalt, ha a szerver része egyáltalán nem szükséges, a kliens scriptek kezdték használni.

Kisalkalmazások és a Flash

Ha a kérést a szerver továbbra is szükség van, és kliensoldali szkriptek nem tud - a fejlesztők a web-oldalak elkezdték használni az úgynevezett kisalkalmazások és a vaku.

1. A kiszolgáló nem megy minden elemét az oldal (vagy inkább nem azok értékét), és csak a minimálisan szükséges adatokat, hogy végre egy adott kérés és a válasz érkezik, nem az egész oldalt, és csak a szükséges adatokat, hogy csökkentsék a forgalom a tízes ( és néha a több száz) alkalommal.
2. Ne terhelje túl jelentkezik az oldalt a böngésző és a felhasználó a benyomást kelti, hogy minden történik a számítógépén.

Körülbelül ez a technológia, és mi megy tovább.
Az objektum modell böngészőt.

Ha engem kérdezel, mi az alapja elve az AJAX technológiát, akkor azt valószínűleg válaszolni. „Hála a böngésző objektum modell.” Milyen egy ilyen böngésző objektum modell (DOM)?

Document Object Model (DOM) - a specifikáció szabványosított W3C bizottság, amely a cross-platform, és leírja a kihívásokat és a leírást a művelet maga a dokumentum szerkezete, HTML, XML és stílusok. Ahogy a neve is mutatja, az alapja a DOM specifikáció objektumok.

Ezt a feladatot meg először az Internet Explorer 5.0 és hajtották végre, mint egy ActiveX komponenst. Fontos megjegyezni, hogy ez az objektum nem egy W3C szabvány, bár sok a funkciókat a leírásban ismertetett «A DOM Level 3 betöltés és mentés Specifikáció». Emiatt a viselkedése kissé különbözőek lehetnek a különböző böngészőkben. De minden böngészőben, ez ugyanazokat az alkalmassága - képes küldeni kéréseket a szerver és kap választ tőle. Mint már említettük, ez az objektum nem szabványosított, és létrehozta a saját példány eltérő lehet a különböző változatok, így a „biztonságos” létrehozása jobban ki kell használni a kódot, amely egyesíti a teremtés például több böngészők, mint az alábbi kódot:

XMLHttpRequest számos „standard” (a szabvány, mert a fenti idézett, ez az objektum nem szabványosított minden böngészőben) tulajdonságok és módszerek, amelyek lehetővé teszik ezt az objektumot, hogy küldjön egy kérést, hogy ellenőrizze az állapotát a kérelmet, és megkapta a lekérdezés eredménye a távoli szerverre. Ezek a tulajdonságok és módszerek lesz szó a következő két táblázat.

Az 1. táblázat mutatja a „standard” tulajdonságok XMLHttpRequest

Ez megszakítja az aktuális kérés

Visszatér az összes fejléc válasz formájában kulcs / érték

Értékét adja vissza a megadott fejléc

nyitott (módszer, url, aszinkron, felhasználónevet, jelszót)

Beállítja az állapot a kérést a szerver. Az első paraméter határozza meg a kérelem módszer - Tedd, GET, POST, második - URL kérés, a harmadik (opcionális) - kérés típusa (szinkron vagy aszinkron), a negyedik és az ötödik (szintén opcionális) - a biztonságos oldalak

Kérést küld a szervernek

Megállapítja az érték a konkrét címet. Mielőtt hívja ezt a módszert, akkor hívja a nyílt módszer

XMLHttpRequest is tartalmaz számos olyan tulajdonságokkal, amelyek az alábbiak:

A eseménykezelő fordul elő, hogy minden állapotváltozás kérelem

Kérelem állapota. Az alábbi értékek állnak rendelkezésre: 0 - kérheti inicializált 1 - terhelést, 2 - terhelés alatt, 3 - interaktív 4 - teljes

A válasz a szerver, mint a húr

A válasz a szervertől az XML. Ez az objektum lehet feldolgozni és ellenőrizni, mivel DOM

HTML státusz kódot. (Pl 200 - OK)

Név HTML kódot status

Ie kérésekor az oldalt, hanlder visszatér text / plain papír egyetlen vonal „Hello World”. Elégedettek vagyunk ezzel felvezető nem is lehetne jobb.

Most hozzon létre egy hagyományos HTML - oldal, amely teljesíti a kérést XMLHttpRequest használatával.

Ez a kód nagyon egyszerű. Ha rákattint a „Start aszinkron kérés” nevezik kliens funkció startRequest, ami kezdetben okoz a korábban ellenőrzött createXMLHttpRequest funkcióra, az XMLHttpRequest objektumot, majd megérinti a felvezető (ügyfél handleStateChange funkció) a readystatechange esemény erre az épületre, megnyitja és elküldi a kérelmet . Ha a kért oldal áll rendelkezésre, és az adatokat kaptunk, állapot megváltozik állapotban 200. Ezért handleStateChange funkcióval tudjuk ellenőrizni az érték az ingatlan. Amikor a kívánt értéket riasztási vezetjük le a kapott értéket. Próbálja hogyan működik:

AJAX technológia segítségével

Ez egyszerű kód lényegében meghatározott összes funkciót AJAX - le adatokat a szerver újratöltése nélkül az oldalon. megértése ez a mechanizmus is elegendő, hogy megértsék a lényegét AJAX, és sikeresen használja a saját alkalmazásokat. Továbbá, csak egy technikai kérdés, majd megnézzük a végrehajtása során, de az ASP.NET J
AJAX Az ASP.NET
Fordított oldal kéri.

Visszahívások - egy különleges fajta visszatérés formák, azaz, Oldal fut a ciklus az események, de ezek a formák vissza az ügyfélnek kezdete előtt a renderelés folyamatát formák, azaz hogy dolgozza át. Mint minden AJAX kérés végrehajtása megkezdődik a kliens oldali eredményeként bekövetkezése Mindenesetre a kliens fut egy beépített funkció nevű WebForm_DoCallback. Ez a funkció a következő prototípus:







pageid - ID az oldal, ami a hívást,

érv - egy string argumentum a szerverre,

returnCallback - kliens funkció vagy az ügyfél script, hogy kell végrehajtani, miután a szerver oldali hozamok ellenőrzés

összefüggésben - közvetített adatokat returnCallback.

errorCallback - kliens funkció vagy az ügyfél script, ami lefut, ha hiba lép

useAsync - megállapítja, hogy a kérelem szinkron vagy aszinkron.

A következő lépés - a kiszolgáló oldal tisztában kell lennie azzal, hogy támogatnia kell a visszahívások (azaz elsősorban a vissza adatokat, mielőtt megjelenne az oldalon). Ehhez ez az oldal kell ismerniük interfész System.Web.UI.IcallbackEventHandler.

Ez az interfész tartalmaz két módszer:

Hogy hívja vissza a szerver oldalon áll 2 szakaszból áll: előkészítés és visszaadja az eredményt. RaiseCallbackEvent módszer az úgynevezett első és célja, hogy felkészüljenek a távoli kódfuttatást. GetCallbackResult metódus lefut később, amikor az eredmény készen kell szállítani. Ezt a felosztást vezették be csak a kiadása .NET 2.0, az előző verziókban a két módszer egyesítjük egyetlen (ez történt, tekintettel a aszinkron művelet). GetCallbackResult módszer visszaadja a húr, így a visszakapott adatokat kell sorba valamilyen módszerrel egy húr, az ügyfél ellentétes deserialize.

Ha kérni egy oldalt a kliens script első fut a Init, ami után a normál oldal load esemény hurok az esemény előtt Load Load ingatlan IsCallback értéke igaz, a Load befejezése végre módszerek ICallbackEventHandler interfész, akkor a fent említett végrehajtási megszakad, anélkül, hogy a színpadon renderelés. Először is, azt mondja, hogy nincs szakaszában megőrzése ViewState, így próbálja megmenteni semmit ViewState standard módszer használhatatlan (ez érthető, mert a ViewState az oldal nem frissül). Ez kezeli közötti kommunikáció az oldalt, és az úgynevezett szerver A menedzser visszahívások. A menedzser visszahívások egy kliens-script könyvtár. Ezek az ügyfél script és küldje kérés fogadására, és feldolgozni a választ a szerver, stb Keresi View Source bármilyen oldalak, láthatjuk sorokat

A fájl letöltése után, amely visszaadja a felvezető WebResource.axd ezekkel a paraméterekkel, akkor ásni a tanulmány kliensoldali szkript, amelyek felelősek a fenti lépéseket J

Írásban eljárás WebForm_DoCallback ügyfél nem valami bonyolult, de nehézségek merülnek fel abban az esetben, dinamikus létrehozását vagy az átviteli paramétereket. Ezen osztály Page.ClientScript (System.Web.UI.ClientScriptManager) bevezetett egy különleges módszer - GetCallbackEventReference, amelyhez számos paraméter és hasonlókat, például az eljárás GetPostBackEventReference, generál egy megfelelő kliens kódot. Nem mondanám, hogy ez a módszer nagyon elegáns, különösen, ha kell átadni a paramétereket a forgatókönyvet klienskij (különösen a jelenléte szimpla és dupla idézőjelek közé kontateniruyuscheysya sor elrontja az egész kép), de sokkal kényelmesebb, mint a homlokára, hogy írjon WebForm_DoCallback.

Ez a módszer a következő prototípus:

célig - oldalt vagy WebControl, amely kezeli a visszahívás. Ennek megfelelően, ha az oldal vagy kontroll végre kell hajtania ICallbackEventHandler felület, különben ez lesz a kivételt dobja:

System.InvalidOperationException: A cél „__Page” a visszahívás nem található, vagy nem hajtotta végre ICallbackEventHandler.

Előállítja az első paraméter funkció WebForm_DoCallback

érv - az argumentum a kliens funkció vagy script. Megfelel a második paraméter WebForm_DoCallback funkciót.

returnCallback - kliens funkció vagy az ügyfél script, hogy kell végrehajtani, miután a szerver oldali hozamok kontroll (harmadik paraméter WebForm_DoCallback)

összefüggésben - közvetített adatokat kliens returnCallback (4. paraméter WebForm_DoCallback).

errorCallback - kliens funkció vagy az ügyfél script, ami lefut, ha hiba lép fel (5. paraméter WebForm_DoCallback)

useAsync - határozza meg, hogy a kérelem vagy aszinkron (6. WebForm_DoCallback paraméter).

Próbáljuk megoldani a segítségével AJAX.

Ehhez hozzon létre egy szabályos ASPX oldalt:

Aztán rájönnek ICallbackEventHandler felület oldal osztály:

Meg kell, hogy a eventArgument RaiseCallbackEvent módszer, hogy a megfelelő lépéseket, majd átadja azt az GetCallbackResult hogy visszatérjen az ügyfélnek. Ehhez mutatunk be egy változó evArg.

Következő, meg kell csatolni az ügyfél kezelőjét az első SELECT. Ie amikor megváltoztatja az értéket nevezzük WebForm_DoCallback funkciót. És az írás J

Most mi írjuk a 2 módszer, amelyek közül az első csak akkor szükséges, ha egyszer - a kötelező jegyzéket a gyártók, és a második - a lista a modellek. Annak érdekében, hogy ne szenvednek DB, hogy könnyebb a következő módon:

És ezért annak érdekében, hogy feltölti a gyártók listáján, szükség van hozzá Page_Load:

Most meg kell csinálni 2 dolog -, hogy írjon a kliens funkció végrehajtandó visszatérése után, és írja be a kódot a funkciók és RaiseCallbackEvent GetCallbackResult.

Először írjuk be a kódot az ilyen 2 funkciók:

A paraméter eventArgument RaiseCallbackEvent csúszás funkciója a belső változó evArg (ez az érték van kiválasztva termelő), és a GetCallbackResult perebindiv listája modellek ugyanazon változó belép az összes érték modell egy adott gyártó, felosztja őket, mint a „” (egyfajta szerializációs módszer).

Ezután írja a kliens funkció CallbackFunction. Ezt a funkciót meg kell tisztítani egyes típusokon és fogadása egy sor GetCallbackResult, deserialize értékét, és töltse ki a SELECT új értékeket.

Ez gyakorlatilag minden. Ez a példa természetesen nem tökéletes (például nem tartalmazza a hibakezelés), de működik jól. Ennek ellenőrzéséhez ennek a lapnak:

AJAX technológia segítségével

AJAX technológia segítségével

Ahhoz, hogy hozzá a projekthez ATLAS összetevők szükség, hogy először arról, hogy az ATLAS van telepítve a számítógépen, egyébként telepíteni. Ezt követően, akkor létrehozhat egy projekt, mint a „ATLAS” Web Site, vagy adjunk hozzá egy linket a könyvtárban. A második esetben, be kell állítania a web.config meg a kézi ATLAS.

Abban az időben az írás, ATLAS benne 21 vezérlő néhány amelyeket elég gyakran, másokat én személyesen, kivéve sehol kísérletnél használt alkalmazásokat. Ellenőrző CascadingDropDown az ATLAS megvalósítása, amit írtam fent J a legszélesebb körben használt és sokoldalú, véleményem szerint, az irányítást a UpdatePanel - ezt a panelt (az ügyfél, akkor átalakul egy div elemmel), ami lehet túlterhelt túlterhelése nélkül, és azt is tartalmazhat egyéb ellenőrzések . UpdatePanel 2 részből áll - ContentTemplate és a kiváltó okok. ContentTemplate van ContentTemplate tartalmi terület (azaz, ahogy mondtam, lehet, hogy más ASP.NET vezérlők, HTML és sima szöveg). Elindít egy listát kiváltó egy adott UpdatePanel. Trigger - olyan, mintha az eseménykezelő, amelyeknél ez UpdatePanel frissíteni kell. A triggerek 2 típusú - ControlEventTrigger és ControlValueTrigger. Az első közülük reagál az esemény kontroll (például ellenőrzés Button és lehallgatott események esemény Click), a második - a tulajdonságokat a változás (például a változó szöveg értékeket a kontroll TextBox). Például, a következő kód:

1. (és legnagyobb) ha a felhasználó beír, és ezen a ponton az ideje, hogy terhelje - a felhasználó elveszíti a fókuszt, és ennek következtében a része az üzenet, amelyet ő már szerzett
2. túlterhelés kényszeríti a felhasználót, hogy várjon, amíg az oldal betöltődik, és ezért volt, hogy gondolkodjunk, fehér oldaljelzőre alján a letöltés
3. A túlterhelés nem lehet megtenni, mert túl gyakran amellett, hogy a szöveg maga is letöltheti az összes oldalt attribútumok - képek, logók, bannerek, HTML jelölőnyelv

A kialakuló ilyen beszélgetés minden AJAX képességek tudok ajánlani az olvasónak, de ATLAS alkatrész - UpdatePanel - alkotunk ma.

1. A forma újabb gombot, hogy láthatatlan.

3. A UpdatePanel hozzá a ravaszt, hogy ezt a kulcsot:

Arra is szükség van, hogy regisztrálják magukat <%@ Page %> - EnableEventValidation = "false"

4. Szintén a body tag: onload = "setInterval ( 'UpdatingPanel ()' 3000),"

Hogyan működik - kliens funkció UpdatingPanel nagyjából szimulálja a gomb megnyomása btnUpdate. mert A UpdatePanel van egy kiváltó ezt a gombot - a hívás Ezen funkció klienskij frissítés UpdatePanel. Csak akkor tudjuk hívni ezt a funkciót az ügyfél rendszeres időközönként, ami az, amit teszünk a szervezetben.

Ennek eredményeképpen megkaptuk az alábbi kódot:

Ha ki szeretné próbálni ezt az egyszerű változata a chat segítségével ATLAS gyakorlatban - nyitott több böngészővel ehhez az oldalhoz, és mindegyikben írni a bejegyzést. Ebben az esetben, akkor láthatjuk, hogy írás után a második üzenet a böngésző, meg fog jelenni az első 3 másodpercben.

AJAX technológia segítségével

Ebben a cikkben leírtam alapjait AJAX ASP.NET és remélem, hogy segít a programozók elkezdené alkalmazni ezt a technológiát a ASP.NET alkalmazásokat.




Kapcsolódó cikkek