Comment appeler json en js natif

Cette fois je vais vous montrer comment appeler json avec du js natif. Quelles sont les précautions pour appeler json avec du js natif Voici un cas pratique, jetons un oeil.

Bases d'Ajax

ajax : pas de lecture des données de rafraîchissement, lecture des informations sur le serveur

Méthode de requête HTTP :

GET : utilisé pour obtenir des données, telles que la navigation dans les publications

ajax.judgeXmlHttpRequest('get', 'index.php', function(data){
  alert(data);  //这是服务器返回的数据
})

POST : utilisé pour télécharger des données, telles que l'enregistrement des utilisateurs

var dataJson = {
  name: 'ys',age: 123 
}
ajax.judgeXmlHttpRequest('post', 'index.php', function(data){
  alert(data);  //这是服务器返回的数据
},dataJson)

La différence entre GET et POST :

GET : transmises via l'URL (mises dans l'URL), les données transmises seront placées dans l'URL ci-dessus, name = value & name = value

La méthode get a une petite capacité, une faible sécurité et un cache

POST : ne passe pas par l'URL

la capacité de publication est plus grande, généralement jusqu'à 2G, sécurité relativement élevée, pas de cache

Écriture Ajax native

Étapes de fonctionnement Ajax

Création d'un objet Ajax

Navigateurs non-IE6 :

var oAjax=new XMLHttpRequest();

Navigateurs IE6 :

var oAjax=new ActiveXObject("Microsoft.XMLHTTP");

Se connecter au serveur

Ajax.open(方法,文件名,异步传输);

Méthode de cache de bloc :

Ajax.open('GET','a.txt?t='+new Date().getTime(),true);

Synchrone : js signifie que les choses doivent être faites une par une

Asynchrone : js signifie que plusieurs choses doivent être faites ensemble

ajax est utilisé pour la transmission asynchrone, il n'est pas synchrone

Envoyer la demande

Ajax.send();

Recevoir la valeur de retour

Surveillance de l'état de la demande : événement onreadystatechange : Lorsque votre Ajax communique avec le serveur Déclenché lorsqu'il y a une communication entre les deux parties. Il est principalement jugé par l'attribut readyState. La fin ne signifie pas le succès. L'attribut status est utilisé pour juger

attribut readyState : statut de la demande.

0 (non initialisé). La méthode open n'a pas été appelée

1 (Chargement) La méthode send() a été appelée et la requête est envoyée

2 (Chargement terminé) La méthode send() est terminée et tout le contenu correspondant a été reçu

3 (Analyse) Le contenu de la réponse reçue est en cours d'analyse

4 (Complet) Le contenu de la réponse l'analyse est terminée et peut être appelée sur le client (l'achèvement ne signifie pas nécessairement le succès, le statut est requis pour détecter si elle réussit ou non) Échec)

attribut de statut :

Résultat de la demande, qu'il ait réussi (200) ou échoué (404) : Ajax.status==200

Valeur de retour réponseText:

Texte renvoyé par le serveur : Ajax.responseText (la valeur renvoyée est une chaîne, parfois, il doit être traité davantage dans d'autres formats)

oAjax.onreadystatechange=function(){
  //oAjax.readyState: 表示浏览器和服务器之间进行到哪一步了
  if(oAjax.readyState==4){ //读取完成
    if(oAjax.status==200){ //读取的结果是成功
      alert('成功:'+oAjax.responseText);
    }
  }
}

Encapsuler l'Ajax natif dans une fonction L'Ajax natif final écrit est :

La fonction encapsulée par la méthode GET. est :

function ajax(url,fnSuccess,fnFaild){
  //1.创建Ajax对象。js中,使用一个没有定义的变量会报错,使用一个没有定义的属性,是undefined。IE6下使用没有定义的XMLHttpRequest会报错,所以当做window的一个属性使用
  if (window.XMLHttpRequest) {
    var oAjax=new XMLHttpRequest();//非IE6
 　　}else{
    var oAjax=new ActiveXObject("Microsoft.XMLHTTP");//IE6
 　　}
  //2.连接到服务器
  oAjax.open('GET',url,true);
  //3.发送请求
  oAjax.send();
  //4.接收返回值
  oAjax.onreadystatechange=function(){
    //oAjax.readyState--浏览器和服务器之间进行到哪一步了
    if(oAjax.readyState==4){ //读取完成
      if(oAjax.status==200){ //读取的结果是成功
        fnSuccess(oAjax.responseText); //成功时执行的函数
   　　 }else{
    　　  if(fnFaild){  //判断是否传入失败是的函数,即用户是否关心失败时的结果
     　　　　 fnFaild(oAjax.responseText); //对失败的原因做出处理
    　　  }
   　　 }
  　　 }
 　　}
　 }

La fonction encapsulée par la méthode POST est :

function ajaxPost(url,id,fnSuccess,fnFaild){
  //1.创建Ajax对象
  if (window.XMLHttpRequest) {
    var xhr=new XMLHttpRequest();//非IE6
  }else{
    var xhr=new ActiveXObject("Microsoft.XMLHTTP");//IE6
  }
  //2.连接到服务器
  xhr.open("POST",url,true);
  //设置头信息
  xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  var form=document.getElementById(id);
  //3.发送请求，传递数据
  xhr.send(serialize(form));
  xhr.onreadystatechange=function(){
    if(xhr.readyState==4){
      if ((xhr.status>=200 && xhr.status<300) || xhr.status==304) {
        fnSuccess(xhr.responseText);
      }else{
        fnFaild(xhr.responseText);
      }
    }
  };
}

Encodage du jeu de caractères : L'encodage de la page Web et du Le fichier demandé doit être le même, si les deux sont en cache utf8

, empêchez la mise en cache (les données qui changent fréquemment, etc., ne peuvent pas être mises en cache. Principalement utilisé pour la méthode GET), lors du passage des paramètres, ajoutez ?+'données variables ' après le chemin sans affecter les données d'origine

ajax('a.txt?t='+new Date().getTime(),function(str){
  alert(str);
},function(str){
  alert(str);
});

données dynamiques de requête ajax : telles qu'un fichier json

1 La valeur de retour ajax est une chaîne, et le Les données tableau/json renvoyées peuvent être lues via la conversion eval

alert(str);
alert(typeof(str));
var arr=eval(str);
alert(typeof(arr));
alert(arr[1]);
alert(arr[1].c);

2 Créer des éléments combinés avec DOM pour afficher le contenu renvoyé

oBtn.onclick=function(){
  ajax('data/arr3.txt?t='+new Date().getTime(),function(str){
    var arr=eval(str);
    for (var i = 0; i < arr.length; i++) {
      var oLi=document.createElement(&#39;li&#39;);
      oLi.innerHTML=&#39;用户名:<span>'+arr[i].user+'</span>密码:<span>'+arr[i].pass+'</span>';
      oUl.appendChild(oLi);
    }
  },function(str){
    alert(str);
  });
}

Type de données-->Le type de données renvoyé peut être xml (presque éliminé), json (couramment utilisé maintenant)

Jetons un coup d'œil au js natif que je viens d'écrire récemment pour appeler json via la méthode get Exemple :

if(!isNaN(matchId)) {
  var xmlHttp = null;
  try {// Chrome, Firefox, Opera, Safari
    xmlHttp = new XMLHttpRequest();
  }catch (e) {
    try {// Internet Explorer IE 6.0+
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {// Internet Explorer IE 5.5+
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        alert("your browser not support ajax!");
      }
    }
  }
  window.onload = function () {
    xmlHttp.open("get",/api/clientMatch/commonMatchDiagram.json?matchId=" + matchId,true);
    xmlHttp.send();
    xmlHttp.onreadystatechange = doResult; //设置回调函数
  };
  function doResult() {
    var html='';
    if ((xmlHttp.readyState == 4)&&(xmlHttp.status == 200)) {//4代表执行完成,200代表执行成功
      var data = JSON.parse(xmlHttp.responseText);
      if(data.code == 200){
      //代码执行
      }
      document.getElementById('appMatch').innerHTML = html;
    }
  }
}

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

Lecture recommandée :

Jeu légendaire classique imitation JS

Comment définir le mode distant pour webpack-dev-server

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!