Heim > Web-Frontend > js-Tutorial > Hauptteil

So rufen Sie JSON in nativem JS auf

php中世界最好的语言
Freigeben: 2018-03-17 15:13:15
Original
2144 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie JSON mit nativem JS aufrufen. Was sind die Vorsichtsmaßnahmen für den Aufruf von JSON mit nativem JS?

Ajax-Grundlagen

Ajax: kein Lesen von Aktualisierungsdaten, Lesen von Informationen auf dem Server

HTTP-Anfragemethode :

GET: Wird zum Abrufen von Daten verwendet, z. B. zum Durchsuchen von Beiträgen.

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

POST: Wird zum Hochladen von Daten verwendet, z. B. zur Benutzerregistrierung

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

Der Unterschied zwischen GET und POST:

GET: Durch die URL übergeben (in die URL eingefügt), werden die übergebenen Daten platziert in der URL oben: name=value&name=value

Die Get-Methode hat eine geringe Kapazität, geringe Sicherheit und einen geringen Cache

POST: leitet die URL nicht weiter

Post-Kapazität ist größer, im Allgemeinen Bis zu 2G, relativ hohe Sicherheit, kein Cache

Natives Ajax-Schreiben

Ajax-Betriebsschritte

Erstellen Sie ein Ajax-Objekt

Nicht-IE6-Browser:

var oAjax=new XMLHttpRequest();
Nach dem Login kopieren

IE6-Browser:

var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
Nach dem Login kopieren

Mit dem Server verbinden

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

Blockieren Cache-Methode:

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

Synchron: js bedeutet, dass Dinge einzeln erledigt werden müssen

Asynchron: js bedeutet, dass mehrere Dinge zusammen erledigt werden müssen

Ajax wird verwendet Bei asynchroner Übertragung ist es nicht synchron.

Anfrage senden

Ajax.send();
Nach dem Login kopieren

Rückgabewert empfangen

Anforderungsstatusüberwachung: onreadystatechange-Ereignis: Wenn Ihr Ajax kommuniziert mit dem Server. Wird ausgelöst, wenn eine Kommunikation zwischen den beiden Parteien stattfindet. Das Ende bedeutet nicht, dass das Statusattribut zur Beurteilung

readyState-Attribut: Anforderungsstatus

0 (nicht initialisiert). Die open-Methode wurde nicht aufgerufen

1 (Laden) Die send()-Methode wurde aufgerufen und die Anfrage wird gesendet

2 (Laden). abgeschlossen) Die send()-Methode wurde abgeschlossen und der gesamte entsprechende Inhalt wurde empfangen

3 (Parsing) Der empfangene Antwortinhalt wird analysiert

4 (Abgeschlossen) Der Antwortinhalt wird analysiert abgeschlossen und kann auf dem Client aufgerufen werden (Abschluss bedeutet nicht unbedingt Erfolg, Status ist erforderlich, um zu erkennen, ob er erfolgreich ist oder nicht) Fehler)

Statusattribut:

Ergebnis anfordern, ob erfolgreich (200) oder fehlgeschlagen (404): Ajax.status==200

Rückgabewert ResponseText:

Vom Server zurückgegebener Text: Ajax.responseText (der zurückgegebene Wert ist eine Zeichenfolge, manchmal auch muss in andere Formate weiterverarbeitet werden)

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

Kapseln Sie natives Ajax in eine Funktion. Das endgültige geschriebene native Ajax lautet:

Die von der GET-Methode gekapselte Funktion ist:

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); //对失败的原因做出处理
        }
      }
     }
   }
  }
Nach dem Login kopieren

Die von der POST-Methode gekapselte Funktion ist:

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);
      }
    }
  };
}
Nach dem Login kopieren

Zeichensatzkodierung: Die Kodierung der Webseite und der angeforderten Datei Muss gleich sein, wenn beide utf8

Cache sind, verhindern Sie das Caching (sich häufig ändernde Daten usw. können nicht zwischengespeichert werden. Wird hauptsächlich für die GET-Methode verwendet) und fügen Sie beim Übergeben nach dem Pfad ?+'Variablendaten' hinzu Parameter. Dies hat keine Auswirkungen auf die Originaldaten

ajax(&#39;a.txt?t=&#39;+new Date().getTime(),function(str){
  alert(str);
},function(str){
  alert(str);
});
Nach dem Login kopieren

Dynamische Ajax-Anforderungsdaten: z. B. JSON-Datei

1 Der Ajax-Rückgabewert ist eine Zeichenfolge Zurückgegebene Array-/JSON-Daten können durch Auswertungskonvertierung gelesen werden

alert(str);
alert(typeof(str));
var arr=eval(str);
alert(typeof(arr));
alert(arr[1]);
alert(arr[1].c);
Nach dem Login kopieren

2 Elemente in Kombination mit DOM erstellen, um den zurückgegebenen Inhalt anzuzeigen

oBtn.onclick=function(){
  ajax(&#39;data/arr3.txt?t=&#39;+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);
  });
}
Nach dem Login kopieren

Datentyp-->Der zurückgegebene Datentyp kann xml (fast eliminiert), json (jetzt häufig verwendet) sein

Werfen wir einen Blick auf die nativen js, die ich kürzlich geschrieben habe, um json über die get-Methode aufzurufen Beispiel:

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;
    }
  }
}
Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JS-Imitation des klassischen legendären Spiels

So stellen Sie den Remote-Modus für den Webpack-Dev-Server ein

Das obige ist der detaillierte Inhalt vonSo rufen Sie JSON in nativem JS auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage