Inleiding tot Ajax in ASP.NET

AJAX in ASP.NET staat bekend als asynchrone JavaScript en XML. Het gaat allemaal over het bijwerken van functies van een webpagina, zonder deze elke keer te laden als we de webpagina openen. Het is een techniek die wordt gebruikt om zeer snelle en dynamische webpagina's te maken.

Ajax in ASP.NET wordt veel gebruikt wanneer de gebruiker dynamische inhoud heeft en meerdere keren opnieuw moet worden geladen nadat de wijzigingen zijn doorgevoerd. Deze technologie versnelt ook de responstijd van de pagina. Het heeft ook een gebruikersvriendelijke interface en interactieve webpagina's.

Werken van Ajax in ASP.NET

AJAX is de geavanceerde versie van de statische pagina's die lange tijd werden gebruikt. AJAX is gebouwd voor dynamische aard en een gebruikersvriendelijke omgeving. AJAX in ASP.NET werkt als de onderstaande punten.

  • Het object XMLHTTPRequest wordt gemaakt vanuit de browser en naar de server gestuurd.
  • De server verwerkt het verzoek dat door de browser is verzonden en stuurt de gegevens terug naar de browser met het gevraagde detail.
  • De browser verwerkt de gegevens en werkt de inhoud op de pagina bij.
  • Zodra de inhoud is bijgewerkt, kan de gebruiker de gegevens op het scherm bekijken.

Stel dat u een portal voor gegevensinvoer van werknemers hebt en dat u een nieuwe werknemer aan de database moet toevoegen. In het bovenstaande stroomdiagram kunnen we zien dat de client een XMLHTTP-aanvraag met de gevraagde gegevens naar de server maakt. Hier beginnen de werknemersgegevens door de voor- en achternaam van de werknemer toe te voegen.

Op de webpagina die de gebruiker al ziet, moeten enkele personeelsgegevens aan de database worden toegevoegd. Er worden enkele suggesties getoond van de namen die voorkomen in de naam die overeenkomt met het trefwoord. De server stuurt de gevraagde gegevens vervolgens terug naar de client. Als de werknemer in de database niet wordt toegevoegd, wordt een nieuw item met zijn gegevens gemaakt.

Nu verwerkt de client de gegevens die door de server worden verzonden en is de responstijd sneller in vergelijking met andere gebruikte technologieën. Nu zijn de werknemersgegevens succesvol toegevoegd in de database, dus als de recent toegevoegde gegevens moeten worden bekeken, kan de gebruiker eenvoudig de naam van de werknemer en het unieke ID invoeren om de resultaten op het scherm op te halen. Hier is de gebruikersinterface zeer interactief en is de responstijd ook minder.

Voorbeelden van Ajax in ASP.NET

Hier zijn enkele voorbeelden van Ajax in ASP.NET die hieronder worden uitgelegd:

Voorbeeld 1

In dit voorbeeld wordt de knop gemaakt, maar de actie wordt niet uitgevoerd wanneer we op de knop klikken.

Code:



Example of AJAX
Let's take examples on buttons
Click on this button



Example of AJAX
Let's take examples on buttons
Click on this button



Example of AJAX
Let's take examples on buttons
Click on this button



Example of AJAX
Let's take examples on buttons
Click on this button



Example of AJAX
Let's take examples on buttons
Click on this button

Output:

Voorbeeld 2

In dit voorbeeld, door op de knop te klikken, moet u deze omleiden naar een andere pagina, we kunnen zien hoe we actie kunnen ondernemen.

Code:

Laten we eens kijken wat de gebruiker typt.


functie tekstfunctie () (
var obj = document.getElementById ("textbox"). value;
document.getElementById ("text"). innerHTML = "De letters die u typt:" + obj;
)

Output:

Voorbeeld 3

In dit voorbeeld zullen we bespreken hoe de belastingsfunctie in ajax moet worden uitgevoerd.

Code:



AJAX EXAMPLE ON LOAD
Click on this button

function load(url, copy_function) (
var xhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange = function() (
if (this.readyState == 4 && this.status == 200) (
copy_function(this);
)
);
xmlhttp.open("GET", url, true);
xmlhttp.send();
)
function loadfunction(xmlhttp) (
document.getElementById("Demonstration").innerHTML =
xmlhttp.responseText;
)



AJAX EXAMPLE ON LOAD
Click on this button

function load(url, copy_function) (
var xhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange = function() (
if (this.readyState == 4 && this.status == 200) (
copy_function(this);
)
);
xmlhttp.open("GET", url, true);
xmlhttp.send();
)
function loadfunction(xmlhttp) (
document.getElementById("Demonstration").innerHTML =
xmlhttp.responseText;
)



AJAX EXAMPLE ON LOAD
Click on this button

function load(url, copy_function) (
var xhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange = function() (
if (this.readyState == 4 && this.status == 200) (
copy_function(this);
)
);
xmlhttp.open("GET", url, true);
xmlhttp.send();
)
function loadfunction(xmlhttp) (
document.getElementById("Demonstration").innerHTML =
xmlhttp.responseText;
)

Output:

Voorbeeld 4

Na het klikken op de knop wordt de inhoud van het asp-bestand op het scherm afgedrukt. Er zijn twee methoden om de informatie op te halen, namelijk GET en POST-methode.

Code:



AJAX EXAMPLE ON LOAD
This example is for POST method
Click on this button

function loadPOST() (
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() (
if (this.readyState == 4 && this.status == 200) (
document.getElementById("Demonstration").innerHTML = this.responseText;
)
);
xmlhttp.open("POST", “ajax_load_POST.asp”, true);
xmlhttp.send();
)



AJAX EXAMPLE ON LOAD
This example is for POST method
Click on this button

function loadPOST() (
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() (
if (this.readyState == 4 && this.status == 200) (
document.getElementById("Demonstration").innerHTML = this.responseText;
)
);
xmlhttp.open("POST", “ajax_load_POST.asp”, true);
xmlhttp.send();
)



AJAX EXAMPLE ON LOAD
This example is for POST method
Click on this button

function loadPOST() (
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() (
if (this.readyState == 4 && this.status == 200) (
document.getElementById("Demonstration").innerHTML = this.responseText;
)
);
xmlhttp.open("POST", “ajax_load_POST.asp”, true);
xmlhttp.send();
)



AJAX EXAMPLE ON LOAD
This example is for POST method
Click on this button

function loadPOST() (
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() (
if (this.readyState == 4 && this.status == 200) (
document.getElementById("Demonstration").innerHTML = this.responseText;
)
);
xmlhttp.open("POST", “ajax_load_POST.asp”, true);
xmlhttp.send();
)



AJAX EXAMPLE ON LOAD
This example is for POST method
Click on this button

function loadPOST() (
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() (
if (this.readyState == 4 && this.status == 200) (
document.getElementById("Demonstration").innerHTML = this.responseText;
)
);
xmlhttp.open("POST", “ajax_load_POST.asp”, true);
xmlhttp.send();
)

Output:

Kenmerken van Ajax in ASP.NET

Hieronder staan ​​enkele belangrijke functies van AJAX in ASP.NET .

  • Gebruiksvriendelijk: dit is een van de belangrijkste functies in Ajax waarbij de gebruikersinterface van de webpagina zo flexibel en comfortabel is voor de gebruiker om de pagina te gebruiken dat hij alle vereiste gegevens moet invullen.
  • Webpagina sneller: deze functie in AJAX is de primaire omdat deze voor hetzelfde is gebouwd. Met deze functie kan de webpagina binnen enkele seconden het verzoek en de responstijd van de server maken. Deze functies zorgen er ook voor dat de webpagina sneller wordt geladen dan de gebruikelijke. We hoeven niet de hele pagina opnieuw te laden, alleen het specifieke onderdeel moet opnieuw worden geladen als het is gewijzigd.
  • Serveronafhankelijke technologie: AJAX in asp.net kan worden gebruikt ongeacht elke programmeertaal zoals JavaScript, PHP, enz. Veel talen ondersteunen AJAX en zijn kenmerken en functies.
  • Prestaties: het wordt voornamelijk gebruikt voor de prestaties en snelheid van een webpagina. De tijd die nodig is om het XMLHTTP-verzoek te maken en de gegevensrespons van de server terug te krijgen is snel tijdens het gebruik van AJAX. Dus een van de belangrijkste factoren wordt gebruikt voor de prestatiebasis op een webpagina.
  • Ondersteuning van browsers: AJAX wordt voornamelijk gebruikt omdat het bijna alle browsers ondersteunt die op de markt worden gebruikt. Afgezien van het concept dat het XMLHTTP-object maakt, zal de verwerking voor alle webbrowsers hetzelfde zijn omdat JavaScript-taal in de meeste webtoepassingen wordt gebruikt.
  • Interactieve toepassingen : het gebruik van ajax is heel eenvoudig voor de ontwikkelaar of programmeur om meer interactieve en gebruikersvriendelijke webtoepassingen te maken. Zoals we in de wereld van vandaag weten, is alles een tweerichtingsproces waarbij u de gegevens moet plaatsen en ophalen, dus het is nuttig in het tweerichtingsproces waarbij de client kan communiceren met de server om op te halen en te schrijven de gegevens.

Conclusie

In dit artikel hebben we de functies van AJAX in asp.net besproken en hoe het werkt in ASP.Net-toepassingen. We hebben ook een paar voorbeelden besproken waarin AJAX wordt gebruikt en de kenmerken ervan. Het is een van de meest bruikbare en krachtige technologie voor de moderne omgeving. Het wordt veel gebruikt op sociale mediasites zoals Facebook, Twitter, enz.

Aanbevolen artikelen

Dit is een gids voor Ajax in ASP.NET. Hier bespreken we de werking, functies van Ajax in ASP.NET samen met de voorbeelden en code-implementatie. U kunt ook de volgende artikelen bekijken voor meer informatie -

  1. jQuery Ajax-methoden
  2. JSON versus AJAX
  3. Wat is Ajax?
  4. Vragen tijdens solliciteren bij AJAX

Categorie:

Software ontwikkeling