Zusammenfassung der Methoden zum Aufrufen von JSON aus JS

Dieser Artikel enthält hauptsächlich eine detaillierte Analyse der js-Aufrufmethode. Freunde in Not können darauf zurückgreifen und daraus lernen.

Ajax-Grundlagen

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

HTTP-Anforderungsmethode :

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 Beispiel: 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 (URL eingeben), die übergebenen Daten werden in der URL platziert, Name = Wert & Name = Wert

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

POST: funktioniert nicht über die URL weiterleiten

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

Natives Ajax-Schreiben

Ajax-Bedienungsschritte

Erstellen Sie ein Ajax-Objekt

Nicht-IE6-Browser:

var oAjax=new XMLHttpRequest();

IE6-Browser:

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

Mit Server verbinden

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

Block-Cache-Methode:

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

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

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

ajax ist Asynchrone Übertragung erfolgt nicht synchron

Anfrage senden

Ajax.send();

Rückgabewert empfangen

Anforderungsstatusüberwachung: onreadystatechange-Ereignis: Wird ausgelöst, wenn eine Kommunikation zwischen Ihrem Ajax und dem Server stattfindet. Das Ende bedeutet nicht, dass es erfolgreich ist 🎜>

readyState-Attribut: Anforderungsstatus

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

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

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

3 (Analyse) Der empfangene Antwortinhalt wird analysiert

4 (Abgeschlossen) Der Antwortinhalt wurde analysiert und kann auf dem Client aufgerufen werden (Abschluss bedeutet nicht unbedingt Erfolg, Status ist erforderlich, um Erfolg oder Misserfolg zu erkennen)

Statusattribut:

Request-Ergebnis, ob Erfolg (200) oder Misserfolg (404): Ajax.status==200

Rückgabewert ResponseText:

Vom Server zurückgegebener Text: Ajax.responseText (der 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);
    }
  }
}

Kapseln Sie 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 GET-Methode gekapselte Funktion Die POST-Methode lautet:

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 der Webseite und der angeforderten Datei muss gleich sein, wenn beide utf8 sind

Zwischenspeichern, Zwischenspeichern verhindern (sich häufig ändernde Daten usw. können nicht zwischengespeichert werden. Wird hauptsächlich für die GET-Methode verwendet), wenn Parameter übergeben werden. Das Hinzufügen von ?+'Variablendaten' nach dem Pfad hat keinen Einfluss auf die Originaldaten

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

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

1 Der Ajax-Rückgabewert ist eine Zeichenfolge und das 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);

2 Mit DOM kombinieren, um Elemente zu erstellen und den 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 xml (fast eliminiert) oder json (heute häufig verwendet) sein.

Sehen wir uns ein Beispiel an, in dem ich kürzlich natives js geschrieben habe So rufen Sie JSON über die Get-Methode auf:

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

Verwandte Empfehlungen:

Beispiel für den domänenübergreifenden PHP-Aufruf von json_jquery

PHP5.5 kann json_encode nach der Installation nicht aufrufen

Ajax-Aufruf in jquery Anweisungen zur Verwendung von json data_jquery

Das obige ist der detaillierte Inhalt vonZusammenfassung der Methoden zum Aufrufen von JSON aus JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!