peticion ajax con jquery mobile

[cuasatar]

Hola a todos, espero me puedan colaborar con la siguiente duda. He estado trabajando con jquery mobile y en realidad es bastante sencillo, sin embargo a la hora de tratar de trabajar con ajax he tenido problemas. Como no se manejar el ajax con jquery lo implemente con ajax de javascript. La petición funcionaba perfectamente pero se perdia los estilos de los botones y eso, por tal motivo ademas de hacer la petición llevaba dinamicamente los estilos y el javascript para que los añadiera. Me funciona pero tiene un resultado nefasto porque por una razon que no entiendo el header de la pagina se añadia al final de la petición y cada vez que hago una peticion se superpone haciendo que se vuelva una locura la pagina. He leido la documentación de jquery mobile pero por falta de experiencia no encuentro la manera de hacerlo mas eficiente. Si alguien me explica como migrarlo a jquery mobile o sepa de algun tutorial que trabaje este tipo de peticiones se lo agradezco mucho. Igual si ven que tengo algun error que se haya escapado y me ayude a solucionarlo se lo agradezco mucho.

Aquí dejo el codigo para que se entienda mejor lo que explico. Gracias de antemano por su colaboración.

Código Javascript:

<!-crear elemento tipo script-->
function jsDinamic(direccion,tipo){
    var g=document.createElement("script");
    g.src=direccion;
    g.type=tipo;
    document.body.appendChild(g);
    }
<!-crear elemento tipo link-->
function cssDinamic(estilo,referencia){
    var g=document.createElement("link");
    g.rel=estilo;
    g.href=referencia;
    document.body.appendChild(g);   
    }   
 
<!--peticion por ajax de la pagina-->
function PaginaMobile(nropagina){
    var divPost,ajax;
    divPost = document.getElementById("post");
     ajax=objetoAjax();
     ajax.open("GET", "layouts/mi_pagina.php?pag="+nropagina,true);
     ajax.onreadystatechange=function() {
           if(ajax.readyState==1){
                        
                        divPost.innerHTML = '<img src="imagenes/ajax-loader.gif" border="0"/>Cargando, espere por favor...';
                        //modificamos el estilo de la div, mostrando una imagen de fondo
                        
                       }
                         if (ajax.readyState==4) {
   //mostrar resultados en esta capa
    jsDinamic("http://www.mipagina.com/js/jquery-1.7.1.min.js","text/javascript");
    jsDinamic("http://www.mipagina.com/js/jquery.mobile-1.2.0.min.js","text/javascript")
    cssDinamic("stylesheet","http://www.mipagina.com/css/jquery.mobile.structure-1.2.0.min.css")    
    divPost.innerHTML = ajax.responseText;
      }
    
}
     ajax.send();
     
}
 

[maycolalvarez]

no entiendo para que haces una petición AJAX normal sin usar el wrapper de jQuery $.ajax

además no has evaluado el ajax.status == 200, es una de las razones por el cual no funciona, y reitero ¿para que reinventar la rueda si puedes usar la API de jQuery?

por otro lado jQUeryMobile tiene sus propias funciones para cargar páginas, él lo hace casi todo por ajax

[cuasatar]

Hola, gracias por el tiempo en responder. Bueno explico a grosso modo las inquietudes que has dejado.

no entiendo para que haces una petición AJAX normal sin usar el wrapper de jQuery $.ajax

Como no se manejar el ajax con jquery lo implemente con ajax de javascript.

Precisamente si pido colaboración es porque se que lo óptimo es usar $.ajax pero primero me base en algo que ya sabia hacer.

además no has evaluado el ajax.status == 200, es una de las razones por el cual no funciona, y reitero ¿para que reinventar la rueda si puedes usar la API de jQuery?

Voy a añadiserlo aunque quiero hacer la aclaración que la paginacion si esta funcionando pero tal como lo comente al añadir esto:

jsDinamic("http://www.mipagina.com/js/jquery.mobile-1.2.0.min.js","text/javascript")

me añade de manera muy rara el header de la pagina y lo superpone (visualmente se van apilando los datos del pie siendo que nunca lo manipulo, es super extraño)

por otro lado jQUeryMobile tiene sus propias funciones para cargar páginas, él lo hace casi todo por ajax

Exacto, pero en mi caso en especifico es recargar solo un pequeño fragmento de la pagina para paginar los ultimos post y que el usuario se desplace de a 5 en cinco. Me has dado una idea que la probare. Ya comentare los resultados y gracias por la colaboración.

[maycolalvarez]

lo del ajax.status == 200 es el caso más común de todos los errores en AJAX, recuerda que el onreadystatechange es ejecutado en varias oportunidades durante la petición, y el momento justo cuando se retorna la respuesta es cuando ocurren (ajax.readyState == 4) && (ajax.status == 200) juntos