Introduction à Ajax dans ASP.NET

AJAX dans ASP.NET est appelé JavaScript asynchrone et XML. Il s'agit de mettre à jour les fonctions d'une page Web, sans la charger à chaque fois que nous ouvrons la page Web. Il s'agit d'une technique utilisée pour créer des pages Web très rapides et dynamiques.

Ajax dans ASP.NET est principalement utilisé lorsque l'utilisateur a du contenu dynamique et doit être rechargé plusieurs fois après que les modifications ont été effectuées. Cette technologie accélère également le temps de réponse de la page. Il possède également une interface conviviale et des pages Web interactives.

Fonctionnement d'Ajax dans ASP.NET

AJAX est la version avancée des pages statiques qui ont été utilisées pendant longtemps. AJAX est conçu pour une nature dynamique et un environnement convivial. AJAX dans ASP.NET fonctionne comme les points ci-dessous.

  • L'objet XMLHTTPRequest est créé à partir du navigateur et envoyé au côté serveur.
  • Le serveur traitera la demande envoyée par le navigateur et renverra les données au navigateur avec les détails demandés.
  • Le navigateur traitera les données et mettra à jour le contenu de la page.
  • Une fois le contenu mis à jour, l'utilisateur peut visualiser les données à l'écran.

Supposons que vous disposez d'un portail de saisie de données sur les employés et que vous devez ajouter un nouvel employé dans la base de données. Dans le diagramme ci-dessus, nous pouvons voir que le client crée une demande XMLHTTP avec les données demandées au serveur. Ici, les détails de l'employé commenceront par l'ajout du prénom et du nom de l'employé.

Sur la page Web que l'utilisateur voit déjà, quelques détails sur les employés doivent être ajoutés dans la base de données. Il affichera quelques suggestions des noms présents dans le nom correspondant au mot-clé. Le serveur renvoie ensuite les données demandées au client. Si l'employé de la base de données n'est pas ajouté, une nouvelle entrée sera créée avec ses coordonnées.

Maintenant, le client traitera les données envoyées par le serveur et le temps de réponse est plus rapide par rapport aux autres technologies utilisées. Maintenant, les détails de l'employé sont ajoutés avec succès dans la base de données, donc si les détails ajoutés récemment doivent être vus, l'utilisateur peut simplement entrer le nom de l'employé et son identifiant unique pour récupérer les résultats à l'écran. Ici, l'interface utilisateur est très interactive et le temps de réponse est également moindre.

Exemples d'Ajax dans ASP.NET

Voici quelques exemples d'Ajax dans ASP.NET qui sont expliqués ci-dessous:

Exemple 1

Dans cet exemple, le bouton est créé mais l'action ne sera pas effectuée lorsque nous cliquons sur le bouton.

Code:



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

Production:

Exemple # 2

Dans cet exemple, en cliquant sur le bouton dont vous avez besoin pour le rediriger vers une autre page, nous pouvons voir comment nous pouvons agir.

Code:

Voyons ce que l'utilisateur tape.


fonction textfunction () (
var obj = document.getElementById ("zone de texte"). value;
document.getElementById ("text"). innerHTML = "Les lettres que vous tapez:" + obj;
)

Production:

Exemple # 3

Dans cet exemple, nous verrons comment exécuter la fonction de chargement dans ajax.

Code:



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

Production:

Exemple # 4

Après avoir cliqué sur le bouton, le contenu du fichier asp sera imprimé à l'écran. Il existe deux méthodes pour récupérer les informations, à savoir la méthode GET et POST.

Code:



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

Production:

Fonctionnalités d'Ajax dans ASP.NET

La liste ci-dessous répertorie quelques fonctionnalités importantes d'AJAX dans ASP.NET .

  • Convivialité: C'est l'une des principales fonctionnalités d'Ajax où l'interface utilisateur de la page Web est si flexible et confortable pour que l'utilisateur utilise la page qu'il doit avoir à remplir tous les détails requis.
  • Page Web plus rapide: cette fonctionnalité d'AJAX est la principale car elle a été conçue pour la même chose. Cette fonctionnalité permet à la page Web de créer la demande et le temps de réponse du serveur en quelques secondes. Ces fonctionnalités permettent également de recharger la page Web plus rapidement que celles habituelles. Nous n'avons pas à recharger toute la page tout le temps, seule la partie spécifique doit être rechargée si elle a été modifiée.
  • Technologie indépendante du serveur: AJAX dans asp.net peut être utilisé indépendamment de tout langage de programmation comme JavaScript, PHP, etc. De nombreux langages prennent en charge AJAX et ses caractéristiques et fonctionnalités.
  • Performance: Il est principalement utilisé pour ses performances et la vitesse d'une page Web. Le temps nécessaire pour créer la demande XMLHTTP et récupérer la réponse des données du serveur est rapide lors de l'utilisation d'AJAX. Ainsi, l'un des principaux facteurs est utilisé pour les performances sur une page Web.
  • Navigateurs pris en charge: AJAX est principalement utilisé car il prend en charge presque tous les navigateurs utilisés sur le marché. Hormis le concept qui crée l'objet XMLHTTP, le traitement sera le même pour tous les navigateurs Web car le langage JavaScript est utilisé dans la plupart des applications Web.
  • Applications interactives : L'utilisation d'ajax est très facile pour le développeur ou le programmeur de créer des applications Web plus interactives et conviviales. Comme nous le savons dans le monde d'aujourd'hui, tout est un processus bidirectionnel où vous devez mettre et récupérer les données, il est donc utile dans le processus bidirectionnel où le client peut interagir avec le serveur pour aller chercher et écrire les données.

Conclusion

Dans cet article, nous avons discuté des fonctionnalités d'AJAX dans asp.net et de son fonctionnement dans les applications ASP.Net. Nous avons également discuté de quelques exemples d'utilisation d'AJAX et de ses caractéristiques. C'est l'une des technologies les plus utiles et les plus puissantes pour l'environnement moderne. Il est très utilisé dans les sites de médias sociaux comme Facebook, Twitter, etc.

Articles recommandés

Ceci est un guide d'Ajax dans ASP.NET. Nous discutons ici du fonctionnement, des fonctionnalités d'Ajax dans ASP.NET ainsi que des exemples et de l'implémentation du code. Vous pouvez également consulter les articles suivants pour en savoir plus -

  1. Méthodes jQuery Ajax
  2. JSON vs AJAX
  3. Qu'est-ce que l'Ajax?
  4. Questions d'entretiens chez AJAX

Catégorie:

Développement de logiciels