Ajax ist die Abkürzung von asynchronem JavaScript und XML und ein Mechanismus, um einen bestimmten Teil der Seite zu aktualisieren. Es gibt Ihnen die Möglichkeit, einen Teil der Seite zu aktualisieren, nachdem Sie Daten vom Server erhalten haben, um zu vermeiden, dass die gesamte Seite aktualisiert wird. Darüber hinaus kann die Realisierung lokaler Seitenaktualisierungen auf diese Weise nicht nur effektiv eine reibungslose Benutzererfahrung erstellen, sondern auch die Last auf dem Server reduzieren.
Hier finden Sie eine Analyse einer grundlegenden AJAX -Anfrage:
var xhr = new xmlhttprequest (); xhr.open ('get', 'send-ajax-data.php'); xhr.send (null);Hier erstellen wir eine Instanz einer Klasse, die HTTP -Anforderungen an den Server stellen kann. Die offene Methode wird dann aufgerufen, wobei der erste Parameter die HTTP -Anforderungsmethode und der zweite Parameter die URL der Anforderungsseite ist. Schließlich rufen wir die Send -Methode mit dem Parameter Null auf. Wenn Sie die Post -Request -Methode verwenden (wir verwenden CORE hier), sollten die Parameter Send -Methode alle Daten enthalten, die Sie senden möchten.
So behandeln wir die Antwort des Servers:
xhr.onReadyStatechange = function () {var done = 4; // ReadyState 4 bedeutet, dass die Anforderung an den Server VAR OK = 200 gesendet wurde. // Status 200 bedeutet, dass der Server erfolgreich zurückgibt, wenn (xhr.readyState === done) {if (xhr.status === ok) {console.log (xhr.responsetext); // Dies ist der zurückgegebene Text} else {console.log ("Fehler:"+ xhr.status); // Fehler aufgetreten in dieser Anforderung}}}OnreadyStatechange ist asynchron, das heißt, es wird jederzeit aufgerufen. Diese Art von Funktion wird als Rückruffunktion bezeichnet - sobald eine gewisse Verarbeitung abgeschlossen ist, wird sie aufgerufen. In diesem Fall erfolgt diese Verarbeitung auf dem Server.
Beispiel
Die bequeme AJAX -Methode ist auch der Grund, warum viele Menschen auf JQuery angewiesen sind, aber tatsächlich ist die AJAX -API von Native JavaScript sehr stark, und die grundlegende Verwendung ist in jedem Browser nicht viel unterschiedlich. Daher können Sie ein Ajax -Objekt selbst vollständig zusammenfassen. Das Folgende ist das eingekapselte AJAX -Objekt:
// AJAX -Methode // LAZY LOAD CREATE XHR -Objektfunktion createxhr () {if ('xmlhttpRequest' im Fenster) {createxhr = function () {return New XmlhttpRequest (); }; } else if ('activeXObject' im Fenster) {createxhr = function () {return New ActiveXObject ("msxml2.xmlhttp"); }; } else {createxhr = function () {Neuen Fehler werfen ("Ajax wird nicht durch diesen Browser"); }; } return createxhr (); } // ajax führt die Funktionsanforderung (ajaxData) {var xhr = createxHr () aus; ajaxdata.before && ajaxData.before (); // asynchrone Anforderungen durch Ereignisse achten xhr.onreadyStatechange = function () {if (xhr.readyState == 4) {if (xhr.status == 200) {if (ajaxdata.datatype == 'JSON') {// Das JSON -Objekt zurückgegeben wird. json1 = eval ('(' + jomin + ')')), JSON2 = (neue Funktion ('return' + Jomin)) (); ajaxdata.callback (JSON2); // ajaxdata.callback (json.parse (xhr.responsetext)); // native Methode, nicht unterstützt in IE6/7} else ajaxdata.callback (xhr.responsetext); } else {ajaxData.Error && ajaxdata.Error (xhr.responsetext); }}}; // Anforderungsparameter xhr.open festlegen (ajaxdata.type, ajaxdata.url); if (ajaxdata.nocache == true) xhr.setRequestheader ('if-modified-since', '0'); if (ajaxdata.data) {xhr.setRequestheader ('Content-Type', 'Application/X-Www-Form-Urlencoded'); xhr.send (ajaxdata.data); } anders {? ? xhr.setRequestheader ('x-requested-with', 'xmlhttprequest'); xhr.send (null); } return xhr;} Funktion post (ajaxData) {ajaxdata.type = 'post'; var _result = request (ajaxdata); return _result;} Funktion get (ajaxData) {ajaxData.type = 'get'; ajaxdata.data = null; var _result = request (ajaxdata); return _result;}Hier ist ein Beispiel für die Nutzung:
index.html
<! DocType html> <html Lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> native JavaScript-Implementierung ajax </title> <link rel = "styleSheet" type = "text/css" media = "all" href = ". Schriftfamilie: 'lucida grande', 'microsoft yahei'} #content .BTN_CTR {display: block; Breite: 120px; Höhe: 30px; Rand: 0 Auto 20px; Hintergrund: #53A7BB; Farbe: #fff; Schriftgewicht: fett; Schriftgröße: 14px; Zeilenhöhe: 30px; Textdekoration: Keine; Border-Radius: 4px; } #test {width: 280px; Höhe: 130px; Rand: 0 Auto; Polsterung: 15px; Hintergrund: #fff; Border-Radius: 4px; Text-Align: links; } </style> </head> <body> <div id = "header"> <div id = "header-content"> <div id = "header-Inside"> <p> <a href = "http://kayosite.com/css3-animation href = "http://kayosite.com" target = "_ leer"> mein Blog </a> </p> <p> Demo von Kayo © Copyright 2011-2013 </p> </div> <h1> css3 Animation </h1> </div> </div> <div id = "content"> <a href = " onclick = "get ({url: './ajax.html', callback: function (out) {document.getElementById ('test'). InnerHtml = out;}})"> AJAX -Inhalte </a> <div id = "test"> </div> </div> <//script> // Ajax -Methode, nicht aufgelistete Methode, nicht aufgelistet, und nicht aufgenommene Methode, nicht aufgelistet. Hier </script> </body> </html> ajax.html<! DocType html> <html lang = "zh-cn"> <pead> <meta charset = "utf-8"> <titels> ajax </title> </head> <body> <p> erfolgreich erhalten diesen Text </p> </body> </html>
Für bestimmte Effekte können Sie die vollständige Demo durchsuchen.