Ajax es la abreviatura de JavaScript y XML asíncrono, y es un mecanismo para actualizar una determinada parte de la página. Le brinda el poder de actualizar una parte de la página después de obtener datos del servidor, evitando así actualizar la página completa. Además, realizar actualizaciones de páginas locales de esta manera no solo puede crear efectivamente una experiencia de usuario suave, sino también reducir la carga en el servidor.
Aquí hay un análisis de una solicitud básica de AJAX:
var xhr = new xmlhttprequest (); xhr.open ('get', 'send-ajax-data.php'); xhr.send (null);Aquí, creamos una instancia de una clase que puede hacer solicitudes HTTP al servidor. Luego se llama a su método abierto, donde el primer parámetro es el método de solicitud HTTP y el segundo parámetro es la URL de la página de solicitud. Finalmente, llamamos al método de envío con el parámetro nulo. Si usa el método de solicitud de publicación (usamos GUT AQUÍ), los parámetros del método de envío deben contener cualquier datos que desee enviar.
Así es como manejamos la respuesta del servidor:
xhr.OnreadyStateChange = function () {var ded = 4; // ReadyState 4 significa que la solicitud se ha enviado al servidor var ok = 200; // Estado 200 significa que el servidor regresa correctamente si (xhr.readyState === Done) {if (xhr.status === OK) {console.log (xhr.Responsetext); // Este es el texto devuelto} else {console.log ("Error:"+ xhr.status); // ocurrió un error en esta solicitud}}}OnreadyStateChange es asíncrono, por lo que eso significa que se llamará en cualquier momento. Este tipo de función se llama función de devolución de llamada; una vez que se completa algún procesamiento, se llama. En este caso, este procesamiento ocurre en el servidor.
Ejemplo
El conveniente método AJAX es también la razón por la cual muchas personas confían en jQuery, pero de hecho, la API AJAX de JavaScript nativa también es muy poderosa, y el uso básico no es muy diferente en cada navegador. Por lo tanto, puede encapsular completamente un objeto AJAX usted mismo. El siguiente es el objeto AJAX encapsulado:
// Método Ajax // Lazy Load Crear función de objeto XHR createExhr () {if ('xmlhttprequest' en ventana) {createxhr = function () {return new xmlhttprequest (); }; } else if ('activoxObject' en la ventana) {createExhr = function () {return new ActiveXObject ("msxml2.xmlhttp"); }; } else {createExhr = function () {Throw New Error ("Ajax no es compatible con este navegador"); }; } return createExhr (); } // Ajax ejecuta solicitud de función (AJAXDATA) {var xhr = createExhr (); ajaxdata.before && ajaxdata.before (); // manejar solicitudes asíncronas a través de eventos xhr.onreadyStateChange = function () {if (xhr.readyState == 4) {if (xhr.status == 200) {if (ajaxdata.datatype == 'json') {// Obtenga el objeto JSON devuelto por el servidor = xhr.ResponseteExt; json1 = eval ('(' + jsonstr + ')'), json2 = (nueva función ('return' + jsonstr)) (); ajaxdata.callback (JSON2); // ajaxdata.callback (json.parse (xhr.esponsetext)); // Método nativo, no admitido en IE6/7} else Ajaxdata.callback (xhr.Responsetext); } else {ajaxdata.error && ajaxdata.error (xhr.ResponsEtext); }}}; // Establecer parámetros de solicitud XHR.OPEN (AJAXDATA.TYPE, AJAXDATA.URL); if (ajaxData.nocache == true) xhr.setRequestHeader ('if-modificado-since', '0'); if (ajaxdata.data) {xhr.setRequestHeader ('content-type', 'application/x-www-form-urlencoded'); XHR.SEND (AJAXDATA.DATA); } demás {? ? XHR.SetRequestHeader ('X-requisito con', 'xmlhttprequest'); XHR.SEND (NULL); } return xhr;} función post (ajaxData) {ajaxdata.type = 'post'; var _Result = request (AJAXDATA); return _Result;} function get (ajaxData) {ajaxdata.type = 'get'; ajaxdata.data = null; var _Result = request (AJAXDATA); return _Result;}Aquí hay un ejemplo de uso:
index.html
<! DocType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> implementación nativa de javascript ajax </title> <link rel = "stylesheet" type = "text/css" medios = "todos" href = "./ comunes/comunes.css"/> <style> #content {text-ealtine: Font-Family: 'Lucida Grande', 'Microsoft Yahei'} #Content .BTN_CTR {display: block; Ancho: 120px; Altura: 30px; margen: 0 auto 20px; Antecedentes: #53A7BB; Color: #fff; Font-Weight: Bold; tamaño de fuente: 14px; Línea de altura: 30px; Decoración de texto: ninguna; Border-Radius: 4px; } #test {ancho: 280px; Altura: 130px; margen: 0 auto; relleno: 15px; Antecedentes: #fff; Border-Radius: 4px; text-align: izquierda; } </style> </head> <body> <div id = "header"> <div id = "header-content"> <div id = "header-inside"> <p> <a href = "http://kayose.com/css3-animation.html" target = "_ en blanco" href = "http://kayosite.com" target = "_ en blanco"> mi blog </a> </p> <p> Demo by Kayo © Copyright 2011-2013 </p> </div> <h1> CSS3 Animation </h1> </div> </div> <d "contenido"> <a href = "javascript:;"; " onClick = "get ({Url: './ajax.html', callback: function (out) {document.getElementById ('test'). innerhtml = out;}})"> Ajax obtenga contenido </a> <div = "test"> </div> </div> <script> // método de AJAX, no enumerada en la lista repetida. aquí </script> </body> </html> ajax.html<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> ajax </title> </head> <body> <p> obtuvo con éxito este texto </p> </body> </html>
Para efectos específicos, puede explorar la demostración completa.