Maison > Article > interface Web > 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('page'+(this.index+1)+'.txt',function(str){ var aData=eval(str); oUl.innerHTML=''; for(i=0;i<aData.length:i++){ var oLi=document.createElement("li"); oLi.innerHTML='<strong>'+aData[i].user+'</strong><i>'+aData[i].pass+'</i>'; oUl.appendChild(oLi); } }); }; } };
Principe Ajax
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!