Qu'est-ce qu'ajax ? Explication détaillée de plusieurs méthodes d'implémentation d'ajax (avec exemples d'utilisation)

Cet article présente principalement la méthode d'implémentation de ajax, ainsi que l'analyse de la définition d'ajax. Laissez tout le monde mieux comprendre comment utiliser ajax et comment utiliser jQuery pour implémenter ajax. Commençons à lire cet article maintenant

1. Qu'est-ce qu'Ajax

Ajax : Javascript et XML asynchrones, réalise le processus d'échange de données entre le client et le serveur et envoie des requêtes de manière asynchrone. Ajax n'est pas un nouveau langage de programmation, mais une technologie permettant de créer des applications Web meilleures, plus rapides et plus interactives.
Les avantages de l'utilisation de la technologie sont : Aucun rafraîchissement de la page n'est requis et d'autres opérations peuvent être effectuées en attendant que la page transmette des données.

2. Implémenter Ajax avec du JS natif

Voici une routine d'implémentation, l'idée est à peu près la suivante :
1 Créer xmlHttpRequest 对象 selon différents navigateurs
2. . Utilisez open to call et send pour envoyer la requête au moteur Ajax.
3. Une fois le programme serveur exécuté, le résultat est renvoyé au client (utilisez xml.readyState == 4 && xml.status == 200 pour déterminer si l'envoi a réussi, puis utilisez xml.responseText pour recevoir les données renvoyées par l'arrière-plan)

//返回一个xmlHttpRequest 对象function creathttprequest()
{    if(window.XMLHttpRequest)        var xml=new XMLHttpRequest();    else
        var xml=ActiveXObject("Miscrosoft.XMLHTTP");    return xml;
}//这里是触发 AJAX 的事件（比如是一个按钮的点击事件之类的）function triggerAjax() {   //上面思路步骤1，创建一个xmlHttpRequest 对象
    var xml = creathttprequest();    //上面思路步骤2
    xml.open("POST","result.php",false);   //open() 第二个参数是你后台php文件的相对路径
    xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    xml.send(url);    //上面思路步骤3
    if(xml.readyState==4&&xml.status==200)
    {
        alert(xml.responseText);
    }
}

3. JQuery implémente Ajax

JQuery implémente Ajax d'une manière beaucoup plus simple Il a déjà encapsulé une fonction $.ajax, qui est très pratique à appeler.

$.ajax({ 
  type: "POST", //发送是以POST还是GET
  url: "ajax.php", //发送的地址
  dataType: "json", //传输数据的格式
  data: {"username": "zwkkkk1","password": 123456}, //传输的数据
  //成功的回调函数
  success: function(msg) { 
    console.log(msg) 
  }, 
  //失败的回调函数
  error: function() { 
    console.log("error") 
  } 
})

1. Qu'est-ce qu'Ajax

---

Ajax : Javascript et XML asynchrones, qui réalise le processus d'échange de données entre le client et le serveur et envoie des requêtes de manière asynchrone. Ajax n'est pas un nouveau langage de programmation, mais une technologie permettant de créer des applications Web meilleures, plus rapides et plus interactives.
Les avantages de l'utilisation de la technologie sont : Aucun rafraîchissement de la page n'est requis et d'autres opérations peuvent être effectuées en attendant que la page transmette des données.

2. Implémenter Ajax avec JS natif

---

Voici une routine d'implémentation, l'idée est à peu près la suivante :
1. Créer xmlHttpRequest 对象 selon différents navigateurs 2. Utilisez open to call et send pour envoyer la requête au moteur Ajax.
3. Une fois le programme serveur exécuté, le résultat est renvoyé au client (utilisez
pour déterminer si l'envoi a réussi, puis utilisez xml.readyState == 4 && xml.status == 200 pour recevoir les données renvoyées par l'arrière-plan) (Si vous voulez en savoir plus, rendez-vous sur le site Web PHP chinoisxml.responseTextManuel de développement AJAX pour en savoir plus)

//返回一个xmlHttpRequest 对象function creathttprequest()
{    if(window.XMLHttpRequest)        var xml=new XMLHttpRequest();    else
        var xml=ActiveXObject("Miscrosoft.XMLHTTP");    return xml;
}//这里是触发 AJAX 的事件（比如是一个按钮的点击事件之类的）function triggerAjax() {   //上面思路步骤1，创建一个xmlHttpRequest 对象
    var xml = creathttprequest();    //上面思路步骤2
    xml.open("POST","result.php",false);   //open() 第二个参数是你后台php文件的相对路径
    xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    xml.send(url);    //上面思路步骤3
    if(xml.readyState==4&&xml.status==200)
    {
        alert(xml.responseText);
    }
}

3 JQuery implémente Ajax

La méthode d'implémentation d'Ajax par JQuery. est beaucoup plus simple, et un a été packagé

Les fonctions sont faciles à appeler. $.ajax

$.ajax({ 
  type: "POST", //发送是以POST还是GET
  url: "ajax.php", //发送的地址
  dataType: "json", //传输数据的格式
  data: {"username": "zwkkkk1","password": 123456}, //传输的数据
  //成功的回调函数
  success: function(msg) { 
    console.log(msg) 
  }, 
  //失败的回调函数
  error: function() { 
    console.log("error") 
  } 
})

Cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois

colonne du manuel d'utilisation ajax pour en savoir plus. Si vous avez des questions, vous pouvez partir). un message ci-dessous.

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!