Az Ajax bemutatása az ASP.NET-ben

Az AJAX az ASP.NET-ben aszinkron JavaScript és XML néven ismert. A weboldal funkcióinak frissítéséről szól, anélkül, hogy minden egyes alkalommal feltöltenénk a weboldalt. Ez a technika nagyon gyors és dinamikus weboldalak készítéséhez használható.

Az ASP.NET Ajax-jét főként akkor használják, amikor a felhasználó dinamikus tartalommal rendelkezik, és a módosítások elvégzése után többször kell újratölteni. Ez a technológia felgyorsítja az oldal válaszidejét is. Felhasználóbarát felülettel és interaktív weboldalakkal is rendelkezik.

Az Ajax működése az ASP.NET-ben

Az AJAX a statikus oldalak fejlett verziója, amelyeket hosszú ideig használtak. Az AJAX a dinamikus természet és a felhasználóbarát környezet számára lett kialakítva. Az ASP.NET AJAX az alább felsorolt ​​pontokhoz hasonlóan működik.

  • Az XMLHTTPRequest objektum a böngészőből jön létre, és a kiszolgáló oldalára kerül.
  • A szerver feldolgozza a böngésző által küldött kérést, és az adatokat visszaküldi a böngészőre a kért részletekkel.
  • A böngésző feldolgozza az adatokat és frissíti az oldal tartalmát.
  • A tartalom frissítése után a felhasználó megnézheti az adatokat a képernyőn.

Tegyük fel, hogy van munkavállalói adatbeviteli portálja, és új alkalmazottat kell felvennie az adatbázisba. A fenti folyamatábrán láthatjuk, hogy az ügyfél létrehoz egy XMLHTTP kérelmet a kért adatokkal a kiszolgálóra. Itt a munkavállaló adatai a munkavállaló kereszt- és vezetéknevének hozzáadásával kezdődnek.

Azon a weblapon, amelyen a felhasználó már lát néhány alkalmazottat, meg kell adni az adatbázist. Néhány javaslatot fog mutatni a névben szereplő nevekre, amelyek megegyeznek a kulcsszóval. A szerver ezután visszaadja a kért adatokat az ügyfélnek. Ha az adatbázisban szereplő alkalmazottat nem adják hozzá, akkor új bejegyzés jön létre az ő adataival.

Most az ügyfél feldolgozza a szerver által küldött adatokat, és a válaszidő gyorsabb, mint a többi alkalmazott technológiánál. Most az alkalmazottak adatait sikeresen hozzáadják az adatbázishoz, tehát ha a közelmúltban hozzáadott adatokat látni kell, a felhasználó egyszerűen megadhatja a munkavállaló nevét és egyedi azonosítóját, hogy az eredményeket a képernyőn lehívhassa. Itt a felhasználói felület nagyon interaktív, és a válaszidő is rövidebb.

Példák az Ajax-ra az ASP.NET-ben

Az alábbiakban bemutatunk néhány példát az Ajax-ra az ASP.NET-ben:

1. példa

Ebben a példában a gomb létrejön, de a gombra kattintva a művelet nem kerül végrehajtásra.

Kód:



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

Kimenet:

2. példa

Ebben a példában a gombra kattintva átirányítania kell más oldalra, láthatjuk, hogyan tudunk cselekedni.

Kód:

Lássuk, mit gépel a felhasználó.


függvény textfunction () (
var obj = document.getElementById ("textbox") érték;
document.getElementById ("text"). innerHTML = "A beírt betűk:" + obj;
)

Kimenet:

3. példa

Ebben a példában megvitatjuk, hogyan lehet az Ajax-ban végrehajtani a betöltési funkciót.

Kód:



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

Kimenet:

4. példa

A gombra kattintás után az asp fájl tartalma kinyomtatódik a képernyőn. Kétféle módszer áll rendelkezésre az információk beszerzésére: azaz a GET és a POST módszer.

Kód:



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

Kimenet:

Az Ajax tulajdonságai az ASP.NET-ben

Az alábbiakban felsoroljuk az AJAX néhány fontos jellemzőjét az ASP.NET-ben .

  • Felhasználóbarát: Ez az Ajax egyik fő szolgáltatása, ahol a weboldal felhasználói felülete olyan rugalmas és kényelmes a felhasználó számára, hogy az oldalt használhassa, mivel minden szükséges adatot kitöltenie kell.
  • Weblap gyorsabb: Ez az AJAX szolgáltatás az elsődleges, mivel ehhez ugyanahhoz készült. Ez a szolgáltatás lehetővé teszi a weboldal számára, hogy másodpercen belül létrehozza a kérést és a szerver válaszidejét. Ezek a funkciók a weboldal gyorsabb újratöltését is megkönnyítik, mint a szokásos webhelyek. Nem kell mindig az egész oldalt újratöltenünk, csak az adott részt kell újratölteni, ha megváltozott.
  • Szerverfüggetlen technológia: Az AJAX az asp.net-ben bármilyen programozási nyelvtől függetlenül használható, például JavaScript, PHP stb. Sok nyelv támogatja az AJAX-t, annak jellemzőit és jellemzőit.
  • Teljesítmény: elsősorban a weboldal teljesítményéhez és sebességéhez használják. Az AJAX használata során az XMLHTTP kérés létrehozásától az adatszolgáltatás visszajuttatásának a szerverről történő visszavételéhez szükséges idő gyors. Tehát az egyik fő tényezőt a teljesítmény alapjául használják egy weboldalon.
  • Támogatási böngészők: Az AJAX-et elsősorban azért használják, mert szinte az összes piacon használt böngészőt támogatja. Az XMLHTTP-objektumot létrehozó koncepció mellett a feldolgozás minden webböngészőnél azonos lesz, mivel a legtöbb webalkalmazásban JavaScript nyelvet használnak.
  • Interaktív alkalmazások : Az ajax használata a fejlesztőnek vagy a programozónak nagyon egyszerű interaktív és felhasználóbarát webes alkalmazások létrehozására. Mint a mai világban tudjuk, minden kétirányú folyamat, melyben el kell helyeznie és meg kell szereznie az adatokat, tehát hasznos a kétirányú folyamatban, ahol az ügyfél a kiszolgálóval kölcsönhatásba léphet, és le is írhat. az adat.

Következtetés

Ebben a cikkben megvitattuk az AJAX tulajdonságait az asp.net-ben és annak működését az ASP.Net alkalmazásokban. Ezenkívül néhány példát is megvitattunk az AJAX használatára és annak jellemzőire. Ez a modern környezet egyik leghasznosabb és leghatékonyabb technológiája. Széles körben használják a közösségi média oldalain, például a Facebook, a Twitter stb.

Ajánlott cikkek

Ez az ASP.NET Ajax útmutatója. Itt az Ajax működését, funkcióit az ASP.NET-ben tárgyaljuk, a példákkal és a kód megvalósításával együtt. A következő cikkeket is megnézheti további információkért -

  1. jQuery Ajax Methods
  2. JSON vs AJAX
  3. Mi az Ajax?
  4. AJAX interjúkérdések

Kategória:

Szoftverfejlesztés