Wprowadzenie do Ajax w ASP.NET

AJAX w ASP.NET jest znany jako Asynchroniczny JavaScript i XML. Chodzi o aktualizację funkcji strony internetowej, bez ładowania jej za każdym razem, gdy otwieramy stronę. Jest to technika używana do tworzenia bardzo szybkich i dynamicznych stron internetowych.

Ajax w ASP.NET jest głównie używany, gdy użytkownik ma dynamiczną zawartość i musi zostać ponownie załadowany wiele razy po wprowadzeniu zmian. Technologia ta przyspiesza także czas odpowiedzi strony. Ma również przyjazny interfejs i interaktywne strony internetowe.

Działanie Ajax w ASP.NET

AJAX to zaawansowana wersja statycznych stron, które były używane przez długi czas. AJAX został zbudowany z myślą o dynamicznej naturze i przyjaznym środowisku. AJAX w ASP.NET działa jak wymienione poniżej punkty.

  • Obiekt XMLHTTPRequest jest tworzony z przeglądarki i wysyłany po stronie serwera.
  • Serwer przetworzy żądanie wysłane przez przeglądarkę i wyśle ​​dane z powrotem do przeglądarki z żądanymi szczegółami.
  • Przeglądarka przetworzy dane i zaktualizuje treść na stronie.
  • Po zaktualizowaniu treści użytkownik może wyświetlić dane na ekranie.

Załóżmy, że masz portal wprowadzania danych pracownika i musisz dodać nowego pracownika do bazy danych. Na powyższym schemacie blokowym widzimy, że klient tworzy żądanie XMLHTTP z żądanymi danymi do serwera. Tutaj szczegóły pracownika zaczną się od dodania imienia i nazwiska pracownika.

Na stronie internetowej, którą widzi już użytkownik, do bazy danych należy dodać kilka danych pracownika. Wyświetli kilka propozycji nazw obecnych w nazwie pasujących do słowa kluczowego. Serwer wysyła następnie żądane dane z powrotem do klienta. Jeśli pracownik bazy danych nie zostanie dodany, zostanie utworzony nowy wpis z jego danymi.

Teraz klient przetworzy dane wysłane przez serwer, a czas odpowiedzi jest krótszy w porównaniu do innych używanych technologii. Teraz dane pracownika zostały pomyślnie dodane do bazy danych, więc jeśli szczegóły dodane niedawno muszą być widoczne, użytkownik może po prostu wprowadzić nazwisko pracownika i unikalny identyfikator, aby pobrać wyniki na ekranie. Tutaj interfejs użytkownika jest bardzo interaktywny, a czas reakcji jest również krótszy.

Przykłady Ajax w ASP.NET

Oto kilka przykładów Ajax w ASP.NET, które wyjaśniono poniżej:

Przykład 1

W tym przykładzie przycisk został utworzony, ale akcja nie zostanie wykonana po kliknięciu przycisku.

Kod:



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

Wynik:

Przykład nr 2

W tym przykładzie, klikając przycisk, musisz przekierować go na inną stronę, możemy zobaczyć, jak możemy podjąć działania.

Kod:

Zobaczmy, co pisze użytkownik.


funkcja textfunction () (
var obj = document.getElementById („pole tekstowe”). wartość;
document.getElementById („text”). innerHTML = "Wpisywane litery:" + obj;
)

Wynik:

Przykład nr 3

W tym przykładzie omówimy sposób wykonywania funkcji ładowania w ajax.

Kod:



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

Wynik:

Przykład 4

Po kliknięciu przycisku zawartość pliku asp zostanie wydrukowana na ekranie. Istnieją dwie metody pobierania informacji, tj. Metoda GET i POST.

Kod:



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

Wynik:

Funkcje Ajax w ASP.NET

Poniżej wymieniono kilka ważnych funkcji AJAX w ASP.NET .

  • Przyjazny dla użytkownika: jest to jedna z głównych funkcji Ajax, gdzie interfejs użytkownika strony internetowej jest tak elastyczny i wygodny, że użytkownik może korzystać ze strony, ponieważ musi wypełnić wszystkie wymagane dane.
  • Szybsza strona internetowa: Ta funkcja w AJAX jest podstawowa, ponieważ została dla niej stworzona. Ta funkcja umożliwia stronie utworzenie żądania i czasu odpowiedzi serwera w ciągu kilku sekund. Te funkcje sprawiają również, że strona ładuje się szybciej niż zwykle. Nie musimy przeładowywać całej strony przez cały czas, tylko konkretna część musi zostać przeładowana, jeśli została zmieniona.
  • Technologia niezależna od serwera: AJAX w asp.net może być używany niezależnie od dowolnego języka programowania, takiego jak JavaScript, PHP itp. Wiele języków obsługuje AJAX oraz jego cechy i funkcje.
  • Wydajność: służy głównie do wydajności i szybkości strony internetowej. Czas potrzebny na utworzenie żądania XMLHTTP do odzyskania odpowiedzi danych z serwera jest szybki podczas korzystania z AJAX. Jednym z głównych czynników jest więc podstawa wydajności na stronie internetowej.
  • Obsługa przeglądarek: AJAX jest używany przede wszystkim, ponieważ obsługuje prawie wszystkie przeglądarki używane na rynku. Oprócz koncepcji, która tworzy obiekt XMLHTTP, przetwarzanie będzie takie samo dla wszystkich przeglądarek internetowych, ponieważ język JavaScript jest używany w większości aplikacji internetowych.
  • Aplikacje interaktywne : Używanie ajax jest bardzo łatwe dla programisty lub programisty do tworzenia bardziej interaktywnych i przyjaznych dla użytkownika aplikacji internetowych. Jak wiemy w dzisiejszym świecie, wszystko jest procesem dwukierunkowym, w którym musisz umieścić i pobrać dane, więc jest to pomocne w dwukierunkowym procesie, w którym klient może wchodzić w interakcje z serwerem w celu pobrania, a także zapisu dane.

Wniosek

W tym artykule omówiliśmy funkcje AJAX w asp.net i jego działanie w aplikacjach ASP.Net. Omówiliśmy także kilka przykładów użycia AJAX i jego właściwości. Jest to jedna z najbardziej użytecznych i wydajnych technologii dla nowoczesnego środowiska. Jest szeroko stosowany w serwisach społecznościowych, takich jak Facebook, Twitter itp.

Polecane artykuły

To jest przewodnik po Ajaxie w ASP.NET. Tutaj omawiamy działające funkcje Ajax w ASP.NET wraz z przykładami i implementacją kodu. Możesz także przejrzeć następujące artykuły, aby dowiedzieć się więcej -

  1. Metody jQuery Ajax
  2. JSON vs AJAX
  3. Co to jest Ajax?
  4. Pytania do wywiadu AJAX

Kategoria:

Rozwój oprogramowania