Explication détaillée de la méthode Ajax implémentée dans JS

Cette fois, je vais vous apporter une explication détaillée de la méthode d'implémentation d'Ajax en JS Quelles sont les précautions pour implémenter la méthode Ajax en JS Ce qui suit est un cas pratique, jetons un coup d'œil. .

1. Qu'est-ce qu'Ajax

Lire les données ou soumettre des données sans actualiser

(Le premier ajax est apparu : Google Maps, faites glisser Un nouvel horizon soudainement apparaît)

Applications : Enregistrement de l'utilisateur, chat en ligne, Weibo

Caractéristiques : Les données ne peuvent être lues qu'à partir du serveur (nous devons donc configurer notre propre programme de serveur AMP)

2. Utiliser Ajax

1. Bases : demander et afficher des fichiers TXT statiques

btn.onclick=function(){
  ajax('abc.txt',function(str){
    alert(str);
  });
}

①Fichiers en Ajax L'encodage doit être cohérent avec l'encodage de la page

②Cache et empêche la mise en cache (les avantages l'emportent sur les inconvénients, vous ne pouvez donc pas vider le cache tout le temps)
Le cache peut nous aider à accélérer l'accès au réseau. ceci sur le serveur Le fichier n'est lu qu'une seule fois, et la deuxième fois, il est récupéré directement depuis votre disque dur et votre cache, au lieu de le demander via le réseau

Parfois, nous devons empêcher la mise en cache (par exemple, si quelque chose change sur le serveur, mais que le client a demandé la chose originale), la méthode est la suivante, ajoutez un horodatage :

ajax('abc.txt?t='+new Date().getTime(),function(str){});
//new Date().getTime()为现在的毫秒数，用户绝对不可能在1毫秒内点两次，所以每次请求的t都不一样

2. Données dynamiques : Demander un fichier Js (ou json)

Ajax depuis le serveur Tout ce qui suit est sous forme de texte (string), comment le convertir ?

eval() calcule la valeur dans la chaîne

ajax('abc.txt',function(str){
    var arr=eval(str);
    alert(arr);
});

Exemple : pagination

<ul id="list">
</ul>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>

window.onload=function(){
  var oUl=getElementById("list");
  var aBtn=getElementsByTagName("a");
  var i;
  for(i=0;i<aBtn.length;i++){
    aBtn[i].index=i;
    aBtn[i].onclick=function(){
      ajax(&#39;page&#39;+(this.index+1)+&#39;.txt&#39;,function(str){
        var aData=eval(str);
        oUl.innerHTML=&#39;&#39;;
        for(i=0;i<aData.length:i++){
          var oLi=document.createElement("li");
          oLi.innerHTML=&#39;<strong>'+aData[i].user+'</strong><i>'+aData[i].pass+'</i>';
          oUl.appendChild(oLi);
        }
      });
    };
  }
};

Principe Ajax

Méthode de requête HTTP

1.GET - utilisée pour obtenir des données (telles que la navigation dans les publications) Mettez les données dans l'URL (site Web) à soumettre. . Faible capacité, facile à partager (envoyer l'URL à d'autres)

2.POST - utilisé pour télécharger des données (telles que l'enregistrement de l'utilisateur) La sécurité est assurée. en moyenne, la capacité est presque illimitée et ce n'est pas pratique Partager

4. Encapsulez votre propre fonction Ajax

1 Créer Ajax

2. . Connectez-vous au serveur

3. Envoyer la demande

4. Recevoir le retour

function ajax(url,fnSucc,fnFaild){
  //1.创建
  var oAjax=null;
  if(window.XMLHttpRequest){ //对ie6来说，直接用XMLHttpRequest是不存在的会出错
    oAjax=new XMLHttpRequest(); //ie6以上
  }else{
    oAjax=new ActiveXObject("Microsoft.XMLHTTP"); //ie6
  }
  //2.连接服务器，open(方法，url，是否异步)
  oAjax.open('GET'，url，true);
  //3.发送请求
  oAjax.send();
  //4.接收返回 OnReadyStateChange
  oAjax.onreadystatechange=function(){    //onreadystatechange事件
    if(oAjax.readyState==4){ //readyState属性：请求状态 4是完成（完成不代表成功）
      if(oAjax.status==200){ //status属性：请求结果 200代表成功
        fnSucc(oAjax.responseText); //responseText属性：服务器发回给我们的内容
      }
      else{
        if(fnFaild){
          fnFaild();
        }
      }
    }
  };
};

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour plus d'informations intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

JQuery Ajax Analysis Collection

Explication détaillée de l'utilisation de l'injection AJAX

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!