Comment appeler json en utilisant js

Cet article vous donne une analyse détaillée du résumé de la méthode js appelant json. Les amis dans le besoin peuvent s'y référer.

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)

GET et POST La différence :

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

get capacité de la méthode Petite , faible sécurité, mis en cache

POST : non transmis via l'URL

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

Écriture Ajax native

Étapes de l'opération Ajax

Création d'un objet Ajax

Navigateur non-IE6 :

var oAjax=new XMLHttpRequest();

Navigateur IE6 :

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

Connectez-vous au serveur

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

Méthode de cache de bloc :

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

Synchronisation : les choses du majeur js doivent être les mêmes. Une seule pièce à la fois

Asynchrone : js fait référence à plusieurs choses qui doivent être faites ensemble

ajax effectue une transmission asynchrone, pas de manière synchrone

Envoyer une demande

Ajax.send();

Recevoir la valeur de retour

Surveillance de l'état de la demande : événement onreadystatechange : déclenché lorsqu'il y a une communication entre votre propre Ajax et le serveur, principalement via l'attribut readyState pour déterminer si elle est terminée ou non. Cela ne signifie pas le succès. L'attribut status est utilisé pour juger l'attribut

readyState : request status

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

1 (chargement) méthode send a été appelée (), demande d'envoi

2 (chargement terminé) méthode send() terminée, tout le contenu correspondant a été reçu

3 (analyse) analyse le contenu de la réponse reçue

4 (Complet) L'analyse du contenu de la réponse est terminée et peut être appelée sur le client (l'achèvement n'est pas nécessairement réussi, le statut est requis pour détecter le succès ou l'échec)

statut attribut :

request Résultat, qu'il soit 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 elle doit être traitée davantage dans d'autres formats)

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

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

<. 🎜>

Méthode GET La fonction encapsulée 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);
      }
    }
  };
}

Jeu de caractères encodage : page Web et fichier demandé L'encodage 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), ajoutez ?+ ' après le chemin lors du passage des paramètres pour les données variables ' Cela n'affecte pas les données d'origine

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

demande ajax de données dynamiques : comme un fichier json

1 ajax la valeur de retour est une chaîne, qui peut être lue après conversion par eval Obtenir les données tableau/json renvoyées

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

2 Combiner avec DOM pour créer des éléments 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>&#39;+arr[i].user+&#39;</span>密码:<span>&#39;+arr[i].pass+&#39;</span>&#39;;
      oUl.appendChild(oLi);
    }
  },function(str){
    alert(str);
  });
}

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

Jetons un coup d'œil à un exemple dans lequel j'ai récemment écrit du js natif pour appeler json via le méthode get :

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;
    }
  }
}

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment implémenter la détection des changements à l'aide d'Angular

Comparaison de la carte, de l'ensemble, du tableau et de l'objet dans ES6 ( tutoriel détaillé)

Comment implémenter un serveur statique à l'aide de Node.js

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!