Cómo realizar una validación de un campo asíncrona con Ajax y php

En esta entrada vamos a poner el código para poder realizar una validación de campo asíncrona con Ajax y php.
Estos son los ficheros que utilizaremos, puedes renombrarlos a tu gusto, pero no se te olvide cambiarlos también en las llamadas.

index.html
scripts.js
comprobarCampo.php

index.html

<div><input id="campo" type="text" value=""> <label id="mensaje"></label></div>

scripts.js

var READY_STATE_UNINITIALIZED=0;
var READY_STATE_LOADING=1;
var READY_STATE_LOADED=2;
var READY_STATE_INTERACTIVE=3;
var READY_STATE_COMPLETE=4;
 
var peticion_http;
 
function enviaPeticion(url, metodo, funcion) {
 peticion_http = inicializa_xhr();
 var parms = "campo=" + encodeURIComponent(document.getElementById("campo").value);
 if(peticion_http) {
 peticion_http.onreadystatechange = funcion;
 peticion_http.open(metodo, url, true);
 peticion_http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 peticion_http.send(parms);
 }
}
 
function inicializa_xhr() {
 if(window.XMLHttpRequest) {
 return new XMLHttpRequest();
 }
 else if(window.ActiveXObject) {
 return new ActiveXObject("Microsoft.XMLHTTP");
 }

 	}
 	 	
function muestraResultado() {
 if(peticion_http.readyState == READY_STATE_COMPLETE) {
 if(peticion_http.status == 200) {
 if(peticion_http.responseText == '1')
 {
 document.getElementById("mensaje").innerHTML='Existe';
 }
 else
 {
 document.getElementById("mensaje").innerHTML='No existe';
 }
 }
 }
}
 
function compruebaCampo() {
 enviaPeticion("comprobarCampo.php", "POST", muestraResultado);
}

comprobarCampo.php

La validación es simbólica. En este código es donde conectaremos con una base de datos para validar nuestro valor. Si quieres saber como conectar con una base de datos con php puedes ver Conectar a una base de datos MySql desde php. También se pueden comparar las cadenas de formas diferentes, por ejemplo con strcmp Basics:Comparar cadenas de texto en php con strcmp().

if ($_POST['campo']=="WikiCode") {
 echo '1';
 }
 else
 {
 echo '0';
 }

Y listo, fácil no?