如何通过Ajax加载HTML模块？

Question

Depending upon a path that a user enters my site through I want to load the correct module?

Is this as simple as storing the HTML in a file called some_file.htm then ajaxing that file to the client than appending it to the DOM?

I'm wondering if it is that easy or if there are some caveats I'm not aware of?

Thanks!

Answer 1

Simple example:

JavaScript:

<script defer="true">
    (function(){

        var xhr = new XMLHttpRequest();

        xhr.addEventListener("load", function(resp){
            document.querySelector('div.container').innerHTML = resp.target.responseText;
        }, false);

        xhr.open("get", "some_file.htm", true);
        xhr.send();
    }());
</script>

HTML:

<div class="container"></div>

Documentation:

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest