Ajax в ASP.NET - Повне керівництво Ajax в ASP.NET із прикладами

• Вступ до Ajax в ASP.NET
• 

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


Вступ до Ajax в ASP.NET

AJAX в ASP.NET відомий як Асинхронний JavaScript та XML. Мова йде про оновлення функцій веб-сторінки, не завантажуючи її щоразу, коли ми відкриваємо веб-сторінку. Це техніка, яка використовується для створення дуже швидких та динамічних веб-сторінок.

Ajax в ASP.NET в основному використовується, коли користувач має динамічний контент, і його потрібно перезавантажувати кілька разів після внесення змін. Ця технологія також прискорює час відгуку сторінки. Він також має зручний інтерфейс та інтерактивні веб-сторінки.

Робота Ajax в ASP.NET

AJAX - це вдосконалена версія статичних сторінок, які використовувались тривалий час. AJAX створений для динамічного характеру та зручного для користувача середовища. AJAX в ASP.NET працює, як наведено нижче.

• Об'єкт XMLHTTPRequest створюється з браузера та надсилається на сторону сервера.
• Сервер обробляє запит, надісланий браузером, і відправлятиме дані назад в браузер із запитаною деталлю.
• Браузер обробляє дані та оновлює вміст на сторінці.
• Після оновлення вмісту користувач може переглядати дані на екрані.

Припустимо, що у вас є портал для введення даних працівника, і вам доведеться додати нового співробітника в базу даних. На вищевказаній блок-схемі ми бачимо, що клієнт створює XMLHTTP-запит із запитуваними даними на сервер. Тут дані про працівника розпочнуться з додавання імені та прізвища працівника.

На веб-сторінці, яку користувач бачить, вже кілька реквізитів працівника повинні бути додані до бази даних. Він покаже кілька пропозицій імен, присутніх у назві, що відповідає ключовому слову. Потім сервер відправляє запитувані дані назад клієнту. Якщо працівник у базі даних не доданий, буде створений новий запис із його реквізитами.

Тепер клієнт буде обробляти дані, що надсилаються сервером, і час реакції швидше порівняно з іншими використовуваними технологіями. Тепер дані про співробітника успішно додаються в базу даних, тому якщо деталі, додані нещодавно, потрібно побачити, користувач може просто ввести ім'я співробітника та унікальний ідентифікатор, щоб отримати результати на екрані. Тут інтерфейс користувача дуже інтерактивний, а час відповіді також менше.

Приклади Ajax в ASP.NET

Ось кілька прикладів Ajax в ASP.NET, які пояснюються нижче:

Приклад №1

У цьому прикладі кнопка створюється, але дія не буде виконана, коли ми натискаємо кнопку.

Код:



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


Вихід:

Приклад №2

У цьому прикладі, натиснувши кнопку, вам потрібно перенаправити її на якусь іншу сторінку, ми можемо побачити, як ми можемо вжити заходів.

Код:





Давайте подивимося, що користувач набирає.

функція textfunction () (
var obj = document.getElementById ("текстове поле"). значення;
document.getElementById ("текст"). innerHTML = "Букви, які ви набираєте:" + obj;
)

Вихід:

Приклад №3

У цьому прикладі ми обговоримо, як виконувати функцію навантаження в аяксе.

Код:



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



Вихід:

Приклад №4

Після натискання на кнопку вміст файлу asp з’явиться надрукованим на екрані. Існує два способи отримання інформації, тобто метод GET та POST.

Код:



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



Вихід:

Особливості Ajax в ASP.NET

Нижче перераховано кілька важливих особливостей AJAX в ASP.NET .

• Зручність у користуванні: Це одна з головних особливостей Ajax, коли користувальницький інтерфейс веб-сторінки настільки гнучкий і зручний для користувача, щоб користуватися цією сторінкою, оскільки він повинен заповнити всі необхідні дані.
• Веб-сторінка швидше: ця функція в AJAX є основною, оскільки вона була побудована для тієї ж. Ця функція дозволяє веб-сторінці створювати запит та час відповіді сервера протягом декількох секунд. Ці функції також роблять перезавантаження веб-сторінки швидше, ніж звичайні. Нам не доведеться весь час перезавантажувати всю сторінку, лише певна частина повинна бути перезавантажена, якщо вона була змінена.
• Незалежна від сервера технологія: AJAX на asp.net можна використовувати незалежно від будь-якої мови програмування, як JavaScript, PHP тощо. Багато мов підтримують AJAX та його характеристики та особливості.
• Продуктивність: В основному використовується для його продуктивності та швидкості веб-сторінки. Час, необхідний для створення запиту XMLHTTP для повернення відповіді даних з сервера, швидкий під час використання AJAX. Отож, один із основних факторів використовується на основі продуктивності веб-сторінки.
• Підтримка браузерів: AJAX використовується в основному тому, що він підтримує майже всі браузери, що використовуються на ринку. Крім концепції, яка створює XMLHTTP-об'єкт, обробка буде однаковою для всіх веб-браузерів, оскільки мова JavaScript використовується в більшості веб-додатків.
• Інтерактивні програми : Використання ajax дуже просто для розробника або програміста для створення більш інтерактивних та зручних для веб-додатків веб-додатків. Як ми знаємо, в сучасному світі все є двостороннім процесом, куди потрібно вводити, а також отримувати дані, тому це корисно в двосторонньому процесі, коли клієнт може взаємодіяти з сервером, щоб отримати, а також написати дані.

Висновок

У цій статті ми обговорили особливості AJAX на asp.net та те, як він працює в додатках ASP.Net. Також ми обговорили кілька прикладів використання AJAX та його характеристик. Це одна з найкорисніших і найпотужніших технологій для сучасного середовища. Він широко використовується на сайтах соціальних медіа, таких як Facebook, Twitter тощо.

Рекомендовані статті

Це посібник з Ajax в ASP.NET. Тут ми обговорюємо роботу, особливості Ajax в ASP.NET разом із прикладами та реалізацією коду. Ви також можете переглянути наступні статті, щоб дізнатися більше -

1. Методи jQuery Ajax
2. JSON проти AJAX
3. Що таке Аякс?
4. Питання для інтерв'ю AJAX