Résumé des méthodes pour appeler json depuis js

Cet article vous donne principalement 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 et en tirer des leçons. J'espère que cela pourra aider tout le monde.

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, pour exemple, enregistrement de l'utilisateur

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

La différence entre GET et POST :

GET : transmis via l'URL (mis dans l'url), les données transmises seront placées sur l'URL, nom = valeur & nom = valeur

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

POST : fait ne passe pas par l'URL

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

Écriture native Ajax

Étapes de l'opération Ajax

Créer 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 blocage :

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 La transmission asynchrone ne se fait pas de manière synchrone

Envoyer la 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 Ajax et le serveur. Il est principalement jugé par l'attribut readyState. La fin ne signifie pas le succès. 🎜>

Attribut readyState : request Status

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

1 (Chargement) La méthode send() a été appelée et la requête est en cours d'envoi

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 (Terminé) L'analyse du contenu de la réponse 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 nécessaire pour détecter le succès ou l'échec)

attribut de statut :

Résultat de la requête, qu'il s'agisse d'un succès (200) ou d'un échec (404) : Ajax.status==200

Valeur de retour réponseText :

Texte renvoyé par le serveur : Ajax.responseText (le texte renvoyé la valeur est une chaîne, elle doit parfois être traitée 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 le POST La méthode 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 fichier demandé doivent être les mêmes Si les deux sont utf8

.

cache, empêche 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 L'ajout de ?+ 'données variables' après le chemin n'affectera pas les données d'origine

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

ajax demande des données dynamiques : telles qu'un fichier json

1 La valeur de retour ajax est une chaîne et les données tableau/json renvoyées peut être lu via la conversion eval

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 (couramment utilisé maintenant)

Jetons un coup d'œil à un exemple dans lequel j'ai récemment écrit du js natif pour appelez json via la 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;
    }
  }
}

Recommandations associées :

Exemple d'appel inter-domaines php json_jquery

PHP5.5 ne peut pas appeler json_encode après l'installation

Appel ajax dans jquery Instructions pour l'utilisation de json data_jquery

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!