Buenas, he tratado de implementar un script que encontre en internet sobre como hacer esto.
El script es el siguiente: function Carga(url,id)
{
//Creamos un objeto dependiendo del navegador
var objeto;
if (window.XMLHttpRequest)
{
//Mozilla, Safari, etc
objeto = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
//Nuestro querido IE
try {
objeto = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try { //Version mas antigua
objeto = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!objeto)
{
alert("No ha sido posible crear un objeto de XMLHttpRequest");
}
//Cuando XMLHttpRequest cambie de estado, ejecutamos esta funcion
objeto.onreadystatechange=function()
{
cargarobjeto(objeto,id)
}
objeto.open('GET', url, true) // indicamos con el método open la url a cargar de manera asíncrona
objeto.send(null) // Enviamos los datos con el metodo send
}
function cargarobjeto(objeto, id)
{
if (objeto.readyState == 4) //si se ha cargado completamente
document.getElementById(id).innerHTML=objeto.responseText
else //en caso contrario, mostramos un gif simulando una precarga
document.getElementById(id).innerHTML='<img src="images/extras/loading.gif" alt="Loading" />'
}
La idea es que cambie el contenido del div en cuanto se presione un boton...
Creo que el problema esta en mi codigo HTML.
<li>
<a href="javascript:Carga(texto11.html, cont);">
<img src="css/img/btn.png" />
</a>
</li>
El texto del index es predeterminado, y creo que alli esta el problema?
<div id="cont">
<br>
<h2>Welcome</h2>
<p>TEXTO</p>
</div>
Si pudieran ayudarme, seria genial. NOTA: Tengo servidor instalado, el xampp y ademas, subi la pagina web a un servidor privado y aun no funciona, tambien importe el archivo .js donde se encuentra el script de arriba.
Hola, deberias intentar usar un plugin de firefox llamado Firebug, ahi te vas a dar cuenta de los errores que surgen al ver la página y ejecutar los scripts, por ejemplo, cuando das clic a un enlace.
Por otro lado, puedes usar jQuery para hacer lo mismo mira el método LOAD:
http://api.jquery.com/load/
Ve este ejemplo, es lo que quieres hacer:
http://www.webintenta.com/Files/Images/v10/jQueryAjax/Ejemplo1.html
Fuente: http://www.webintenta.com/Ajax-con-jQuery-el-metodo-load.html
<li>
<a href="javascript:Carga('texto11.html', 'cont');">
<img src="css/img/btn.png" />
</a>
</li>
Usa las comillas simples o dobles cuando pases cadenas como parámetro en javascript, sino tomará los textos como variables y por eso así nunca funcionará.
Y de igual forma como lo dijo @, se puede hacer mucho más fácil con JQuery. Por ejemplo,
<b>URL:</b> <input type = "text" id = "txtURL" value = "" /><br/>
<b>DIV:</b> <input type = "text" id = "txtDIV" value = "divRequest" /><br/>
<input type = "button" id = "btnSend" value = "Send request" />
<br/><br/><br/>
<b>Successful Response (should be blank):</b>
<div id = "divRequest"></div>
<b>Error Response:</b>
<div id = "errorRequest"></div>
$(document).ready( function(){
var objButton = $("#btnSend");
objButton.click( requestPOST );
});
function requestPOST(){
var objURL = $("#txtURL").val();
var objDIV = $("#txtDIV").val();
$("#" + objDIV).load( objURL, function( sResponse, sStatus, xhr) {
if( sStatus == "error" ){
var sMSG = "<b>Sorry but there was an error: </b>";
$("#errorRequest").html( sMSG + xhr.status + " " + xhr.statusText );
}
});
}
Yo creo que con jQuery es más sencillo hacerlo así:
<li>
<a href="javascript:$('#cont').load('texto11.html');">
<img src="css/img/btn.png" />
</a>
</li>
Muchisimas Gracias Muchach@s, probaré lo que me dicen. :rolleyes:
Bueno, gracias a uds, he podido arreglar el problema con ajax, la cosa es que he notado que no se actualiza el URL. Hay alguna manera de hacer eso? El metodo con jQuery lo hace? :huh: