Istoria dezvoltării aplicațiilor web
Având în vedere această tehnologie sau o nouă tehnologie, trebuie în primul rând să înțelegem de ce această tehnologie este necesară și ce permite (sau facilitează) să facă, ce alte tehnologii nu permit. Pentru a înțelege mai clar ce condiții preliminare au fost pentru apariția AJAX, putem lua în considerare dezvoltarea evolutivă a site-urilor web.
La începutul dezvoltării, site-urile de Internet erau un set de pagini statice simple - utilizatorul a solicitat o resursă de la server și serverul a returnat o pagină statică. Această pagină a fost un text HTML simplu și a fost stocată ca fișier text pe server. Această pagină a fost trimisă utilizatorului ca atare și, în plus, nu avea nici un script de client.
Prima încercare de a face paginile mai dinamice a fost Interfața Comună Gateway (CGI). CGI a permis dezvoltatorului să creeze programe executabile care au generat pagina, ceea ce a permis primirea parametrilor de la utilizator. Având în vedere acești parametri, puteți genera o pagină unică. În general, această abordare este utilizată și acum în același ASP.NET, PHP, etc.
Generarea de pagini pe partea de server este cu siguranță bună, însă a forțat de fiecare dată, chiar și cea mai nesemnificativă acțiune a utilizatorului, să solicite serverului o supraîncărcare a întregii pagini. Pentru a nu supraîncărca întreaga pagină în cazurile în care participarea serverului nu este absolut necesară, script-urile clientului au început să fie utilizate.
Applets și Flash
În cazul în care cererea către server este în continuare necesară și nu pot fi scutite anumite script-uri de client - dezvoltatorii din paginile web au început să folosească așa-numitele. applets și flash.
1. Nu toate elementele paginii sunt trimise serverului (mai precis, nu valorile acestora), ci doar acele date minime care sunt necesare pentru a îndeplini o anumită interogare și ca răspuns nu întreaga pagină este acceptată, ci doar datele necesare, care permit reducerea traficului la zeci uneori de sute de ori).
2. Nu există o supraîncărcare a paginii în browser și utilizatorul are impresia că totul se întâmplă pe computerul său.
Despre această tehnologie și vor merge mai departe.
Modelul obiect al browserului.
Dacă mă întrebați ce se bazează principiul tehnologiei AJAX, probabil că voi răspunde. "Datorită modelului obiect al browserului." Ce este acest model de obiect al browserului (DOM)?
Document Object Model (DOM) - un comitet W3C caietul de sarcini standardizate, care este cross-platform și descrie provocările și descrierea privind funcționarea la documentul în sine, structura sa, HTML, XML și stiluri. După cum sugerează și numele, obiectele sunt baza specificației DOM.
Acest obiect a apărut pentru prima dată în Internet Explorer 5.0 și a fost implementat ca o componentă ActiveX. Este important să rețineți că acest obiect nu este un standard W3C, deși o mare parte din funcționalitatea sa este descrisă în specificația "Specificația DOM Level 3 Load and Save". Din acest motiv, comportamentul său poate fi ușor diferit în diferite browsere. Dar în toate browserele funcționează aceeași funcționalitate - poate trimite cereri către server și obține răspunsuri de la acesta. Așa cum am menționat mai sus, acest obiect nu este standardizat, iar crearea instanței sale poate diferi în diferite versiuni, astfel încât pentru crearea "fiabilă" este mai bine să folosiți codul care combină crearea instanțelor în mai multe browsere, cum ar fi codul de mai jos:
XMLHttpRequest are un număr de „standard“ (un standard, deoarece așa cum sa menționat mai sus citat, acest obiect nu este standardizat pentru toate browserele) proprietățile și metodele care permit acest obiect pentru a trimite o cerere pentru a verifica starea cererii și primirea unui rezultat de interogare de la serverul de la distanță. Aceste proprietăți și metode vor fi discutate în următoarele două tabele.
Tabelul 1 prezintă proprietățile "standard" ale XMLHttpRequest
Anulează cererea curentă
Returnează toate antetele de răspuns sub forma unei chei / valoare
Returnează valoarea unui antet specific
deschis (metoda, url, asincronă, nume de utilizator, parolă)
Setează starea solicitării către server. Primul parametru specifică metoda de solicitare - PUT, GET, POST, a doua - adresa URL a solicitării, a treia (opțională) - tipul de solicitare (sincronă sau asincronă), al patrulea și al cincilea (de asemenea opțional)
Trimite o cerere către server
Setează valoarea unui antet specific. Înainte de a apela această metodă, trebuie să apelați metoda deschisă
De asemenea, XMLHttpRequest conține un număr de proprietăți, care sunt prezentate mai jos:
Operatorul de evenimente care apare de fiecare dată când se modifică starea solicitării
Starea cererii. Sunt disponibile următoarele valori: 0 - cererea este neinitializată, 1 - descărcarea, 2 - descărcarea este finalizată, 3 - interactivă, 4 - completă
Un răspuns de la server ca un șir
Răspunsul de la server la XML. Acest obiect poate fi procesat și verificat ca DOM
Codul de stare HTML (de exemplu 200 - OK)
Titlul codului de stare HTML
Ie când această pagină este solicitată, acest hanlder returnează un document text / simplu cu o singură linie de "Hello World". Suntem un astfel de handler este perfect.
Acum creați o pagină HTML normală care va executa interogarea folosind XMLHttpRequest.
Acest cod este destul de simplu. Când faceți clic pe „Start asincronă Request“ se numește funcția client startRequest, care, la rândul său, determină inițial funcția createXMLHttpRequest examinat anterior pentru a crea obiectul XMLHttpRequest și apoi atinge (funcția client handleStateChange) handler evenimentul ReadyStateChange pentru acest obiect, se deschide și trimite o cerere . Dacă pagina solicitată este disponibilă și a fost obținut datele, starea se schimbă starea la 200. Prin urmare, funcția handleStateChange vom verifica valoarea acestei proprietăți. Cu valoarea dorită, folosim alerta pentru a tipări valoarea rezultată. Încearcă cum funcționează:
În acest cod simplu, de fapt, toată funcționalitatea AJAX este pusă - obținerea de date de la server fără a reîncărca pagina. Înțelegerea acestui mecanism este suficientă pentru a înțelege esența AJAX și, de asemenea, să o utilizați cu succes în aplicațiile dvs. Mai mult decât o chestiune de tehnică și în continuare vom lua în considerare punerea în aplicare a tuturor acestor, dar folosind ASP.NET J
Utilizarea AJAX în ASP.NET
Recuperări de pagină.
Comenzile de returnare sunt o formă specială de returnare a formularului, adică Pagina trece prin propriul buclă de eveniment, dar datele formularului sunt returnate clientului înainte de începerea redării formularului, adică înainte de redresare. Ca în cazul oricărei implementări AJAX, cererea începe pe partea clientului ca rezultat al unui eveniment, în timp ce funcția client încorporată numită WebForm_DoCallback este lansată. Această funcție are următorul prototip:
pageID - ID-ul paginii care efectuează apelul,
argument este un argument șir transmis la server,
returnCallback - funcția client sau script-ul client, care trebuie executat după ce partea serverului revine la control
context - date transferate către returnCallback.
errorCallback - funcția client sau scriptul client care se execută atunci când apar erori
useAsync - stabilește dacă cererea este sincronă sau asincronă.
Următorul pas este ca pagina serverului să știe că trebuie să suporte apelurile de apel (adică, în primul rând, să returneze datele înainte de redarea paginii). Pentru a face acest lucru, această pagină ar trebui să implementeze interfața System.Web.UI.IcallbackEventHandler.
Această interfață conține 2 metode:
Efectuarea unui apel invers pe partea serverului constă în 2 etape: pregătirea și returnarea rezultatului. Metoda RaiseCallbackEvent este numită mai întâi și este concepută pentru a pregăti execuția codului la distanță. Metoda GetCallbackResult este executată mai târziu când rezultatul este gata pentru a fi trimis. Această partiție a fost introdusă doar în versiunea lansată .NET 2.0, în versiunile anterioare, aceste două metode au fost combinate într-una (aceasta a fost făcută cu o lucrare asincronă). Metoda GetCallbackResult returnează șirul, astfel încât datele returnate trebuie să fie serializate printr-o metodă sau alta într-un șir, iar pe de altă parte, deserializate.
Când solicitați o pagină de script-ul client se execută mai întâi Init, după care bucla evenimentelor standard de încărcare a paginii înainte de sarcina evenimentului, în proprietate de încărcare IsCallback setată la true, finalizarea Load executa metode ICallbackEventHandler interfață, apoi așa cum sa menționat mai sus, executarea este întreruptă, fără a intra în etapa redare. În primul rând, se spune că nu există nici o etapă de Viewstate conservare, așa că încercați orice pentru a salva metoda standard Viewstate este inutil (este de înțeles, deoarece Viewstate paginii nu este actualizat). Acesta se ocupă de comunicare între pagina și așa-numitul server de callback manager. callback Manager este o bibliotecă client-script. Aceste script-uri client formează și trimit o cerere, primesc și dezasamblează răspunsul de la server etc. Privind View Source oricare dintre pagini, puteți vedea linii, cum ar fi
După descărcarea unui fișier care returnează un handler WebResource.axd dat cu parametrii specificați, puteți trece adânc în examinarea script-urilor client care sunt responsabile pentru acțiunile de mai sus J
Scrierea unei metode client WebForm_DoCallback nu este dificilă, dar implică unele dificultăți în cazul generării dinamice sau trecerii parametrilor. Pentru această clasă Page.ClientScript (System.Web.UI.ClientScriptManager) a introdus o metodă specială - GetCallbackEventReference, care primește un număr de parametri și altele asemenea, de exemplu, metoda GetPostBackEventReference, generează un cod client corespunzător. Nu aș putea spune că această metodă este foarte elegant, mai ales atunci când trebuie să treci parametri la klienskij script-ul (mai ales prezența ghilimele simple și duble în linie kontateniruyuscheysya strică imaginea de ansamblu), dar mai confortabil decât pe frunte pentru a scrie WebForm_DoCallback.
Această metodă are următorul prototip:
țintă este pagina sau WebControl care va gestiona apelul invers. În consecință, această pagină sau control ar trebui să implementeze interfața ICallbackEventHandler, altfel o excepție va fi aruncată:
System.InvalidOperationException: Ținta „__Page“ pentru apel invers nu a putut fi găsit sau nu a pus în aplicare ICallbackEventHandler.
Generă primul parametru al funcției WebForm_DoCallback
Argumentul este argumentul transmis funcției sau scriptului clientului. Corespunde celui de-al doilea parametru al funcției WebForm_DoCallback.
returnCallback - funcția client sau script-ul client care ar trebui să fie executat după serverul de control se întoarce laterale (al treilea parametru WebForm_DoCallback)
context - date care sunt transmise returncallback-ului clientului (al patrulea parametru WebForm_DoCallback).
errorCallback - funcția client sau scriptul client executat atunci când apar erori (parametrul 5 WebForm_DoCallback)
useAsync - stabilește dacă cererea este sincronă sau asincronă (al șaselea parametru WebForm_DoCallback).
Să încercăm să o rezolvăm cu ajutorul AJAX.
Pentru aceasta, creați o pagină ASPX obișnuită:
Aplicați apoi interfața ICallbackEventHandler pentru clasa de pagini:
Trebuie să luăm evenimentulArgument în metoda RaiseCallbackEvent, facem acțiunile corespunzătoare și apoi să-l transmitem către GetCallbackResult pentru a returna clientul. Pentru aceasta vom introduce variabila evArg.
Apoi, trebuie să atașăm handler-ul clientului pentru primul SELECT. Ie Când modificați valoarea, trebuie apelată funcția WebForm_DoCallback. Așa că scriem J
Acum scrieți două metode, primul dintre care este necesar doar o singură dată - pentru lista obligatorie a producătorilor și a doua - pentru lista de modele. Pentru a nu suferi din bugetul de stat, vom simplifica după cum urmează:
Și, prin urmare, pentru a completa lista producătorilor, trebuie să adăugați la Page_Load:
Există două lucruri de făcut: scrieți o funcție client care va fi executată după codul de returnare și scriere pentru funcțiile RaiseCallbackEvent și GetCallbackResult.
Mai întâi, scrieți codul pentru aceste două funcții:
Parametrul eventArgument RaiseCallbackEvent derapeze funcție a evArg variabile interne (această valoare este selectată producător), și în lista de modele din aceeași variabilă GetCallbackResult perebindiv intră toate modelele de valori pentru un producător dat, împărțindu-le cum ar fi „“ (un fel de metoda de serializare).
Apoi scrieți funcția client CallbackFunction. Această funcție trebuie să elibereze SELECT pentru modele și, după ce a primit o valoare de șir de la GetCallbackResult, deserializează această valoare și umple SELECT cu noi valori.
Asta e totul. Acest exemplu este cu siguranță departe de a fi perfect (de exemplu, tratarea erorilor nu este luată în considerare), dar este pe deplin operațională. Puteți verifica acest lucru deschizând această pagină:
Pentru a adăuga componente la proiectul ATLAS, mai întâi trebuie să vă asigurați că ATLAS este instalat pe computer, altfel îl instalați. Apoi puteți să creați un proiect de tip "ATLAS" sau să adăugați un link către bibliotecă. În al doilea caz, trebuie să configurați și web.config pentru a utiliza manual ATLAS.
La momentul scrierii acestui articol, ATLAS a inclus 21 de control, dintre care unele sunt folosite destul de frecvent, iar altele le-am folosit personal, cu excepția nicăieri în aplicații de testare. Controlul CascadingDropDown este realizarea ATLAS a ceea ce am scris mai sus J cel mai utilizat pe scara larga si versatil, în opinia mea, este controlul UpdatePanel - acest panou (pe client, acesta este convertit într-un element div), care poate fi supraîncărcat fără a supraîncărca pagina, și poate conține alte controale . UpdatePanel este alcătuit din 2 părți - ContentTemplate și Triggers. ContentTemplate este zona de conținut ContentTemplate (de exemplu, așa cum am spus, poate fi de la alte controale ASP.NET, tag-uri HTML și text simplu). Triggers conține o listă de declanșatoare pentru acest UpdatePanel. Trigger - este ca și cum handler eveniment pentru care acest UpdatePanel să fie actualizat. Declanșările sunt 2 tipuri - ControlEventTrigger și ControlValueTrigger. Prima dintre ele răspunde la eveniment de control (de exemplu, controlul este buton și evenimente de interceptare eveniment Faceți clic), al doilea - privind proprietățile schimbării (cum ar fi schimbarea valorilor text pentru TextBox de control). De exemplu, următorul cod:
1. (și cel mai mare) în cazul în care utilizatorul a tastat textul și în acel moment se apropie timpul de supraîncărcare - utilizatorul a pierdut focalizarea intrării și, în consecință, acea parte a mesajului pe care la introdus deja
2. Suprasolicitarea a obligat utilizatorul să aștepte încărcarea paginii și, în consecință, a trebuit să vadă o pagină albă cu un indicator de descărcare în partea de jos
3. Supraîncărcarea nu a putut fi făcută prea des, deoarece În plus față de textul însuși, a trebuit să descărcați și toate atributele paginii - imagini, logo-uri, bannere, marcaj HTML
Crearea unui chat cu toate funcțiile AJAX I va oferi cititorului, dar cu ajutorul componentei ATLAS - UpdatePanel - vom crea acum.
1. Pe formular, adaug un buton si il fac invizibil.
3. În UpdatePanel, adaug un declanșator pentru acest buton:
De asemenea, trebuie să vă înregistrați <%@ Page %> - EnableEventValidation = "false"
4. Și, de asemenea, în eticheta organismului: onload = "setInterval ('UpdatingPanel ()', 3000);"
Cum functioneaza - functia clientului UpdatingPanel simuleaza, in general, apasarea butonului btnUpdate. pentru că în UpdatePanel există un declanșator pentru acest buton - atunci apelarea acestei funcții client va provoca actualizarea UpdatePanel. Putem numi doar această funcție client la anumite intervale, pe care le facem în organism.
Ca rezultat, avem următorul cod:
Pentru a încerca această versiune simplă a chat-ul folosind ATLAS în practică - deschide mai multe browsere cu această pagină și în fiecare dintre ele scrie pe post. În acest caz, puteți vedea că după ce a scris al doilea mesaj în browser-ul, acesta va apărea după primele 3 secunde.
În acest articol, am descris principiile de lucru cu AJAX în ASP.NET și sper că va ajuta programatorii să înceapă să utilizeze această tehnologie în aplicațiile lor ASP.NET.
Articole similare
Trimiteți-le prietenilor: