Este artículo hace referencia y cita "Sharp JQuery" para proporcionar una explicación detallada de jQuery-Ajax y sus métodos principales.
a. No requiere ningún complemento del navegador <br/>No requiere ningún complemento del navegador y puede ser compatible con la mayoría de los navegadores. Los usuarios solo necesitan permitir JavaScript en el. navegador Simplemente ejecute.
b. Excelente experiencia de usuario.
La mayor ventaja es que los datos se pueden actualizar sin actualizar toda la página, lo que permite que la aplicación web responda rápidamente a las operaciones del usuario.
c. Mejorar el rendimiento de los programas web <br/>En comparación con el modo tradicional, la mayor diferencia en el rendimiento del modo Ajax es la forma de transmitir datos. En el modo tradicional, el envío de datos se realiza a través del formulario (de). y los datos Lo que se obtiene es obtener el contenido de toda la página actualizando completamente la página web. El modo Ajax solo envía los datos que deben enviarse al servidor a través del objeto XMLHttpRequest, es decir, se envía bajo demanda. .
d. Reducir la carga sobre los servidores y la banda ancha.
El principio de funcionamiento de Ajax es equivalente a agregar una capa intermediaria entre el usuario y el servidor, que asincroniza las operaciones del usuario y las respuestas del servidor. Crea un motor Ajax en el cliente y transfiere parte del trabajo cargado por el servidor a la forma tradicional. el cliente., lo que facilita el procesamiento de los recursos del cliente y reduce la carga sobre los servidores y la banda ancha.
a. Soporte insuficiente del navegador para el objeto XMLHttpRequest.
Una de las deficiencias de Ajax proviene primero del navegador. Solo IE5.0 y versiones posteriores admiten el objeto XMLHttpRequest (la mayoría de los clientes en esta etapa son IE6 o superiores, y otros navegadores admiten XMLHttpRequest más adelante). Normalmente, en varios navegadores, los programadores deben dedicar mucho esfuerzo a codificar para tener en cuenta las diferencias entre los navegadores, de modo que las aplicaciones Aajx puedan ser mejor compatibles con varios navegadores.
b. Destruir las funciones normales de los botones de avance y retroceso del navegador <br/>En Ajax, las funciones de los botones de avance y retroceso no serán válidas, aunque se pueden usar ciertos métodos (agregar puntos de anclaje) para permitir que los usuarios utilicen el botón de avance. y botones de retroceso, pero en comparación con el método tradicional, es mucho más problemático para los usuarios, a menudo se encuentran con esta situación cuando hacen clic en un botón para activar una interacción Ajax, sienten que no quieren hacerlo. y luego habitualmente hacen clic en el botón Atrás, se produjo el resultado más indeseable. El navegador volvió a la página anterior y el contenido obtenido a través de la interacción Ajax desapareció por completo.
c. Soporte insuficiente para los motores de búsqueda <br/>Por lo general, los motores de búsqueda utilizan rastreadores para buscar y organizar miles de millones de datos masivos en Internet. Sin embargo, los rastreadores aún no pueden comprender esos códigos JavaScript extraños y, por lo tanto, los cambios en el contenido de las páginas causados por Ajax hacen que los sitios. utilizar Ajax en desventaja en comparación con los sitios tradicionales en la promoción de la red.
d. Falta de herramientas de desarrollo y depuración.
JavaScript es una parte importante de Ajax. Debido a la falta de buenas herramientas de depuración y desarrollo de JavaScript, muchos desarrolladores web le temen a JavaScript, lo que hace que escribir código Ajax sea aún más difícil. Tiene miedo de usar herramientas visuales y escribir código ella misma, lo que ha afectado hasta cierto punto la aplicación de Ajax por parte de todos.
el método AppServ Ajax necesita interactuar con el servidor web, por lo que requiere un entorno AppServe como kit de herramientas para instalar el entorno.
Dirección de descarga: https://www.appserv.org/en/download/Installation
: Presione el botón Siguiente en una sola máquina continuamente e ingrese información común como dirección del sitio web, dirección de correo electrónico, contraseña, etc. El puerto predeterminado es 80.
Ingrese "http://localhost:80" en el navegador y aparecerá la siguiente interfaz, indicando que la instalación se realizó correctamente.
Uso: Copie el programa escrito en la carpeta AppServwww instalada y luego ingrese "http://loaclhost:80/nombre de archivo del programa" en la barra de direcciones para acceder a él.
La biblioteca jQuery tiene una suite completa compatible con Ajax. Las funciones y métodos internos nos permiten cargar datos desde el servidor sin actualizar el navegador.
https://www.w3school.com.cn/jquery/jquery_ref_ajax.asp
En la imagen de arriba,
y $.getJSON().
ha publicado previamente un artículo "Explicación detallada del método jquery ajax-ajax()".
Para obtener más información, haga clic en: https://juejin.cn/post/7019188063704350756
es diferente de otros métodos. El método, el más simple y más utilizado, puede cargar código HTML remoto e insertarlo en el DOM.
Parámetros
de cargade estructura
(url, [datos], [devolución de llamada])
Aplicación
1) Carga de documentos HTML
Primero cree un archivo HTML (test.html) que se carga mediante el método load() y se agrega a la página. El código HTML es el siguiente:
<!DOCTYPE html>. <html> <cabeza> <meta juego de caracteres="utf-8"> <título>Prueba</título> </cabeza> <cuerpo> <div> <p>¡hola mundo!</p> <ul> <li>C</li> <li>C#</li> <li>C++</li> <li>Java</li> <li>.Net</li> <li>JSP</li> <li>ASP</li> <li>PHP</li> <li>Python</li> <li>ios</li> <li>Android</li> <li>Javascript</li> <li>CSS</li> <li>HTML</li> <li>XML</li> <li>VUE</li> <li>Reaccionar</li> <li>Anguloso</li> <li>SQL</li> </ul> </div> </cuerpo> </html>
Luego cree una nueva página en blanco (main.html), incluido el botón que activa el evento Ajax y el ID "contenido"
utilizado para mostrar el contenido HTML adjunto (test.html). El código es el siguiente:<!DOCTYPE html> <html> <cabeza> <meta juego de caracteres="utf-8"> <script src="jquery/jquery-2.1.1.js"></script> <título>principal</título> </cabeza> <cuerpo> <!-- método load() --> <button id="btn1">Haga clic para cargar</button> <h1>Contenido cargado:</h1> <div id="content1"></div> </cuerpo> </html>
A continuación escribe el código jQuery. Después de cargar el DOM, llame al método de carga haciendo clic en el botón para cargar el contenido en test.html en el elemento con la identificación "contenido". El código es el siguiente:
<script type="text/javascript">
$(función(){
// cargar(url) método $("#btn1").click(función(){
$("#content1").load("test.html")//Carga el contenido de test.html en la página actual al hacer clic en })
})
</script> Antes de cargar los resultados en ejecución
:
Después de cargar:
2) Filtrar los documentos HTML cargados.
El ejemplo anterior es cargar todo el contenido en test.html en el elemento con el ID "contenido" en main.html. Si solo desea cargar cierto contenido, puede usar load(url). selector) para lograr.
Nota: hay un espacio entre la URL y el selector.
Por ejemplo, para cargar solo el contenido de la etiqueta p en test.html, el código es el siguiente:
<script type="text/javascript">
$(función(){
// cargar(url, selector) filtro $("#btn1").click(function(){
$("#content1").cargar("test.html p")
})
})
</script> Ejecutar resultados
3) Modo de transferencia
El modo de transferencia del método load() se especifica automáticamente en función de los datos de los parámetros. Si no se pasan parámetros, se utiliza el método GET; de lo contrario, se convierte automáticamente al método POST.
// método load(url,fn), sin transferencia de parámetros, método GET $("#btn1").click(function(){
$("#content1").load("test.html", función(){
// código
})
})
// método load(url,fn), hay parámetros para pasar, método POST $("#btn1").click(function(){
$("#content1").load("test.html", {nombre: "peiqi", edad: "18"}, función(){
// código
})
}) 4) Parámetros de devolución de llamada
Para las operaciones que deben continuar después de completar la carga, el método load () proporciona una función de devolución de llamada (devolución de llamada). Esta función tiene 3 parámetros, que representan "solicitud de contenido devuelto" y "estado de solicitud". object", el código es el siguiente:
$("#content1").load("test.html p", function(responseText, textStates, XMLHttpRequest) {
//responseText: Contenido devuelto por la solicitud //textStates: Estado de la solicitud: error de éxito, tiempo de espera no modificado 4 tipos //XMLHttpRequest: objeto XMLHttpRequest}); Nota: en el método load(), independientemente de si la solicitud Ajax es exitosa, como Siempre que la solicitud esté completa (completa), se activará la función de devolución de llamada (devolución de llamada).
load() generalmente obtienen archivos de datos estáticos del servidor web. Si necesita pasar algunos parámetros a la página en el servidor, puede usarlos.
(o método $.ajax()).
Aviso:
() son funciones globales en jQuery.
1) Método $.get()
El método $.get() utiliza el método GET para realizar solicitudes asincrónicas.
Estructura
$.get(url, [datos], [devolución de llamada], [tipo])
parámetros
La siguiente aplicación
es un fragmento de código HTML para una página de comentarios, que introduce el uso del método $.get(). El código es el siguiente:
<!-- métodos $.get() y $.post() --> <h3>Comentarios</h3> <p>Nombre:<tipo de entrada="texto" nombre="" id="nombre"></p> <p>Contenido:<textarea id="content2"></textarea></p> <button id="btn2">Dejar un mensaje</button> <div id="msg"></div>
La página generada por este código es como se muestra en la figura:
Después de completar su nombre y contenido, puede enviar su comentario.
a. Primero, debe determinar la dirección URL solicitada.
$("#btn2").hacer clic(función(){
$.get("test.php", parámetro de datos, función de devolución de llamada)
}) b. Antes de enviar, pase el nombre y los valores del contenido al fondo como datos de parámetros.
$("#btn2").hacer clic(función(){
$.get("test.php", {"username":$("#name").val(), "content":$("#content2").val()}, función de devolución de llamada)
}) c. Si el servidor recibe los datos pasados y regresa con éxito, los datos devueltos se pueden mostrar en la página a través de la función de devolución de llamada.
La función de devolución de llamada del método $.get() tiene solo dos parámetros
function(){
//datos: el contenido devuelto puede ser documentos XML, archivos json, fragmentos XHML, etc. //textStatus: estado de la solicitud: error de éxito, tiempo de espera no modificado 4 tipos} d. El parámetro representa el estado de la solicitud. Y la función de devolución de llamada solo se puede llamar cuando los datos son exitosos (se llama a load() independientemente del éxito o el fracaso).
// método $.get()$("#btn2").click(función(){
$.get("test.php", {"username":$("#name").val(),"content":$("#content2").val()}, function(data,textStatus) {
if(textStatus=="éxito"){ //éxito
// código
$(datos).appendTo("#msg")
}
},
"html")//tipo
}) e.
2) El método $.post()
tiene la misma estructura y uso que el método $.get(), pero aún existen las siguientes diferencias:
a. El método GET pasará los parámetros después de la URL y se explorarán los datos. El servidor lo almacena en caché, mientras que el método POST se envía al servidor como el contenido de la entidad del mensaje HTTP (es decir, envuelto en el cuerpo de la solicitud. Se puede ver que la seguridad del método POST es mayor que la del método POST). OBTENER método.
b. El método GET tiene un límite de tamaño para los datos transmitidos (generalmente no más de 2 KB), mientras que el método POST no tiene límite de tamaño en teoría.
c. Los datos transferidos por el método GET y el método POST se obtienen de manera diferente en el lado del servidor. En PHP, los datos en modo GET se pueden obtener con "_GET[]", mientras que los datos en modo POST se pueden obtener con " _POST[]". Ambos métodos se pueden obtener usando "$_REQUEST[]".
d. La velocidad de transmisión del método GET es mayor que la del método POST.
Dado que todos los datos enviados por los métodos POST y GET se pueden obtener a través de $_REQUEST [], siempre que se cambie la función jQuery, el programa se puede cambiar entre solicitudes GET y solicitudes POST. El código es el siguiente:
// $. método post() $("#btn2").click(function(){
$.post("test.php", {"username":$("#name").val(),"content":$("#content2").val()}, function(data,textStatus) {
if(textStatus=="éxito"){ //éxito
// código
$(datos).appendTo("#msg")
}
},
"html")//tipo
}) Además, cuando se pasa el método load() con parámetros, se utilizará el método POST para enviar la solicitud. Por lo tanto, también puede utilizar el método load() para completar la misma función. El código es el siguiente:
$("#btn2").click(function(){.
$("#msg").load("prueba.php", {
"nombre de usuario":$("#nombre").val(),
"contenido":$("#content2").val()
});
}) 4.
)
A veces, es completamente innecesario obtener todos los archivos JavaScript necesarios cuando se carga la página por primera vez. Aunque puedes crear dinámicamente
$(document.createElement("script")).attr("src", "test.js").appendTo("head");
//O $("<script type='text/javascript' src='test.js' />").appendTo("head"); Pero este método no es ideal. jQuery proporciona el método $.getScript() para cargar archivos js directamente, que es tan simple y conveniente como cargar un fragmento HTML y no requiere procesamiento de archivos JavaScript, ya que los archivos JavaScript se ejecutarán automáticamente.
Estructura
$.getScript(url, fn); //url: dirección de solicitud //fn:
aplicación de función de devolución de llamada <br/>Cree un archivo nowDate.js para obtener la fecha actual. El código es el siguiente:
function getNowDate(){.
var fecha = nueva fecha
fecha de regreso;
} Cuando se hace clic en el botón "Obtener hora actual", se muestran la última hora y fecha. El código es el siguiente:
//Código HTML <!-- $.getScript() método -->.
<button id="btn3">Haga clic para obtener la hora</button>
<div id="mensaje1"></div>
//código jQuery// $.getScript() método $("#btn3").click(function(){
$.getScript("nowDate.js", función(){
var date1 = getNowDate(); // Llame al método getNowDate() en nowDate.js para obtener la fecha var txtHtml= "<div>"+ date1 + "</div>";
$("#message1").html(txtHtml);
})
}) Antes de cargar
los resultados en ejecución
:
Después de cargar:
2) Método $.getJSON()
el método .getScript().
Estructura
$.getJSON(url,fn); //url: dirección de solicitud //fn:
la aplicación
de función de devolución de llamadacrea un nuevo archivo test.json, el código es el siguiente:
{
"helen":{
"sexo": "mujer",
"edad": 18,
"peso": "50 kg",
"altura": "165 cm"
},
"pedro":{
"sexo": "hombre",
"edad": 28,
"peso": "65 kg",
"altura": "185 cm"
}
} Cree un nuevo archivo HTML con el siguiente código:
<!-- método $.getJSON() --> <button id="btn4">Haga clic para cargar el archivo JSON</button> <div id="message2"></div>
Cuando hace clic en el botón cargar, no se puede ver ningún efecto en la página. Puede verlo en la consola. El código es el siguiente:
// método $.getJSON(). $("#btn4") .hacer clic(función(){
$.getJSON("prueba.json", función(datos){
console.log(data); //La consola genera los datos devueltos})
}) La salida de la consola es como se muestra en la figura:
Aunque la función anterior carga el archivo JSON (test.json), no le dice a JavaScript cómo procesar los datos devueltos, por lo que podemos procesar los datos devueltos en la función de devolución de llamada.
Por lo general, necesitamos iterar a través de los datos que obtenemos. Aunque aquí podemos usar el bucle for tradicional, también podemos pasar.
La función .each() toma una matriz u objeto como primer parámetro y una función de devolución de llamada como segundo parámetro. La función de devolución de llamada tiene dos parámetros, el primero. es el miembro del objeto o el subíndice del array, el segundo bit corresponde a la variable o contenido, el código es el siguiente:
// $.getJSON() método $("#btn4").click(function() {
$.getJSON("prueba.json", función(datos){
console.log(data); //La consola genera los datos devueltos //Procesa los datos devueltos var txtHtml = "";
$.cada uno(datos, función(índice, elemento){
txtHtml += "<div><h4>"
+ índice + ":</h4><ul><li>sexo:"
+ elemento["sexo"] + "</li><li>edad："
+ elemento["edad"] + "</li><li>peso:"
+ elemento["peso"] + "</li><li>altura:"
+ elemento["altura"] + "</li></div>";
})
$("#message2").html(txtHtml);
})
}) El efecto es como se muestra en la figura:
antes de cargar:
Después de cargar:
[Aprendizaje recomendado: video tutorial de jQuery, video de front-end web]
Lo anterior es para hablar sobre Ajax en jQuery y explicar los detalles de sus métodos principales. Para obtener más información, preste atención a otros artículos relacionados en el sitio web chino de PHP.
