Jak działa AJAX?

Jaka jest istota AJAX? Na przykład chcę mieć łącze na mojej stronie, tak aby po kliknięciu tego łącza przez użytkownika pewne informacje były wysyłane na mój serwer bez ponownego ładowania bieżącej strony. Czy to AJAX?

Udało mi się uzyskać to zachowanie za pomocą izoframe. Bardziej szczegółowo umieściłem link (powiedzmy mały obrazek) w małej isoframe. Kiedy użytkownik kliknie to łącze, przeglądarka ponownie załaduje tylko stronę w isoframe.

Uważam jednak, że nie jest to elegancki sposób na osiągnięcie celu. Myślę, że muszę używać AJAX. Jak to działa? Czy użycie XHTML może w elegancki sposób rozwiązać rozważany problem? A może muszę używać skryptów JavaScripts?

Nie potrzebuję dużo. Chcę tylko mieć mały link, który (po kliknięciu) wysyłałby jakieś informacje do serwera. Powiedzmy, że mam „gwiazdkę” w pobliżu wiadomości. Jeśli użytkownik kliknie gwiazdkę (podoba mu się wiadomość), gwiazdka zmieni kolor, a moja baza danych aktualizacji serwera (aby pamiętać, że ten użytkownik lubi wiadomość).

Jeśli jesteś zupełnie nowy w AJAX (co oznacza asynchroniczny Javascript i XML), wpis AJAX na Wikipedii jest dobrym punktem wyjścia:

Podobnie jak DHTML i LAMP, AJAX nie jest technologią samą w sobie, ale grupą technologii. AJAX wykorzystuje kombinację:

• HTML i CSS do oznaczania i stylizacji informacji.
• DOM dostępny za pomocą JavaScript w celu dynamicznego wyświetlania i interakcji z przedstawionymi informacjami.
• Metoda asynchronicznej wymiany danych między przeglądarką a serwerem, co pozwala uniknąć ponownego ładowania strony. Zwykle używany jest obiekt XMLHttpRequest (XHR), ale czasami zamiast niego używany jest obiekt IFrame lub dynamicznie dodawany tag.
• Format danych przesyłanych do przeglądarki. Typowe formaty to XML, wstępnie sformatowany HTML, zwykły tekst i JavaScript Object Notation (JSON). Te dane mogą być tworzone dynamicznie za pomocą jakiejś formy skryptów po stronie serwera.

Jak widać, z czysto technologicznego punktu widzenia nie ma tu nic nowego. Większość części AJAX istniała już w 1994 roku (1999 dla XMLHttpRequestobiektu). Prawdziwą nowością było użycie tych części razem, tak jak Google zrobił to z GMail (2004) i Google Maps (2005). W rzeczywistości obie witryny miały duży udział w promocji AJAX.

Obraz wart tysiąca słów, poniżej diagram ilustrujący komunikację między klientem a zdalnym serwerem, a także różnice między aplikacjami klasycznymi a aplikacjami opartymi na AJAX:

Jeśli chodzi o pomarańczową część, możesz zrobić wszystko ręcznie (z XMLHttpRequestobiektem) lub możesz użyć znanych bibliotek JavaScript, takich jak jQuery , Prototype , YUI , itp., Aby „AJAXify” po stronie klienta aplikacji. Takie biblioteki mają na celu ukrycie złożoności programowania JavaScript (np. Zgodność z różnymi przeglądarkami), ale mogą być przesadą w przypadku prostej funkcji.

Po stronie serwera niektóre frameworki też mogą pomóc (np. DWR lub RAJAX, jeśli używasz Java), ale wszystko, co musisz zrobić, to w zasadzie udostępnić usługę, która zwraca tylko wymagane informacje do częściowej aktualizacji strony (początkowo jako XML / XHTML - X w AJAX - ale JSON jest obecnie często preferowany).

Istota AJAX jest taka:

Twoje strony mogą przeglądać internet i aktualizować własne treści, podczas gdy użytkownik wykonuje inne czynności .

Oznacza to, że twój javascript może wysyłać asynchroniczne żądania GET i POST (zwykle za pośrednictwem XMLHttpRequestobiektu), a następnie wykorzystywać wyniki tych żądań do modyfikowania swojej strony (poprzez manipulację Document Object Model ).

AJAX zazwyczaj obejmuje wysyłanie żądań HTTP z klienta do serwera i przetwarzanie odpowiedzi serwera bez ponownego ładowania całej strony. (Asynchronicznie).

Javascript generalnie przesyła i odbiera odpowiedź danych z serwera (tradycyjnie XML, często inne mniej szczegółowe formaty, takie jak JSON)

JavaScript może następnie dynamicznie aktualizować DOM strony, aby zaktualizować widok użytkownika.

Tak więc „asychroniczny kod JavaScript i XML”.

Istnieją inne opcje aktualizacji widoku użytkownika bez ponownego ładowania strony, takie jak Flash i aplety, ale nie brzmią one jak dobre rozwiązania w twoim przypadku. Wygląda na to, że Javascript jest właściwą drogą. Istnieje wiele dobrych bibliotek, takich jak jQuery, które jest używane na tej stronie, więc nie musisz samodzielnie pisać dużo Javascript.

Ajax to coś więcej niż przeładowanie tylko części strony. Ajax oznacza Asynchronous Javascript And Xml.

Jedyną potrzebną częścią Ajax jest obiekt XMLHttpRequest z javascript. Musisz go użyć do załadowania i przeładowania małej części swojego html jako div lub innych tagów.

Przeczytaj ten przykład, a szybciej będziesz profesjonalny, jak myślisz!

<html>
<body>

<script type="text/javascript">
function ajaxFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else
  {
  alert("Your browser does not support XMLHTTP!");
  }
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
  {
  document.myForm.time.value=xmlhttp.responseText;
  }
}
xmlhttp.open("GET","time.asp",true);
xmlhttp.send(null);
}
</script>

<form name="myForm">
Name: <input type="text" name="username" onkeyup="ajaxFunction();" />
Time: <input type="text" name="time" />
</form>

</body>
</html>

AJAX to skrót od Asynchronous Javascript i XML. AJAX obsługuje częściowe aktualizacje stron bez konieczności wysyłania całej strony z powrotem na serwer.

Istnieje wiele opcji AJAX. Dwa najbardziej godne uwagi (prawdopodobnie) to ASP.NET AJAX firmy Microsoft (dawniej Atlas) i jQuery.

ASP.NET AJAX jest stosunkowo łatwy do skonfigurowania, jeśli znasz już ASP.NET. jQuery jest dobre, jeśli znasz już javascript i pozwala na bardzo szczegółową kontrolę nad zapytaniami i aktualizacjami Twojej strony.

HTH

Jeśli jesteś zainteresowany, IBM ma serię 10 (prawdopodobnie więcej) części na temat Ajax: Mastering Ajax część 1

Chociaż ma już kilka lat, to dobre intro (nawet jeśli przeczytałeś tylko pierwszą część!)

Myślę, że cała seria powinna być tutaj wymieniona , chociaż strona jest dla mnie trochę powolna ...

Podsumowanie:

Ajax, który składa się z technologii HTML, JavaScript ™, DHTML i DOM, to wyjątkowe podejście, które pomaga przekształcić niezgrabne interfejsy internetowe w interaktywne aplikacje Ajax. Autor, ekspert Ajax, pokazuje, jak te technologie współpracują ze sobą - od przeglądu po szczegółowy wygląd - aby uczynić niezwykle wydajnym tworzenie stron WWW łatwą rzeczywistością. Odsłania również główne koncepcje Ajax, w tym obiekt XMLHttpRequest.

to jest Ajax. nie możesz używać Ajax bez javascript. powinieneś przyjrzeć się jquery i przykładom prototypów, aby zorientować się w użyciu.

To, co próbujesz zrobić, to technicznie Ajax. Ajax tworzy transakcje fragmentów xhtml w celu aktualizacji sekcji strony. Javascript sprawia, że ​​żądania pobierania są ładne i schludne.