1. Technologia AJAX Podstawy technologii AJAX Michał Kuciapski Katedra Informatyki Ekonomicznej
2.
3.
4.
5. Korzyści stosowania technologii AJAX(2) Klient: [interakcja] przesłanie żądania -> dalsze równoczesnej inne interakcje w trakcie oczekiwania <interakcje JavaScript; żądania HTTP> Serwer: przetworzenie żądania HTTP i przesłanie porcji danych dla odświeżenia zawartości wyłącznie fragmentu strony Klient: [interakcja] przesłanie żądania -> oczekiwanie Serwer: przesłanie dużej strony Klient: przesłanie żądania -> oczekiwanie Serwer: przesłanie dużej strony Klient: przesłanie żądania -> oczekiwanie Serwer: przesłanie dużej strony AJAX Strona bez AJAX
23. Przykład wdrożenia technologii AJAX – kod html <script type="text/javascript"> function wyliczDlugosc() { var ajaxT=new XMLHttpRequest(); ajaxT.onreadystatechange = function() { if (ajaxT.readyState == 4) { document.znaki.dlugosc.value = ajaxT.responseText; } } var url = "wylicz.aspx?tekst=" + document.getElementById("tekst").value; ajaxT.open("GET",url,true); ajaxT.send(); } </script> </head> <body> <form id="znaki" runat="server"> <div> <input id="tekst" type="text" onkeyup="wyliczDlugosc();" runat="server" /> <input id="dlugosc" type="text" readonly="readonly" runat="server" /> </div> </form> Klient Utworzenie obiektu komunikacji AJAX Zdefniowanie metody otrzymania odpowiedzi Sprawdzenie stanu wykonania zadania Przygotowanie żądania Wysłanie żądania Przypisanie metody zdarzeniu Zwrócenie odpowiedzi
24. Przykład wdrożenia technologii AJAX – kod html <%@ Page Language="C#" %> <script runat="server"> void Page_Load(object sender, EventArgs e) { string tekst = Page.Request.QueryString[0]; int dlugosc = tekst.Length; Response.Write(dlugosc); } </script> Server
![Tematyka wykładu ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)