Technologieaustausch

Was ist AJAX? Natives Syntaxformat? Was ist der Unterschied zwischen der Bereitstellung von gepacktem AJAX durch jQuery?

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Ajax vollständiger Name Asynchrones JavaScript und XML (asynchron JavaScript Und XML) 

AJAXEs handelt sich um eine Webentwicklungstechnologie zur Erstellung interaktiver Webanwendungen.Die wichtigste Abhängigkeit ist das vom Browser bereitgestellte XMLHttpRequest-Objekt. Dieses Objekt ermöglicht dem Browser die Ausgabe HTTP Anfordern und erhalten HTTP Antwort. Erzielen Sie eine Interaktion mit dem Server, ohne die Seite zu aktualisieren.

Natives AJAX-Syntaxformat:

  1. let xhr = new XMLHttpRequest();
  2. xhr.open('get','js/index.json',true);
  3. xhr.send();
  4. xhr.onreadystatechange = function() {
  5. if (xhr.readyState == 4 && xhr.status == 200) {
  6. let text = xhr.responseText;
  7. console.log(text);
  8. let data = JSON.parse(text);
  9. console.log(data);
  10. }
  11. };
So verwenden Sie Ajax:
1. Erstellen Sie ein XMLHttpRequest-Objekt
2. Geben Sie mit der Methode open die anzufordernde Adresse, den Typ und die Methode an.
3. Verwenden Sie die Sendemethode, um die Anfrage zu senden. Wenn Sie Parameter übergeben müssen:
Die Get-Methode erfordert das Spleißen der Parameter an das Ende der URL und das Aufteilen der Parameter. Beispiel: 'index.php?name=张三&age=18'
Die Post-Methode kann Parameter in send() einfügen. Beispiel: send('name=张三&age=18')
4. Binden Sie das Ereignis onreadystatechange, um den Status von readyState und den Status zu ermitteln.
5. Empfangen Sie Daten und verwenden Sie sie durch JSON-Konvertierung.

 

jQuery bietet gepacktes AJAX, das schneller und für den Einsatz in Entwicklungsprojekten geeignet ist. Natives AJAX ist einfacher zu verstehen und zu verstehen.

jQuery-Syntaxformat:

  1. $.ajax({
  2. type: "GET",
  3. url: 'js/exercise.json',
  4. data: {},
  5. headers:'',
  6. datatype:'',
  7. async:'',
  8. success: function(result) {
  9. console.log(result);
  10. data = result;
  11. },
  12. Error: function(e) {
  13. console.log(e.status);
  14. console.log(e.responseText);
  15. },
  16. });