Dans le "Manuel de référence chinois AJAX", AJAX n'est pas un nouveau langage de programmation, mais une nouvelle méthode d'utilisation des standards existants. AJAX est l'art d'échanger des données avec un serveur et de mettre à jour des parties d'une page Web sans recharger la page entière.
AJAX signifie « Asynchronous JavaScript and XML » (technologie JavaScript et XML asynchrone), qui fait référence à un ensemble de technologies de développement Web côté navigateur qui combinent plusieurs technologies. Le concept d'Ajax a été proposé par Jesse James Jarrett.
Les applications Web traditionnelles permettent à l'utilisateur de remplir un formulaire, et lorsque le formulaire est soumis, une demande est envoyée au serveur Web. Le serveur reçoit et traite le formulaire entrant, puis renvoie une nouvelle page Web, mais cela gaspille beaucoup de bande passante car la plupart du code HTML des deux pages est souvent le même. Chaque communication d'application nécessitant l'envoi d'une requête au serveur, le temps de réponse de l'application dépend du temps de réponse du serveur. Cela se traduit par une interface utilisateur beaucoup plus lente à répondre que les applications natives.
À la différence de cela, les applications AJAX peuvent uniquement envoyer et récupérer les données nécessaires au serveur et utiliser JavaScript sur le client pour traiter la réponse du serveur. Comme moins de données sont échangées entre le serveur et le navigateur, le serveur répond plus rapidement. Dans le même temps, de nombreux travaux de traitement peuvent être effectués sur la machine client qui effectue la demande, ce qui réduit également la charge sur le serveur Web.
Conseils : Avant de commencer à apprendre AJAX, vous devez avoir une compréhension de base de HTML, CSS, javascript.
Semblable au DHTML ou à LAMP, AJAX ne fait pas référence à une seule technologie, mais utilise de manière organique une série de technologies connexes. Bien que son nom contienne du XML, le format de données peut en réalité être remplacé par JSON, réduisant encore davantage la quantité de données, formant ce qu'on appelle AJAJ. Le client et le serveur n'ont pas besoin d'être asynchrones.
Utilisation initiale d'AJAX
Instance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tryrun 1</title>
</head>
<body>
<div id="view">
<p>点击下面的按钮，将 Ajax 请求回来的数据更新在该文本内</p>
</div>
<button type="button" id="btn">发起 Ajax 请求</button>
<script>
document.getElementById("btn").onclick = ajaxRequest;
function ajaxRequest () {
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://www.php.cn/statics/demosource/ajax_info.txt", true);
xhr.send();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("view").innerHTML = xhr.responseText;
}
}
}
</script>
</body>Instance en cours d'exécution »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Conseils : Notre tutoriel AJAX vous aidera à apprendre à maîtriser et à appliquer AJAX étape par étape. Si vous avez des questions, veuillez vous rendre sur le site Web PHP chinois AJAX Community pour poser vos questions, et des internautes enthousiastes y répondront. eux pour vous.
Avantages et inconvénients d'AJAX
Le plus grand avantage de l'utilisation d'Ajax est qu'il peut conserver les données sans mettre à jour la page entière. Cela permet aux applications Web de répondre plus rapidement aux actions des utilisateurs et d'éviter d'envoyer des informations inchangées sur le réseau.
Ajax ne nécessite aucun plug-in de navigateur, mais nécessite que l'utilisateur autorise l'exécution de JavaScript sur le navigateur. Tout comme les applications DHTML, les applications Ajax doivent être rigoureusement testées sur de nombreux navigateurs et plateformes différents. À mesure qu'Ajax mûrit, certaines bibliothèques de programmes simplifiant l'utilisation d'Ajax sont également apparues. De même, une autre technologie de programmation d'assistance a émergé pour fournir des fonctionnalités alternatives aux utilisateurs qui ne prennent pas en charge JavaScript.
La principale critique de l'utilisation d'Ajax est qu'il peut casser les fonctions de retour et de signet du navigateur. Dans le cas de pages mises à jour dynamiquement, l'utilisateur ne peut pas revenir à l'état de la page précédente car le navigateur ne peut mémoriser que les pages statiques de l'historique. Les différences possibles entre une page entièrement lue et une page modifiée dynamiquement sont très subtiles ; les utilisateurs s'attendent souvent à cliquer sur le bouton retour pour annuler leur opération précédente, mais dans une application Ajax, ce n'est pas le cas. faire cela. Cependant, les développeurs ont trouvé différentes manières de résoudre ce problème. La plupart des méthodes avant HTML5 consistaient à créer ou à utiliser un IFRAME masqué pour reproduire les modifications sur la page lorsque l'utilisateur clique sur le bouton Précédent pour accéder à l'historique. (Par exemple, lorsque l'utilisateur clique à nouveau dans Google Maps, il recherche dans un IFRAME masqué, puis reflète les résultats de la recherche sur un élément Ajax pour restaurer l'état de l'application tel qu'il était à ce moment-là).
Concernant le problème de l'impossibilité d'ajouter un statut aux favoris ou aux signets, une solution avant HTML5 consistait à utiliser des identifiants de fragments d'URL (souvent appelés ancres, la partie après le # dans l'URL) pour garder une trace et permettre aux utilisateurs de revenir à un état d’application spécifié. (De nombreux navigateurs permettent à JavaScript de mettre à jour dynamiquement les ancres, ce qui permet aux applications Ajax de mettre à jour les ancres tout en mettant à jour le contenu affiché.) HTML5 pourra plus tard manipuler directement l'historique de navigation, stocker l'état des pages Web sous forme de chaîne et ajouter des pages Web aux favoris Web. . Lors du découpage ou de la mise en signet, l'état est conservé de manière invisible. Les deux méthodes ci-dessus peuvent également résoudre le problème de l’impossibilité de battre en retraite en même temps.
Lors du développement d'Ajax, la latence du réseau, c'est-à-dire l'intervalle entre l'utilisateur effectuant une requête et le serveur envoyant une réponse, doit être soigneusement prise en compte. Ne pas donner aux utilisateurs une réponse claire, ne pas pré-lire correctement les données ou gérer incorrectement XMLHttpRequest entraînera l'ennui des utilisateurs. Une solution courante consiste à utiliser un composant visuel pour indiquer à l'utilisateur que le système effectue des opérations en arrière-plan et lit des données et du contenu.
Application
Utilisez XHTML + CSS pour exprimer des informations ;
Utilisez JavaScript pour faire fonctionner le DOM (Document Object Model) pour exécuter des effets dynamiques ;
Utilisez XML et XSLT pour exploiter les données ;
Utilisez XMLHttpRequest ou la nouvelle API Fetch effectue un échange de données asynchrone avec le serveur Web
AJAX est différent des technologies RIA telles que Flash, Silverlight et Java Applet ;Ce manuel du didacticiel AJAX couvre toutes les méthodes d'utilisation de base d'AJAX, y compris la prise en main d'AJAX, l'introduction à AJAX, les exemples AJAX, les objets de création XHR, les requêtes XHR, les réponses XHR, XHR readyState, AJAX ASP/PHP, base de données AJAX, AJAX XML et autres connaissances. Conseils :Ce que couvre ce manuel du didacticiel AJAX
Chaque chapitre de ce tutoriel contient de nombreux exemples AJAX. Vous pouvez directement cliquer sur le bouton "Exécuter l'exemple" pour afficher les résultats en ligne. Ces exemples vous aideront à mieux comprendre et utiliser AJAX.
Dernier chapitre
- AJAX 实例 2016-10-19
- AJAX XML 2016-10-19
- AJAX 数据库 2016-10-19
- AJAX ASP/PHP 2016-10-19
- XHR readystate 2016-10-19
- XHR 响应 2016-10-19
- XHR 请求 2016-10-19
- XHR 创建对象 2016-10-19
Cours connexes
- Introduction rapide au développement web front-end 2021-12-10
- Le cours front-end qui vous comprend le mieux : HTML5/CSS3/ES6/NPM/Vue/...[Original] 2022-09-30
- Tutoriel vidéo de démarrage de Gulp 2022-04-18
- Tutoriel vidéo CSS3 des frères d'armes Gao Luofeng 2022-04-20
- Tutoriel vidéo d'exemple de base d'application Web de développement AngularJS 2022-04-18
- Contact complet Ajax 2022-04-13
- Tutoriel vidéo de base du framework MUI 2022-04-13
- Cours d'essai de cours de formation en ligne 2019-01-10