Introduktion til Ajax i ASP.NET

AJAX i ASP.NET er kendt som asynkron JavaScript og XML. Det handler om at opdatere funktioner på en webside uden at indlæse den hver gang vi åbner websiden. Det er en teknik, der bruges til at skabe meget hurtige og dynamiske websider.

Ajax i ASP.NET bruges hovedsageligt, når brugeren har dynamisk indhold og skal genindlæses flere gange, efter at ændringerne er blevet udført. Denne teknologi fremskynder også sidens responstid. Det har også en brugervenlig grænseflade og interaktive websider.

Arbejde med Ajax i ASP.NET

AJAX er den avancerede version af de statiske sider, der blev brugt i lang tid. AJAX er bygget til dynamisk karakter og et brugervenligt miljø. AJAX i ASP.NET fungerer som nedenstående punkter.

  • XMLHTTPRequest-objektet oprettes fra browseren og sendes til serversiden.
  • Serveren behandler anmodningen sendt af browseren og sender dataene tilbage til browseren med den ønskede detalje.
  • Browseren behandler dataene og opdaterer indholdet på siden.
  • Når indholdet er opdateret, kan brugeren se dataene på skærmen.

Antag, at du har en medarbejderdataindgangsportal, og at du skal tilføje en ny medarbejder i databasen. I ovenstående flowdiagram kan vi se, at klienten opretter en XMLHTTP-anmodning med de anmodede data til serveren. Her starter medarbejderdetaljerne med at tilføje medarbejderens for- og efternavn.

På den webside, som brugeren allerede ser, skal et par medarbejderdetaljer tilføjes i databasen. Det viser et par forslag til navnene, der findes i det navn, der matcher nøgleordet. Serveren sender derefter de ønskede data tilbage til klienten. Hvis medarbejderen i databasen ikke tilføjes, oprettes en ny post med hans detaljer.

Nu behandler klienten de data, der sendes af serveren, og responstiden er hurtigere sammenlignet med andre anvendte teknologier. Nu er medarbejderdetaljerne tilføjet med succes i databasen, så hvis de tilføjede detaljer for nylig skal ses, kan brugeren blot indtaste medarbejdernavnet og det unikke id for at hente resultaterne på skærmen. Her er brugergrænsefladen meget interaktiv, og responstiden er også mindre.

Eksempler på Ajax i ASP.NET

Her er nogle eksempler på Ajax i ASP.NET, der er forklaret nedenfor:

Eksempel 1

I dette eksempel oprettes knappen, men handlingen udføres ikke, når vi klikker på knappen.

Kode:



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

Produktion:

Eksempel 2

I dette eksempel kan vi se, hvordan vi kan tage handling, ved at klikke på knappen, du har brug for at omdirigere den til en anden side.

Kode:

Lad os se, hvad brugeren skriver.


funktion tekstfunktion () (
var obj = document.getElementById ("tekstboks") .værdi;
document.getElementById ("tekst"). innerHTML = "De bogstaver, du skriver:" + obj;
)

Produktion:

Eksempel 3

I dette eksempel vil vi diskutere, hvordan man udfører belastningsfunktion i ajax.

Kode:



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

Produktion:

Eksempel 4

Når du har klikket på knappen, udskrives indholdet af asp-filen på skærmen. Der er to metoder til at hente oplysningerne, dvs. GET og POST-metoden.

Kode:



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();
)

Produktion:

Funktioner af Ajax i ASP.NET

Nedenstående er få vigtige funktioner i AJAX i ASP.NET .

  • Brugervenligt: Dette er en af ​​hovedfunktionerne i Ajax, hvor brugergrænsefladen på websiden er så fleksibel og behagelig for brugeren at bruge siden, da han skal være nødt til at udfylde alle de nødvendige oplysninger.
  • Webside hurtigere: Denne funktion i AJAX er den primære, da den er bygget til det samme. Denne funktion giver websiden mulighed for at oprette anmodningen og serverens responstid inden for få sekunder. Disse funktioner gør også, at hjemmesiden genindlæses hurtigere end de sædvanlige. Vi behøver ikke at genindlæse hele siden hele tiden, kun den specifikke del skal indlæses, hvis den er blevet ændret.
  • Server uafhængig teknologi: AJAX i asp.net kan bruges uanset ethvert programmeringssprog som JavaScript, PHP osv. Mange sprog understøtter AJAX og dens egenskaber og funktioner.
  • Ydeevne: Den bruges hovedsageligt til dens ydeevne og hastighed på en webside. Tiden fra oprettelse af XMLHTTP-anmodning til at få datasvaret tilbage fra serveren er hurtig, mens du bruger AJAX. Så en af ​​de vigtigste faktorer bruges til performance-basis på en webside.
  • Support-browsere: AJAX bruges primært, fordi det understøtter næsten alle de browsere, der bruges på markedet. Bortset fra det koncept, der opretter XMLHTTP-objektet, vil behandlingen være den samme for alle webbrowsere, fordi JavaScript-sprog bruges i de fleste webapplikationer.
  • Interaktive applikationer : Brug af ajax er meget let for udvikleren eller programmereren at oprette mere interaktive og brugervenlige webapplikationer. Som vi ved i nutidens verden, er alt en tovejsproces, hvor du skal lægge såvel som at hente dataene, så det er nyttigt i tovejsprocessen, hvor klienten kan interagere med serveren til hentning og skrive dataene.

Konklusion

I denne artikel diskuterede vi funktionerne i AJAX i asp.net og hvordan det fungerer i ASP.Net-applikationer. Vi diskuterede også et par eksempler, hvor AJAX anvendes og dens egenskaber. Det er en af ​​de mest nyttige og kraftfulde teknologi til det moderne miljø. Det bruges meget på sociale mediesider som Facebook, Twitter osv.

Anbefalede artikler

Dette er en guide til Ajax i ASP.NET. Her diskuterer vi funktionerne i Ajax i ASP.NET sammen med eksemplerne og kodeimplementering. Du kan også se på de følgende artikler for at lære mere -

  1. jQuery Ajax-metoder
  2. JSON vs AJAX
  3. Hvad er Ajax?
  4. AJAX Interview Spørgsmål

Kategori:

Softwareudvikling