AJAX: Una forma de solicitar datos sin actualizar la página completa;
El núcleo técnico de AJAX es el objeto xmlhttprequest;
Proceso de solicitud de AJAX: cree el objeto XMLHTTPREQUEST, conéctese al servidor, envíe solicitudes y reciba datos de respuesta;
/*** Get Ajax Object*/function getAJAXHTTP () {var xmlhttp; Pruebe {// Chrome, Firefox, Opera 8.0+, Safari xmlhttp = new xmlhttprequest (); } catch (e) {// Internet Explorer intenta {// ie5, 6 xmlhttp = new ActiveXObject ("msxml2.xmlhttp"); } catch (e) {try {// ie7 o arriba xmlhttp = new ActiveXObject ("Microsoft.xmlhttp"); } catch (e) {alerta ("Su navegador no admite AJAX!"); devolver falso; }}} return xmlhttp;}/** * Enviar solicitud Ajax * url-url * métodyPe (post/get) * con (true (asynChonous) | false (synchonous)) * parámetro (parámetro) * functionName (nombre de método de devolución de llamada, no se requieren cotizaciones, solo se llama cuando sucede) * (nota: este método tiene dos parámetros, un parámetro, un parámetro, solo se requieren cotizaciones, un parámetro, un parámetro, un parámetro, y un parámetro, un parámetro, un parámetro, un parámetro, solo se requieren cotizaciones. el otro es el objeto a procesar) * OBJ debe ir al objeto que se procese en el método de devolución de llamada */function aJaxRequest (url, métodyPe, con, parámetro, functionName, obj) {var xmlhttp = getajaxhttp (); xmlhttp.onreadyStateChange = function () {// ReadyState Value Descripción // 0, Inicialización, el objeto XHR se ha creado, Open aún no se ha ejecutado // 1, se ha llamado al método de carga, el método abierto, pero la solicitud aún no se ha enviado // 2, la carga se ha completado, la solicitud se ha enviado // 3, interacción, parte de los datos se puede recibir // La descripción de la descripción / / 200: el archivo de la solicitud de estado. URL encontrada // 500: El servidor genera un error interno if (xmlhttp.readyState == 4 && xhr.status == 200) {// La respuesta http se ha recibido completamente antes de llamar a functionName (xmlhttp, obj); }}; xmlhttp.open (MethodType, URL, Con); xmlhttp.send (parámetro);} // Esta es la función de parámetro createExml () {var xml = "<serer> <surid> asdfasdfasdf <// userid> </serem>"; // "//" Esto no es capital v pero el escape es el corte de corte izquierdo y el retorno de corte correcto;} // esta es la función de parámetro de parámetro (). json = {id: 0, nombre de usuario: "buena persona"}; return json;} function c () {alert ("");}//prueba
AjaxRequest ("http://www.baidu.com", "post", true, createExml (), c, document);Veamos otro ejemplo
AJAX ({url: "./testxhr.aspx", // Tipo de dirección de solicitud: "Post", // Solicitar datos del método: {name: "super", edad: 20}, // solicitud de parámetro dataType: "json", éxito: function (respuesta, xml) {// código ejecutado después de la ubicación exitosa}, fallando (estado) function ajax (opciones) {opciones = opciones || {}; opciones.type = (options.type || "get"). toUpperCase (); options.datatype = options.datatype || "JSON"; var params = formatParams (options.data); // Crear - NoniE6 - Paso 1 if (window.xmlhttprequest) {var xhr = new xmlhttprequest (); } else {// ie6 y debajo de los navegadores var xhr = new ActiveXObject ('Microsoft.xmlhttp'); } // Recibir - Paso 3 xhr.onreadyStateChange = function () {if (xhr.readyState == 4) {var status = xhr.status; if (status> = 200 && status <300) {options.success && options.success (xhr.Responsetext, xhr.Responsexml); } else {options.fail && options.fail (status); }}} // Conectar y enviar - Paso 2 if (options.type == "get") {xhr.open ("get", options.url + "?" + Params, true); XHR.SEND (NULL); } else if (options.type == "post") {xhr.open ("post", options.url, true); // Establezca el tipo de contenido al enviar el formulario XHR.SetRequestHeader ("Content-type", "Application/X-WWW-Form-URLEncoded"); XHR.SEND (params); }} // Formato de parámetro FormatParams (data) {var arr = []; for (nombre var en datos) {arr.push (encodeReRiComponent (name) + "=" + codeDoRponent (data [name])); } arr.push (("v =" + math.random ()). reemplazar (".", "); return arr.Join (" & ");}Echemos un vistazo al principio
1. Crear
1.1. Las versiones de IE7 y arriba admiten objetos XHR nativos, por lo que puede usarlo directamente: var oajax = new xmlhttprequest ();
1.2. En IE6 y sus versiones anteriores, el objeto XHR se implementa a través de un objeto ActiveX en la biblioteca MSXML. Algunos libros han refinado tres versiones diferentes de tales objetos en IE, a saber, msxml2.xmlhttp, msxml2.xmlhttp.3.0 y msxml2.xmlhttp.6.0; Siento que es demasiado problemático, por lo que puedo usar directamente la siguiente declaración para crearla: var oajax = new ActiveXObject ('Microsoft.xmlhttp');
2. Conectar y enviar
2.1. Tres parámetros de la función Open (): método de solicitud, dirección de solicitud y si debe solicitar asíncronamente (hay muy pocas solicitudes sincrónicas y aún no se ha utilizado);
2.2. El método de solicitud GET es enviar datos al servidor a través de los parámetros de URL, mientras que la publicación envía datos al servidor como un parámetro de envío;
2.3. En una solicitud de publicación, antes de enviar datos, se debe establecer el tipo de contenido del formulario enviado;
2.4. Los parámetros enviados al servidor deben estar codificados por el método CodeReRicOponent (). De hecho, en forma de la lista de parámetros "clave = valor", tanto la clave como el valor deben codificarse porque contendrán caracteres especiales. Cada vez que solicite, una cadena de "v = xx" se deletreará en la lista de parámetros. Esto es para rechazar la caché, y cada vez que lo solicite directamente al servidor.
Encodeuri (): Utilizado para codificar todo el URI, y no codificará caracteres especiales que pertenecen al URI, como colons, barras hacia adelante, signos de interrogación y signos de libra; su función de decodificación correspondiente decodeuri ();
EncodeUriComponent (): se usa para codificar una parte del URI y codificar cualquier caracteres no estándar que encuentre; su función de decodificación correspondiente decodeuricomponent ();
3. Recibir
3.1. Después de recibir la respuesta, los datos de respuesta se llenarán automáticamente con el objeto XHR. Los atributos relevantes son los siguientes
ResponseText: el contenido del cuerpo devuelto por la respuesta, del tipo de cadena;
Respuestaxml: si el tipo de contenido de la respuesta es "Texto/XML" o "Aplicación/XML", los datos XML correspondientes se almacenarán en esta propiedad, que es el tipo de documento correspondiente a XML;
Estado: el código de estado HTTP de respuesta;
StatusText: Descripción del estado HTTP;
3.2. La propiedad ReadyState del objeto XHR representa la etapa activa actual del proceso de solicitud/respuesta. El valor de esta propiedad es el siguiente
0-Uninitializado, el método Open () aún no se ha llamado;
El método de 1 inicio, Open () se llama, el método send () no se llama;
2-SEND, se ha llamado al método send (), y no se ha recibido ninguna respuesta;
3-reciente, se ha recibido parte de los datos de respuesta;
4-Completo, se han recibido todos los datos de respuesta;
Mientras el valor de ReadyState cambie, se llamará al evento ReadyStateChange (de hecho, para una suavidad lógica, puede colocar ReadyStateChange después de enviar, porque se solicita el servidor durante el envío, y la comunicación de red se llevará a cabo, lo que lleva tiempo. También está bien para especificar el controlador ReadyStateStech después del envío. Por lo general, uso esto, pero para el propósito de estandarizar y estandarizar y transformar la compensación de la compensación, es mejor que se especifique.
3.3. En el evento ReadyStateChange, primero determine si la respuesta se recibe y luego determine si el servidor maneja con éxito la solicitud. Xhr.status es el código de estado. El código de estado comienza con 2 y todos tienen éxito. 304 significa salir del caché. El código anterior agrega un número aleatorio cada vez que se solicita la solicitud, por lo que no es necesario juzgar el valor del caché.
4. ¡Las solicitudes de AJAX no pueden ser de dominio cruzado!