So rufen Sie JSON mit JS auf

In diesem Artikel finden Sie eine detaillierte Analyse der js-Aufrufmethode. Freunde in Not können sich darauf beziehen.

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);  //这是服务器返回的数据
})

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)

Der Unterschied zwischen GET und POST:

GET: Wird über die URL übergeben (in die URL eingefügt), die übergebenen Daten werden auf der URL platziert, Name=Wert&Name=Wert

Die Get-Methode hat eine geringe Kapazität und Sicherheit Niedrig, mit Cache

POST: nicht über die URL weitergeleitet

Die Postkapazität ist groß, im Allgemeinen bis zu 2G, die Sicherheit ist relativ hoch, es gibt keinen Cache

Natives Ajax-Schreiben

Ajax-Operationsschritte

Erstellen Sie ein Ajax-Objekt

Nicht-IE6-Browser:

var oAjax=new XMLHttpRequest();

IE6-Browser:

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

Mit dem Server verbinden

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

Caching-Methode verhindern:

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

Synchronisation: js Mittelfinger bedeutet, dass die Dinge eins nach dem anderen kommen müssen

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

Ajax wird für die asynchrone Übertragung verwendet, nicht synchron

Anfrage senden

Ajax.send();

Rückgabewert erhalten

Anforderungsstatusüberwachung: onreadystatechange-Ereignis: Wird ausgelöst, wenn zwischen Ihrem Ajax und dem Server kommuniziert wird. Das Ende bedeutet keinen Erfolg Das Statusattribut wird zur Beurteilung des

readyState-Attributs verwendet: Anforderungsstatus

0 (nicht initialisiert) Die offene Methode wurde noch nicht aufgerufen

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

2 (Laden abgeschlossen) Die send()-Methode ist abgeschlossen und alle entsprechenden Inhalte wurden empfangen

3 (Parsing) Der empfangene Antwortinhalt ist Wird analysiert

4 (Abgeschlossen) Das Parsen des Antwortinhalts ist abgeschlossen, OK Wird auf dem Client aufgerufen (Abschluss ist nicht unbedingt erfolgreich, Status ist erforderlich, um Erfolg oder Misserfolg zu erkennen)

Statusattribut:

Anforderungsergebnis, ob Erfolg (200) oder Misserfolg (404): Ajax .status==200

Rückgabewert Antworttext:

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

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

kapselt das native 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); //对失败的原因做出处理
    　　  }
   　　 }
  　　 }
 　　}
　 }

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

Zeichensatzkodierung: Die Kodierung von Die Webseite und die angeforderte Datei müssen identisch sein. Wenn beide utf8 sind

Caching, verhindern Sie das Caching (häufig geänderte Daten usw. können nicht zwischengespeichert werden. Wird hauptsächlich für die GET-Methode verwendet und hinzugefügt). ?+'variable Daten' nach dem Pfad, um Auswirkungen auf die Originaldaten zu vermeiden

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

Dynamische Ajax-Anforderungsdaten: Wie JSON-Datei

1 Der Ajax-Rückgabewert ist a Zeichenfolge, und die zurückgegebenen 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);

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

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

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

Werfen wir einen Blick auf die nativen js, die ich kürzlich geschrieben habe? Beispiel für den Aufruf von json über die get-Methode:

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

Das Obige ist Was ich für alle zusammengestellt habe, hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die Änderungserkennung mit Angular

Vergleich von Karte, Satz, Array und Objekt in ES6 (ausführlich Tutorial)

So implementieren Sie einen statischen Server mit Node.js

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