Introduktion till Ajax i ASP.NET

AJAX i ASP.NET är känt som asynkron JavaScript och XML. Det handlar om att uppdatera funktioner på en webbsida, utan att ladda den varje gång vi öppnar webbsidan. Det är en teknik som används för att skapa mycket snabba och dynamiska webbsidor.

Ajax i ASP.NET används främst när användaren har dynamiskt innehåll och måste laddas om flera gånger efter att ändringarna har gjorts. Denna teknik påskyndar också svarstid på sidan. Det har också ett användarvänligt gränssnitt och interaktiva webbsidor.

Arbeta med Ajax i ASP.NET

AJAX är den avancerade versionen av de statiska sidorna som användes under lång tid. AJAX är byggt för dynamisk natur och en användarvänlig miljö. AJAX i ASP.NET fungerar som nedan listade punkter.

  • XMLHTTPRequest-objektet skapas från webbläsaren och skickas till serversidan.
  • Servern kommer att behandla begäran som skickas av webbläsaren och skickar data tillbaka till webbläsaren med den begärda informationen.
  • Webbläsaren kommer att behandla data och uppdatera innehållet på sidan.
  • När innehållet har uppdaterats kan användaren se informationen på skärmen.

Antag att du har en anställningsportal för anställda och att du måste lägga till en ny anställd i databasen. I flödesschemat ovan kan vi se att klienten skapar en XMLHTTP-förfrågan med den begärda informationen till servern. Här kommer medarbetarinformationen att börja med att lägga till förarens och efternamnet.

På den webbsida som användaren ser redan måste ett fåtal medarbetaruppgifter läggas till i databasen. Det visar några förslag på namnen som finns i namnet som matchar nyckelordet. Servern skickar sedan den begärda informationen tillbaka till klienten. Om medarbetaren i databasen inte läggs till skapas en ny post med hans detaljer.

Nu kommer klienten att behandla data som skickas av servern och responstiden är snabbare jämfört med andra tekniker som används. Nu läggs medarbetarinformationen fram med framgång i databasen, så om de uppgifter som nyligen lagts till måste ses kan användaren helt enkelt ange medarbetarnas namn och unika ID för att hämta resultaten på skärmen. Här är användargränssnittet mycket interaktivt och responstiden är också mindre.

Exempel på Ajax i ASP.NET

Här är några exempel på Ajax i ASP.NET som förklaras nedan:

Exempel 1

I det här exemplet skapas knappen men åtgärden kommer inte att utföras när vi klickar på knappen.

Koda:



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:

Exempel 2

I det här exemplet kan vi se hur vi kan vidta åtgärder genom att klicka på knappen du behöver för att omdirigera den till någon annan sida.

Koda:

Låt oss se vad användaren skriver.


funktion textfunktion () (
var obj = document.getElementById ("textbox"). värde;
document.getElementById ("text"). innerHTML = "Bokstäverna du skriver:" + obj;
)

Produktion:

Exempel 3

I det här exemplet kommer vi att diskutera hur du utför belastningsfunktion i ajax.

Koda:



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:

Exempel 4

Efter att ha klickat på knappen kommer innehållet i asp-filen att skrivas ut på skärmen. Det finns två metoder för att hämta informationen, dvs GET och POST-metoden.

Koda:



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 hos Ajax i ASP.NET

Nedan listade är några viktiga funktioner i AJAX i ASP.NET .

  • Användarvänligt: Detta är en av huvudfunktionerna i Ajax där webbsidans användargränssnitt är så flexibelt och bekvämt för användaren att använda sidan eftersom han måste behöva fylla alla nödvändiga uppgifter.
  • Webbsida snabbare: Den här funktionen i AJAX är den primära eftersom den har byggts för samma. Den här funktionen gör det möjligt för webbsidan att skapa begäran och serverns svarstid inom några sekunder. Dessa funktioner gör att webbsidan laddas snabbare än de vanliga. Vi behöver inte ladda hela sidan hela tiden bara den specifika delen måste laddas om den har ändrats.
  • Serveroberoende teknik: AJAX i asp.net kan användas oavsett programmeringsspråk som JavaScript, PHP, etc. Många språk stöder AJAX och dess egenskaper och funktioner.
  • Prestanda: Den används främst för att prestanda och hastighet på en webbsida ska fungera. Tiden från att skapa XMLHTTP-begäran till att få tillbaka datasvaret från servern är snabb när du använder AJAX. Så en av de viktigaste faktorerna används för prestandabas på en webbsida.
  • Supportwebbläsare: AJAX används främst eftersom den stöder nästan alla webbläsare som används på marknaden. Förutom konceptet som skapar XMLHTTP-objektet kommer behandlingen att vara densamma för alla webbläsare eftersom JavaScript-språk används i de flesta webbapplikationer.
  • Interaktiva applikationer : Att använda ajax är mycket enkelt för utvecklaren eller programmeraren att skapa mer interaktiva och användarvänliga webbapplikationer. Som vi vet i dagens värld är allt en tvåvägsprocess där du måste lägga såväl som att hämta data, så det är till hjälp i tvåvägsprocessen där klienten kan interagera med servern för att hämta och skriva uppgifterna.

Slutsats

I den här artikeln diskuterade vi funktionerna i AJAX i asp.net och hur det fungerar i ASP.Net-applikationer. Vi diskuterade också några exempel där AJAX används och dess egenskaper. Det är en av de mest användbara och kraftfulla teknikerna för den moderna miljön. Det används mycket på sociala mediesajter som Facebook, Twitter etc.

Rekommenderade artiklar

Detta är en guide till Ajax i ASP.NET. Här diskuterar vi funktionerna hos Ajax i ASP.NET tillsammans med exemplen och kodimplementering. Du kan också titta på följande artiklar för att lära dig mer -

  1. jQuery Ajax-metoder
  2. JSON vs AJAX
  3. Vad är Ajax?
  4. AJAX intervjufrågor

Kategori:

Mjukvaruutveckling