jQuery load(): cargar un html externo en un div sin recargar la pagina

En muchas ocasiones deseamos recargar parte de una pagina sin recargar todo el contenido para ello podemos hacer uso de Jquery.

Con jQuery load() podemos cargar en un determinado div un archivo externo (php, html, asp…) en el momento que necesitemos o bajo petición del usuario mediante formularios, botones, enlaces…

<html>
    <head>
        <title>jQuery Load</title>
        <!-- Libreria jQuery -->
        <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

        <!-- Acción sobre el botó con id=boton y actualizamos el div con id=capa -->
        <script type="text/javascript">
            $(document).ready(function() {
                $("#boton").click(function(event) {
                    $("#capa").load('paginaacargar.php #contenido');
                });
            });
        </script>
    </head>
    <body>
    <div id="capa">Pulsa 'Actualizar capa' y este texto se actualizará</div>
    <br>
       <input name="boton" id="boton" type="button" value="Actualizar capa" />
    </body>
</html>

Primera demo de ejemplo del script.

Línea 5: referenciamos la libreria jQuery.
Script línea 8: Tal y como comento en el código, cuando se clicke el botón con id=boton cargaremos el archivo ‘/demos/03-jquery-load01.php’ en el div con id=capa.
Línea 17: Div que actualizaremos con el nuevo contenido, cuyo id=capa.
Línea 19: Botón con id=boton que será el ejecutor del script.
El archivo externo ‘paginaacargar.php’ contiene el texto ‘TEXTO ACTUALIZADO!!!!’.

Php

Psoluciones