AJAX significa JavaScript asíncrono y XML (Asynchronous JavaScript and XML). Es un grupo de tecnologías que se utilizan para el desarrollo de páginas, esta tecnica permite que las aplicaciones web funcionen de forma asincrona, procesando cualquier solicitud al servidor en segundo plano.
AJAX permite que la capa de presentación y la capa de datos trabajen de manera simultanea sin que interfiera una capa con la otra, algunos ejemplos son:
En este post veremos un ejemplo de como usar AJAX, si quieren saber mas información sobre ¿qué es y para que sirve ajax? pueden seguir el siguiente enlace. ¿Qué es AJAX?
<button id = "boton">Cargar Sitio</button>
<div id = "response"></div><div class="container">
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>JQuery</li>
</ol>
</div><script>
function ajax(){
const http = new XMLHttpRequest();
const url = 'example.html';
http.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200)
{
console.log(this.responseText);
document.getElementById("response").innerHTML = this.responseText;
}
}
http.open("GET", url);
http.send();
}
document.getElementById("boton").addEventListener("click", function(){
ajax();
});
</script> 
El método de JQuery load() es un método bastante sencillo pero útil. El método jQuery load() carga los datos de un servidor y lugo devuelve los datos dentro del elemento seleccionado en el árbol DOM.
$(selector).load(URL, data, callback)
El URL se refiere al URL del contenido que se desea cargar.
El parámetro de datos opcional especifica un conjunto de de pares clave/valor de cadena de consulta para enviar junto con la solicitud.
El callback representa el nombre de la función que se ejecutará despues del load()
<div id ="div1">
<h2>Titulo del texto</h2>
</div>
<buttonid="boton">Click para cambiar el contenido</button>
<script>
$(document).ready(function(){
$("#boton").click(function(){
$("#div1").load("text.txt");
});
});
</script>
<h1>Esto es el contenido de text.txt</h1>
<p>Usamos el método load para cargar este archivo sin recargar la página</p>
Los métodos jQuery get() y post() se utilizan para solicitar datos al servidor.
get() - Pide a los datos de un recurso especificado
GET se utiliza básicamente para conseguir justo (recuparar) algunos datos del servidor
$.get(URL,callback);
El URL se refiere al URL del contenido que se desea solicitar.
El párametrocallback es el nombre de una función que se ejecuta si la solicitud se realizó correctamente.
<button>Envia una consulta</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("datos.asp", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
Texto proveniente de un archivo asp externo