Maison > Article > interface Web > Une introduction aux fonctions et utilisations d'Ajax
Une introduction aux fonctions et utilisations d'Ajax
- 王林original
- 2024-01-30 09:30:06500parcourir
Aperçu des fonctions pratiques d'Ajax
Dans le développement Web moderne, Ajax (JavaScript asynchrone et XML) est devenu un outil très couramment utilisé. En utilisant Ajax, nous pouvons réaliser une interaction de données sans actualiser la page, améliorer l'expérience utilisateur et réduire la charge du serveur. Cet article fournira un aperçu de plusieurs fonctions pratiques d'Ajax, avec des exemples de code spécifiques.
1. Soumettre le formulaire sans actualiser
L'une des fonctions les plus élémentaires de l'utilisation d'Ajax est de soumettre le formulaire sans actualiser. La soumission d'un formulaire HTML traditionnel entraîne l'actualisation de la page entière, mais l'utilisation d'Ajax vous permet de soumettre le formulaire et de recevoir la réponse du serveur sans actualiser la page.
Ce qui suit est un exemple d'implémentation simple :
<form id="myForm" action="submit.php" method="post">
<input type="text" name="username">
<input type="password" name="password">
<button onclick="submitForm()">提交</button>
</form>
<script>
function submitForm() {
var form = document.getElementById("myForm");
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open("POST", form.action, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var response = xhr.responseText;
// 处理服务器响应
}
};
xhr.send(formData);
}
</script>Dans le code ci-dessus, lorsque vous cliquez sur le bouton de soumission, la fonction submitForm() sera appelée. Cette fonction obtient les données du formulaire via l'objet FormData et utilise l'objet XMLHttpRequest pour envoyer une requête POST au serveur. Lorsque le serveur renvoie une réponse, nous pouvons gérer la réponse du serveur dans l'événement xhr.onreadystatechange. submitForm()函数会被调用。该函数通过FormData对象获取表单的数据，并使用XMLHttpRequest对象发送POST请求到服务器。当服务器返回响应时，我们可以在xhr.onreadystatechange事件中处理服务器的响应。
二、动态加载数据
通过Ajax，我们可以在不刷新整个页面的情况下动态加载数据。这在创建交互性强的网页应用程序时非常有用。
以下代码展示了如何使用Ajax从服务器端动态加载数据并展示在页面上：
<div id="dataContainer"></div>
<script>
var xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
var container = document.getElementById("dataContainer");
data.forEach(function(item) {
var element = document.createElement("div");
element.textContent = item.name;
container.appendChild(element);
});
}
};
xhr.send();
</script>在上面的代码中，我们使用XMLHttpRequest对象发送GET请求到服务器，获取名为data.json的数据。当服务器返回响应时，我们使用JSON.parse()解析响应的文本，并将数据展示在名为dataContainer的<div>元素中。<p>三、实时搜索</p>
<p>Ajax还可以用于实现实时搜索功能。用户在搜索框中输入关键词时，页面会立即向服务器发送请求并加载相应的搜索结果，从而实现实时展示搜索结果的效果。</p>
<p>以下是一个基本的实时搜索示例代码：</p><pre class='brush:html;toolbar:false;'><input type="text" id="searchInput" oninput="search()" placeholder="搜索...">
<ul id="searchResults"></ul>
<script>
function search() {
var keyword = document.getElementById("searchInput").value;
var xhr = new XMLHttpRequest();
xhr.open("GET", "search.php?keyword=" + keyword, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var results = JSON.parse(xhr.responseText);
var resultsList = document.getElementById("searchResults");
resultsList.innerHTML = "";
results.forEach(function(item) {
var li = document.createElement("li");
li.textContent = item.name;
resultsList.appendChild(li);
});
}
};
xhr.send();
}
</script></pre><p>在上面的代码中，当用户在搜索框中输入关键词时，<code>search()函数会被调用。该函数通过获取输入框的值，并将其作为参数发送到服务器进行搜索。当服务器返回搜索结果时，我们将结果展示在名为searchResults的<ul></ul>
XMLHttpRequest pour envoyer une requête GET au serveur et récupérez les données nommées Les données de data.json. Lorsque le serveur renvoie une réponse, nous utilisons JSON.parse() pour analyser le texte de la réponse et afficher les données dans un <div> nommé <code>dataContainer code> élément. 🎜🎜3. Recherche en temps réel🎜🎜Ajax peut également être utilisé pour implémenter la fonction de recherche en temps réel. Lorsque l'utilisateur saisit un mot-clé dans le champ de recherche, la page enverra immédiatement une requête au serveur et chargera les résultats de recherche correspondants, obtenant ainsi l'effet d'afficher les résultats de recherche en temps réel. 🎜🎜Ce qui suit est un exemple de code de recherche de base en temps réel : 🎜rrreee🎜Dans le code ci-dessus, lorsque l'utilisateur saisit des mots-clés dans la zone de recherche, la fonction search() sera appelée. Cette fonction recherche en récupérant la valeur de la zone de saisie et en l'envoyant au serveur en tant que paramètre. Lorsque le serveur renvoie les résultats de la recherche, nous affichons les résultats dans un élément <ul></ul> nommé searchResults. 🎜🎜Conclusion🎜🎜Cet article présente trois fonctions courantes d'Ajax : la soumission de formulaires sans actualisation, le chargement dynamique des données et la recherche en temps réel. À travers des exemples de code pratiques, nous montrons comment utiliser Ajax pour implémenter ces fonctions sur la page. Bien sûr, ce n’est que la pointe de l’iceberg des fonctionnalités d’Ajax. Ajax possède de nombreuses autres fonctionnalités et utilisations puissantes. J'espère que cet article pourra vous inspirer sur l'utilisation d'Ajax et jouer un rôle dans vos projets de développement Web. 🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!