Changing Part Of The Html Page Without Refreshing Whole Page

I have a html page and a java application with Thymeleaf templating engine and I'm looking for a tutorial to make a request to the server and render only part of the page based on

Solution 1:

this is the javascript code

//get text 1 by ajax
    function getText1(urlstarted) {
        xmlHttp = false;
        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            xmlHttp = new XMLHttpRequest();
            if (xmlHttp.overrideMimeType) {
                // set type accordingly to anticipated content type
                //http_request.overrideMimeType('text/xml');
                xmlHttp.overrideMimeType('text/html');
            }
        } else if (window.ActiveXObject) { // IE
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
        if (!xmlHttp) {
            alert('Cannot create XMLHTTP instance');
            return false;
        }

        var url=urlstarted+"/jsp/viewText1.jsp"; //put the link to ur Ajax page here
         xmlHttp.onreadystatechange = startAjaxingText;
        xmlHttp.open("GET", url, true);
        xmlHttp.send(null);
    }
    function startAjaxingText() {
        if (xmlHttp.readyState != 4) {

            document.getElementById('image').style.display='block' ;
            document.getElementById('result').style.display='none' ;
        }

        if (xmlHttp.readyState == 4) {

            if (xmlHttp.status == 200) {




                    document.getElementById('image').style.display='none' ;
                    document.getElementById('result').style.display='block';
                    document.getElementById('result').innerHTML = xmlHttp.responseText;


            } else {
                alert("There was a problem with the request.");
            }
        }

    }
//get text 2 by ajax
    function getText2(urlstarted) {
        xmlHttp = false;
        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            xmlHttp = new XMLHttpRequest();
            if (xmlHttp.overrideMimeType) {
                // set type accordingly to anticipated content type
                //http_request.overrideMimeType('text/xml');
                xmlHttp.overrideMimeType('text/html');
            }
        } else if (window.ActiveXObject) { // IE
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
        if (!xmlHttp) {
            alert('Cannot create XMLHTTP instance');
            return false;
        }

        var url=urlstarted+"/jsp/viewText2.jsp"; //put the link to ur Ajax page here
         xmlHttp.onreadystatechange = startAjaxingText2;
        xmlHttp.open("GET", url, true);
        xmlHttp.send(null);
    }
    function startAjaxingText2() {
        if (xmlHttp.readyState != 4) {

            document.getElementById('image').style.display='block' ;
            document.getElementById('result').style.display='none' ;
        }

        if (xmlHttp.readyState == 4) {

            if (xmlHttp.status == 200) {




                    document.getElementById('image').style.display='none' ;
                    document.getElementById('result').style.display='block';
                    document.getElementById('result').innerHTML = xmlHttp.responseText;


            } else {
                alert("There was a problem with the request.");
            }
        }

    }

---

now your buttons will look like this

    <input name="button_1" id="button_1" type="button" value="button_1" onclick="getText1('<%=request.getContextPath()%>');" />
     <input name="button_2" id="button_2" type="button" value="button_2" 
onclick="getText2('<%=request.getContextPath()%>');" />

your div will look like

<div id="image" style="display:none"><img src="<%= request.getContextPath()%>/images/ajax-loader.gif" alt="Loading...."/> </div>
                <div id="result" style="display:none"></div></td>

your viewText1.jsp page that doing ajax part

out.println("text1");//or any logic u want 

your viewText2.jsp page that doing ajax part

 out.println("text2");//or any logic u want 

note that : the result of viewText1.jsp or viewText2.jsp must be a text either a table or paragraphs

Solution 2:

Client-side implementation

You will have to use AJAX to load content from the server dynamically.

1. Consider designing your frontend as SPA. Look into AngularJS or Knockout.

2. Also, you can use old-school approach by using something like jQuery AJAX if this is just a small area of your application.

Separation of concerns

I strongly suggest to consider the idea to separate concerns by using server as a REST service and frontend as a client. This is the best practice for large applications if you want to keep them maintainable and scalable.

You should look for tutorials of how to implement REST with your server-side technology. It's very common practice so I think you should be able to find one.

If you have any questions I will be glad to update this answer.