Johdatus Ajaxiin ASP.NET: ssä

ASP.NET: n AJAX tunnetaan asynkronisena JavaScriptinä ja XML: nä. Kyse on verkkosivun toimintojen päivittämisestä lataamatta sitä joka kerta, kun avaamme verkkosivun. Se on tekniikka, jota käytetään luomaan erittäin nopeita ja dynaamisia verkkosivuja.

Ajaxia ASP.NET: ssä käytetään pääasiassa, kun käyttäjällä on dynaamista sisältöä, ja se on ladattava uudelleen useita kertoja muutosten jälkeen. Tämä tekniikka myös nopeuttaa sivun vastausaikaa. Sillä on myös käyttäjäystävällinen käyttöliittymä ja interaktiiviset verkkosivut.

Ajaxin käyttö ASP.NET: ssä

AJAX on pitkään käytettyjen staattisten sivujen edistynyt versio. AJAX on rakennettu dynaamiseen luontoon ja käyttäjäystävälliseen ympäristöön. ASP.NET: n AJAX toimii kuten alla luetellut kohdat.

  • XMLHTTPRequest-objekti luodaan selaimesta ja lähetetään palvelinpuolelle.
  • Palvelin käsittelee selaimen lähettämän pyynnön ja lähettää tiedot takaisin selaimeen pyydettyjen yksityiskohtien kanssa.
  • Selain käsittelee tietoja ja päivittää sivun sisällön.
  • Kun sisältö on päivitetty, käyttäjä voi tarkastella tietoja näytöllä.

Oletetaan, että sinulla on työntekijöiden tietojen syöttöportaali ja sinun on lisättävä uusi työntekijä tietokantaan. Yllä olevassa vuokaaviossa voimme nähdä, että asiakas luo palvelimelle XMLHTTP-pyynnön pyydetyillä tiedoilla. Täällä työntekijän tiedot alkavat lisäämällä työntekijän etunimi ja sukunimi.

Sivustolle, jonka käyttäjä näkee jo muutama työntekijän tieto, on lisättävä tietokantaan. Se näyttää muutama ehdotus nimissä olevista nimistä, jotka vastaavat avainsanaa. Tämän jälkeen palvelin lähettää pyydetyt tiedot takaisin asiakkaalle. Jos työntekijää tietokantaan ei lisätä, luodaan uusi merkintä hänen tietoineen.

Nyt asiakas käsittelee palvelimen lähettämät tiedot ja vastausaika on nopeampi verrattuna muihin käytettyihin tekniikoihin. Nyt työntekijän tiedot on lisätty onnistuneesti tietokantaan, joten jos viime aikoina lisätyt tiedot täytyy nähdä, käyttäjä voi kirjoittaa työntekijän nimen ja yksilöivän tunnuksen hakeaksesi tulokset näytölle. Tässä käyttöliittymä on erittäin interaktiivinen ja myös vastausaika on lyhyempi.

Esimerkkejä Ajaxista ASP.NET: ssä

Tässä on esimerkkejä ASP.NET: n Ajaxista, jotka selitetään alla:

Esimerkki # 1

Tässä esimerkissä painike luodaan, mutta toimintoa ei suoriteta, kun napsautamme painiketta.

Koodi:



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

lähtö:

Esimerkki 2

Tässä esimerkissä näemme miten voimme toimia napsauttamalla painiketta, joka sinun täytyy ohjata se toiselle sivulle.

Koodi:



Katsotaan mitä käyttäjä kirjoittaa.


toiminto textfunction () (
var obj = document.getElementById ("textbox") .arvo;
document.getElementById ("text"). innerHTML = "Kirjoittamasi kirjaimet:" + obj;
)

lähtö:

Esimerkki 3

Tässä esimerkissä keskustelemme siitä, kuinka kuormitustoiminto suoritetaan ajaxissa.

Koodi:



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

lähtö:

Esimerkki 4

Napsauttamalla painiketta, asp-tiedoston sisältö tulostetaan näytölle. Tietojen noutamiseen on kaksi tapaa, kuten GET- ja POST-menetelmä.

Koodi:



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

lähtö:

Ajaxin ominaisuudet ASP.NET: ssä

Alla on lueteltu muutamia tärkeitä AJAX: n ominaisuuksia ASP.NET: ssä .

  • Käyttäjäystävällinen: Tämä on yksi Ajaxin pääominaisuuksista, jossa verkkosivun käyttöliittymä on käyttäjän kannalta joustava ja mukava käyttää sivua, koska hänen on täytettävä kaikki tarvittavat tiedot.
  • Verkkosivu nopeampi: Tämä AJAX-ominaisuus on ensisijainen, koska se on rakennettu samaa varten. Tämän ominaisuuden avulla verkkosivut voivat luoda pyynnön ja palvelimen vastausajan muutamassa sekunnissa. Nämä ominaisuudet tekevät verkkosivun lataamisesta myös tavallista nopeampaa. Meidän ei tarvitse ladata koko sivua koko ajan, vain tietty osa on ladattava uudelleen, jos sitä on muutettu.
  • Palvelimesta riippumaton tekniikka: asp.net-sivustossa olevaa AJAX: ää voidaan käyttää riippumatta ohjelmointikieleistä, kuten JavaScript, PHP jne. Monet kielet tukevat AJAX: ää ja sen ominaisuuksia.
  • Suorituskyky: Sitä käytetään pääasiassa verkkosivun suorituskykyyn ja nopeuteen. Aika, joka kuluu XMLHTTP-pyynnön luomisesta datavastauksen palauttamiseen palvelimelta, on nopea AJAX: n käytön aikana. Joten yhtä tärkeimmistä tekijöistä käytetään verkkosivun suoritusperusteisiin.
  • Tukiselaimet: AJAX: ää käytetään ensisijaisesti, koska se tukee melkein kaikkia markkinoilla käytettyjä selaimia. XMLHTTP-objektin luovan käsitteen lisäksi prosessointi on sama kaikille selaimille, koska JavaScriptiä käytetään useimmissa verkkosovelluksissa.
  • Interaktiiviset sovellukset : Ajaxin käyttö on erittäin helppoa kehittäjälle tai ohjelmoijalle luoda interaktiivisempia ja käyttäjäystävällisempiä verkkosovelluksia. Kuten tiedämme nykymaailmassa, kaikki on kaksisuuntainen prosessi, jossa sinun on laitettava ja haettava myös tietoja, joten siitä on apua kaksisuuntaisessa prosessissa, jossa asiakas voi vuorovaikutuksessa palvelimen kanssa hakea ja kirjoittaa tiedot.

johtopäätös

Tässä artikkelissa keskustelimme AJAX: n ominaisuuksista asp.netissä ja sen toiminnasta ASP.Net-sovelluksissa. Keskustelemme myös muutamasta esimerkistä, joissa AJAX: ää käytetään ja sen ominaisuuksista. Se on yksi hyödyllisimmästä ja tehokkaimmasta tekniikasta nykyaikaiseen ympäristöön. Sitä käytetään hyvin sosiaalisen median sivustoissa, kuten Facebookissa, Twitterissä jne.

Suositellut artikkelit

Tämä on ASP.NET: n Ajax-opas. Tässä keskustellaan Ajaxin toiminnasta, ominaisuuksista ASP.NET: ssä sekä esimerkkeistä ja koodin toteutuksesta. Voit myös katsoa seuraavia artikkeleita saadaksesi lisätietoja -

  1. jQuery Ajax -menetelmät
  2. JSON vs. AJAX
  3. Mikä on Ajax?
  4. AJAX -haastattelukysymykset