Este es una introduccion a AJAX donde utilizando AJAX y PHP haremos una mini busqueda en una pagina cualquiera sin que esta tenga que hacer reload (refresh o como kieras) y te tire la informacion que deseas en una <div>. Super facil y solo es el inico de lo que podemos hacer con AJAX.
Este es una introduccion a AJAX donde utilizando AJAX y PHP haremos una mini busqueda en una pagina cualquiera sin que esta tenga que hacer reload (refresh o como kieras) y te tire la informacion que deseas en una <div>. Super facil y solo es el inico de lo que podemos hacer con AJAX.
Para los que no saben que es AJAX, solo vayan a la sección y lean la introducción.
Intro
Lo primero que necesitamos es nuestro XmlHttpdRequest; el proposito de este objeto es enviar pedidos (request) al servidor y recibir esos pedidos todo atravez de
Javascript. Esto se puede llamar una comunicacion asincronica, donde el web browser siempre sigue asiendo cosas no importa en que estes en la pagina, siempre esta enviando o recibiendo información.
El xhmlHttpdRequest utilizado en este tutorial de
http://labreuer...tprequest.aspx, simplemente lo traduje a español.
Por ultimo, no es necesario tener todo el codigo
Javascript en la pagina, simplemente lo pueden poner en un archivo
.js e incluirlo en el html. También fijense que la página que utilizan para la busqueda es un
.html
El JavaScript - XmlHttpdRequest
Codigo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
<?php
//no es php pero es para que se vea mas bonito
<script language="javascript" type="text/javascript">
//url es el archivo que voy a llamar para correr el script (en pocas palabras contiene mi script php, baka)
var url = "google.php?google=";
//declaro mi objeto httpdRequest
var http = getXmlHttpObject();
/*
Este es nuestro manejador de eventos, lo que hace despues de resivir la info en el metodo sendQueryString
Estado del Objeto:
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
*/
function handleHttpResponse()
{
if (http.readyState == 4)
{
results = http.responseText;
//innerHTML es para llenar el div resultado con info, recuerden javascript es casesensitive (una variable a != A)
document.getElementById('resultado').innerHTML = results;
}
}
/*
aki es donde mandas el resquest del server de la pagina
Normalmenteo uno querie que el servidor procese la pagina enviada por XmlHttpRquest con objetos diferentes a lo normales.
Esto se hace reconociendo POST Y GET
Este script es asincronico -- sigue corriendo despues de aver enviado un request
lo de send(null) es lo normal todavia no se mas que esto asi que vamos por paso ^_^
*/
function sendQuerystring()
{
//cojo el elemento search del textbox
searchV = document.getElementById("search").value;
//abre la pagina
http.open("GET", url + escape(searchV), true);
//mando la informacion obtenido a la funcion handelHttpResponse
http.onreadystatechange = handleHttpResponse;
//send nada
http.send(null);
}
/*
esta es la funcion principal, no topar solo copy y past y listo ^_^
*/
function getXmlHttpObject()
{
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
{
try
{
xmlhttp = new XMLHttpRequest();
}
catch (e)
{
xmlhttp = false;
}
}
return xmlhttp;
}
</script>
?>
|
El codigo PHP
Codigo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<?php
//google.php
//una estupida clase de google para hacer la busqueda
class google
{
//para lo que no tienen php5, simplemente quiten el public static y listo
public static function searchG($data)
{
$data = urlencode(trim($data));
$query = file('http://www.google.com/search?q='.$data);
// el file devuelve un arreglo y pues en la posicion #38 es k comienza a ensenar el resultado
return $query[38];
}
}
//si existe el request de google pagina?google=mctekk entonces enseñame el resultado
if(isset($_GET['google']))
{
//busco la funcion estatica searchG en la clase google
$google = google::searchG($_GET['google']);
//si me devuele algo entonces imprimelo
if((string) $google !== null)
{
//imprime el arreglo
print_r($google);
}
else
{
//no encontro shit asi que k se va hacer
echo '<h4>No se han encontrado resultados.</h4><p>Intentelo de nuevo.</p>';
}
}
?>
|
El Html
Codigo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<?php
/*
igual no es php pero para k se ve bonito
En el input si se fijan no tengo ningun submit ni nada, sino k llamo la funcion de javascrip con el onblur y esto es lo que me hace el proceso
luego se fijan que el div tiene un id y este es el que uso para llenar mi resultado de busqueda con el string que me devuelve mi php, ^_^ facil no?
*/
<body>
<h1>Search Google Ajax Beta 1</h1>
<form action="post">
<p>
Search en Google:
<input type="text" size="10" name="search" id="search" onblur="sendQuerystring();" />
</p>
</form>
<div id="resultado">
Null
</div>
</body>
?>
|
Todo Junto -- Estructura final
Bueno ya viste todo por parte, ahora el pedazo final.
Codigo:
1
2
3
4
5
6
7
8
9
10
11
|
<?php
//igual no es php para k se vea bien
<html>
<head>
//Aki pones el codigo del JAVASCRIPT
</head>
<body>
//codigo del HTML
</body>
</html>
?>
|
El archivo PHP, lo grabas en uno que se llame
google.php y listo lo pones en tu servidor y haces una prueba y veras que te despliega el resultado de tu busqueda en la misma pagina luego de haberlo escrito en el textbox.