Was ist Ajax? Detaillierte Erläuterung verschiedener Implementierungsmethoden von Ajax (mit Anwendungsbeispielen)

In diesem Artikel werden hauptsächlich die Implementierungsmethode von Ajax sowie die Definitionsanalyse von Ajax vorgestellt. Lassen Sie alle besser verstehen, wie man Ajax verwendet und wie man Ajax mit jQuery implementiert. Beginnen wir jetzt mit dem Lesen dieses Artikels

1. Was ist Ajax

Ajax: Asynchrones Javascript und XML, realisiert den Datenaustauschprozess zwischen dem Client und dem Server und sendet Anfragen asynchron. Ajax ist keine neue Programmiersprache, sondern eine Technologie zur Erstellung besserer, schnellerer und interaktiverer Webanwendungen.
Die Vorteile des Einsatzes von Technologie sind: Es ist keine Seitenaktualisierung erforderlich und andere Vorgänge können ausgeführt werden, während darauf gewartet wird, dass die Seite Daten überträgt.

2. Ajax mit nativem JS implementieren

Hier ist eine Implementierungsroutine, die Idee ist ungefähr wie folgt:
1. Erstellen Sie xmlHttpRequest 对象 entsprechend verschiedenen Browsern
. Verwenden Sie open to call und send, um die Anfrage an die Ajax-Engine zu senden.
3. Nachdem das Serverprogramm ausgeführt wurde, wird das Ergebnis an den Client zurückgegeben (verwenden Sie xml.readyState == 4 && xml.status == 200, um festzustellen, ob das Senden erfolgreich war, und verwenden Sie dann xml.responseText, um die vom Hintergrund zurückgegebenen Daten zu empfangen)

//返回一个xmlHttpRequest 对象function creathttprequest()
{    if(window.XMLHttpRequest)        var xml=new XMLHttpRequest();    else
        var xml=ActiveXObject("Miscrosoft.XMLHTTP");    return xml;
}//这里是触发 AJAX 的事件（比如是一个按钮的点击事件之类的）function triggerAjax() {   //上面思路步骤1，创建一个xmlHttpRequest 对象
    var xml = creathttprequest();    //上面思路步骤2
    xml.open("POST","result.php",false);   //open() 第二个参数是你后台php文件的相对路径
    xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    xml.send(url);    //上面思路步骤3
    if(xml.readyState==4&&xml.status==200)
    {
        alert(xml.responseText);
    }
}

3. JQuery-Implementierung Ajax

JQuerys Methode zur Implementierung von Ajax ist viel einfacher. Es ist bereits eine $.ajax-Funktion gekapselt, die sehr bequem aufzurufen ist.

$.ajax({ 
  type: "POST", //发送是以POST还是GET
  url: "ajax.php", //发送的地址
  dataType: "json", //传输数据的格式
  data: {"username": "zwkkkk1","password": 123456}, //传输的数据
  //成功的回调函数
  success: function(msg) { 
    console.log(msg) 
  }, 
  //失败的回调函数
  error: function() { 
    console.log("error") 
  } 
})

1. Was ist Ajax

---

Ajax: Asynchrones Javascript und XML, das den Datenaustauschprozess zwischen dem Client und dem Server realisiert und Anfragen asynchron sendet. Ajax ist keine neue Programmiersprache, sondern eine Technologie zur Erstellung besserer, schnellerer und interaktiverer Webanwendungen.
Die Vorteile des Einsatzes von Technologie sind: Es ist keine Seitenaktualisierung erforderlich und andere Vorgänge können ausgeführt werden, während darauf gewartet wird, dass die Seite Daten überträgt.

2. Ajax mit nativem JS implementieren

---

Hier ist eine Implementierungsroutine, die Idee ist ungefähr wie folgt:
Erstellen Sie xmlHttpRequest 对象 entsprechend verschiedenen Browsern
2. Verwenden Sie open to call und send, um die Anfrage an die Ajax-Engine zu senden.
3. Nachdem das Serverprogramm ausgeführt wurde, wird das Ergebnis an den Client zurückgegeben (verwenden Sie xml.readyState == 4 && xml.status == 200, um festzustellen, ob das Senden erfolgreich war, und verwenden Sie dann xml.responseText, um die vom Hintergrund zurückgegebenen Daten zu empfangen) (Wenn Sie Wenn Sie mehr sehen möchten, besuchen Sie die chinesische PHP-Website AJAX-Entwicklungshandbuch (Spalte zum Lernen)

//返回一个xmlHttpRequest 对象function creathttprequest()
{    if(window.XMLHttpRequest)        var xml=new XMLHttpRequest();    else
        var xml=ActiveXObject("Miscrosoft.XMLHTTP");    return xml;
}//这里是触发 AJAX 的事件（比如是一个按钮的点击事件之类的）function triggerAjax() {   //上面思路步骤1，创建一个xmlHttpRequest 对象
    var xml = creathttprequest();    //上面思路步骤2
    xml.open("POST","result.php",false);   //open() 第二个参数是你后台php文件的相对路径
    xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    xml.send(url);    //上面思路步骤3
    if(xml.readyState==4&&xml.status==200)
    {
        alert(xml.responseText);
    }
}

3. JQuery implementiert Ajax

JQuery implementiert Ajax auf viel einfachere Weise . Eine $.ajax-Funktion wurde gekapselt. Sie ist einfach aufzurufen.

$.ajax({ 
  type: "POST", //发送是以POST还是GET
  url: "ajax.php", //发送的地址
  dataType: "json", //传输数据的格式
  data: {"username": "zwkkkk1","password": 123456}, //传输的数据
  //成功的回调函数
  success: function(msg) { 
    console.log(msg) 
  }, 
  //失败的回调函数
  error: function() { 
    console.log("error") 
  } 
})

Dieser Artikel endet hier (wenn Sie mehr sehen möchten, besuchen Sie die Spalte „Ajax-Benutzerhandbuch“ für PHP, um mehr zu erfahren. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen). unten.

Das obige ist der detaillierte Inhalt vonWas ist Ajax? Detaillierte Erläuterung verschiedener Implementierungsmethoden von Ajax (mit Anwendungsbeispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!