Hoe werkt AJAX?

Wat is de essentie van AJAX? Ik wil bijvoorbeeld een link op mijn pagina hebben zodat wanneer een gebruiker op deze link klikt, bepaalde informatie naar mijn server wordt gestuurd zonder dat de huidige pagina opnieuw wordt geladen. Is dat Ajax?

Ik heb dit gedrag kunnen krijgen door isoframes te gebruiken. In meer detail plaats ik een link (laten we zeggen een kleine afbeelding) in een klein isoframe. Wanneer de gebruiker op deze link klikt, laadt de browser alleen de pagina in het isoframe opnieuw.

Ik denk echter dat het geen elegante manier is om het doel te bereiken. Ik denk dat ik AJAX moet gebruiken. Hoe werkt het? Kan het gebruik van XHTML het overwogen probleem op een elegante manier oplossen? Of moet ik JavaScript gebruiken?

Ik heb niet veel nodig. Ik wil alleen een kleine link hebben die (na het klikken) wat informatie naar de server heeft gestuurd. Laten we zeggen dat ik een “ster-afbeelding” heb in de buurt van een bericht. Als een gebruiker op de ster klikt (hij/zij vindt het bericht leuk), verandert de ster de kleur en mijn serverupdatedatabase (om te onthouden dat de gebruiker het bericht leuk vindt).


Antwoord 1, autoriteit 100%

Als je helemaal nieuw bent met AJAX (wat staat voor Asynchronous Javascript And XML), is de AJAX-invoer op wikipedia is een goed startpunt:

Net als DHTML en LAMP is AJAX geen technologie op zich, maar een groep technologieën. AJAX gebruikt een combinatie van:

  • HTML en CSS voor markering en
    styling informatie.
  • De DOM
    toegankelijk met JavaScript om
    dynamisch weergeven en communiceren met
    de gepresenteerde informatie.
  • Een methode
    voor het asynchroon uitwisselen van gegevens
    tussen browser en server, daardoor
    het vermijden van pagina’s herladen. De
    XMLHttpRequest (XHR) object is meestal
    gebruikt, maar soms een IFrame-object
    of een dynamisch toegevoegde tag is
    in plaats daarvan gebruikt.
  • Een formaat voor de gegevens
    naar de browser gestuurd. Veelgebruikte formaten
    inclusief XML, voorgeformatteerde HTML, gewoon
    tekst en JavaScript-objectnotatie
    (JSON). Deze gegevens kunnen worden aangemaakt
    dynamisch door een of andere vorm van
    server-side scripting.

Zoals je kunt zien, is er vanuit puur technologisch oogpunt niets nieuws. De meeste AJAX-onderdelen waren er al in 1994 (1999 voor het XMLHttpRequest-object). De echte nieuwigheid was om deze onderdelen samente gebruiken zoals Google deed met Gmail (2004) en Google Maps (2005). Beide sites hebben in feite een grote bijdrage geleverd aan de promotie van AJAX.

Een afbeelding zegt meer dan duizend woorden, hieronder een diagram dat de communicatie tussen de client en de externe server illustreert, evenals de verschillen tussen de klassieke en de AJAX-aangedreven applicaties:

Voor het oranje gedeelte kun je alles met de hand doen (met het XMLHttpRequest-object) of je kunt beroemde JavaScript-bibliotheken gebruiken zoals jQuery, Prototype, YUI, enz. om de clientzijde van uw toepassing te “AJAXify”. Dergelijke bibliotheken zijn bedoeld om de complexiteit van JavaScript-ontwikkeling te verbergen (bijvoorbeeld de compatibiliteit tussen verschillende browsers), maar kunnen voor een eenvoudige functie overkill zijn.

Aan de serverkant kunnen sommige frameworks ook helpen (bijv. DWRof RAJAXals u Java gebruikt), maar het enige wat u hoeft te doen is in feite een service beschikbaar te stellen die alleen de vereiste informatie retourneert om de pagina (aanvankelijk als XML/XHTML – de X in AJAX – maar JSONheeft tegenwoordig vaak de voorkeur).


Antwoord 2, autoriteit 14%

De essentie van AJAX is dit:

Uw pagina’s kunnen op internet surfen en hun eigen inhoud bijwerken terwijl
de gebruiker doet andere dingen
.

Dat wil zeggen, uw javascript kan asynchrone GET- en POST-verzoeken verzenden (meestal via een XMLHttpRequestobject) gebruik vervolgens de resultaten van die verzoeken om de pagina te wijzigen (via Document Object Modelmanipulatie).


Antwoord 3, autoriteit 14%

AJAX omvat doorgaans het verzenden van HTTP-verzoeken van client naar server en het verwerken van de reactie van de server, zonder de hele pagina opnieuw te laden. (Asynchroon).

Javascript doet over het algemeen de indiening en ontvangt de gegevensreactie van de server (traditioneel XML, vaak andere, minder uitgebreide formaten zoals JSON)

Het Javascript kan dan de pagina DOM dynamisch bijwerken om de gebruikersweergave bij te werken.

Dus ‘Asynchrone Javascript en XML’.

Er zijn andere opties om de weergave van de gebruiker bij te werken zonder de pagina opnieuw te laden, zoals Flash en Applets, maar dit lijken geen goede oplossingen voor uw geval. Het lijkt erop dat Javascript de juiste keuze is. Er is veel goede bibliotheekondersteuning, zoals jQueryzoals die op deze site wordt gebruikt, dus je hoeft niet echt te schrijven veel Javascript zelf.


Antwoord 4, autoriteit 11%

Ajax is meer dan alleen een deel van de pagina herladen. Ajax staat voor Asynchronous Javascript And Xml.

Het enige onderdeel van Ajax dat je nodig hebt is het XMLHttpRequestobject uit javascript. Je moet het gebruiken om een ​​klein deel van je html te laden en opnieuw te laden als een div of andere tags.

Lees dat voorbeelden je zult sneller prof zijn dan je denkt!

<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>

Antwoord 5, autoriteit 4%

AJAX staat voor Asynchronous Javascript en XML. AJAX ondersteunt gedeeltelijke updates van pagina’s zonder de hele pagina terug naar de server te hoeven plaatsen.

Er zijn genoeg opties voor AJAX. De twee meest opvallende (misschien wel) zijn Microsoft’s ASP.NET AJAX (voorheen Atlas) en jQuery.

ASP.NET AJAX is relatief eenvoudig in te stellen als u al bekend bent met ASP.NET. jQuery is goed als u javascript al kent, en geeft zeer gedetailleerde controle over het opvragen en bijwerken van uw pagina.

HTH


Antwoord 6, autoriteit 2%

Als je geïnteresseerd bent, IBM heeft een serie van 10 (mogelijk meer) delen over Ajax: Ajax deel 1 beheersen

Hoewel het nu een paar jaar oud is, is het een goede intro, (zelfs als je net het eerste deel hebt gelezen!)

Ik denk dat de hele serie Hier moet worden vermeld , hoewel de site momenteel een beetje traag is voor mij…

Samenvatting:

Ajax, dat bestaat uit HTML, JavaScript™-technologie, DHTML en DOM, is een uitstekende aanpak die u helpt om onhandige webinterfaces om te zetten in interactieve Ajax-toepassingen. De auteur, een Ajax-expert, laat zien hoe deze technologieën samenwerken — van een overzicht tot een gedetailleerd overzicht — om uiterst efficiënte webontwikkeling een gemakkelijke realiteit te maken. Hij onthult ook de centrale concepten van Ajax, inclusief het XMLHttpRequest-object.


Antwoord 7

dat is ajax. je kunt ajax niet gebruiken zonder javascript. je moet naar voorbeelden van jQuery en prototypen kijken om een idee te krijgen van het gebruik.


Antwoord 8

Wat je probeert te doen is technisch gezien ajax. Ajax maakt xhtml-fragmenttransacties om secties van een pagina bij te werken. Javascript maakt deze get-verzoeken mooi en netjes.

Other episodes