Estoy aprendiendo ajax y antes de seguir avanzando quiero praticar por mi cuenta para probar si he entendido y me puse ha hacer un sistema seensillo pero práctico que confirma si el nombre de usuario esta disponible, el script php me devuelve un xml con el texto a mostrar el cualquiera de los dos casos pero el problema es que no puedo usar tíldes ni etiquetas ni nada que no sea texto plano y cómo quiero en lo posible hacer buen uso de la ortografía cuando haga sitios serior pues quiere coger el hábito desde ahora ademas que quiero que cuando esté usado el nombre usuario ponerle una etiqueta span o div con clase "rojo" y para cuando esté lbre clase "verde" pero si no me acepra las etiqueta ¿cómo puedo hacer?
les pondré los códigos
index.html
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" language="javascript" src="comprueba.js" ></script>
</head>
<body>
<div id="contenedor">
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="180"><form>
<input type="text" size="30" name="campotexto" id="username" onkeyup="comprueba()" />
</form>
</td>
<td width="320"><div id="respuesta"></div></td>
</tr>
</table>
</div>
</body>
</html>
comprueba.php
Código:
<?php
/**
* @author
* @copyright 2010
*/
$username = $_GET[username];
function db_connect() {
$link = mysql_connect("localhost", "root", "oooooo");
$conn = mysql_select_db("pruebas", $link);
}
db_connect();
$query = "SELECT username FROM usuarios WHERE username='$username'";
$resultado = mysql_query($query);
$num = mysql_num_rows($resultado);
// genera la salída XML
header('Content-Type: text/xml');
// genera el header XML
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';
// crea el elemento response
echo '<response>';
if($num > 0) {
echo "El nombre de usuario que ha elegido No esta disponible, por favor elija otro";
} else {
echo "El nombre de usuario esta dispponible para usted";
}
echo '</response>';
?>
comprueba.js
Código:
/**
* @author JORDAN
*/
function getXMLHTTPRequest() {
var req = false;
try {
req = new XMLHttpRequest();
} catch(err1) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(err2) {
try {
req = ActiveXObject("Microsoft.XMLHTTP");
} catch(err3) {
req = false;
}
}
}
return req;
}
var http = getXMLHTTPRequest();
function comprueba() {
if(http.readyState == 4 || http.readyState == 0) {
var username = encodeURIComponent(document.getElementById("username").value);
// creamos la url
var url = "comprueba.php?username=" + username;
// abrimos la url en el servidor
http.open("GET", url, true);
// define la funcion para manejar la respuesta del servidor
http.onreadystatechange = useHttpResponse;
// enviamos
http.send(null);
} else {
setTimeout("proceso()", 300);
}
}
// ejecutado automáticamente cuando obtiene respuesta del servidor
function useHttpResponse() {
if(http.readyState == 4) {
if(http.status == 200) {
// extraemos el XML recibido del servidor
xmlResponse = http.responseXML;
// obtenemos el document element (elemento raíz) de la estructura XML
xmlDocumentElement = xmlResponse.documentElement;
// obtenemos el mensaje de texto que está en el prime hijo del "document element";
msj = xmlDocumentElement.firstChild.data;
// actualizamos la pantalla del usuario con los datos devueltos del servidor
document.getElementById("respuesta").innerHTML = msj
} // un status distinto a 200 indica que es un error
else {
alert("ha ocurrido un error: " + http.statusText);
}
}
}