Performing an XMLHttpRequest in the same JSP file using Javascript

Question

Performing an XMLHttpRequest in the same JSP file using Javascript

I am working on a JSP file that contains three dropdown boxes labeled "countries", "regions", and "cities". My goal is to populate the regions based on the selected country, and the cities based on the selected region. I have managed to achieve this using Java and Javascript parameters on the same page, however, every click on the dropdown lists results in the page refreshing, which I want to avoid.

The data for "countries", "regions", and "cities" is retrieved from JSON data within the Java code "<%...%>" on the same page.

I attempted to utilize AJAX for this process but was unable to find a functional example for passing parameters. If necessary, I am willing to split the page into smaller JSP files such as "countries.jsp", "regions.jsp", and "cities.jsp", but I need assistance with passing parameters between them. I am seeking guidance and practical examples of implementing JSP Ajax with parameters, without relying on jQuery. My aim is to accomplish this using pure JS.

I welcome your suggestions and any examples you may have for implementing JSP Ajax with parameters.

java javascript ajax json jsp

Answer 1

Answer №1

To start off, consider dividing the content into regions.jsp and cities.jsp (assuming countries remain consistent). Then, establish a function that captures the selected values from countries using the OnChange event and transfers them to your regions.jsp. Here's an example:

<select name-"countries" id-"countries" OnChange="getRegions();"><option> ...</option></selct>

Subsequently, incorporate JavaScript to facilitate the Ajax call, without the need for jQuery.

            var requestObj = false;

            if (window.XMLHttpRequest) {
                requestObj = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                requestObj = new ActiveXObject("Microsoft.XMLHTTP");
            }

            function getRegions()
            {
                var select = document.getElementById('countries');
                var currentCountry = select.options[select.selectedIndex]; 
                if (requestObj) {
                    requestObj.open("GET", "/ajax/regions.jsp?country=" + currentCountry);
                    requestObj.onreadystatechange = function ()
                    {
                        if (requestObj.readyState == 4 && requestObj.status == 200) {
                               var options = parseJSON(requestObj.responseText);
                             for( var i=0; i<options.length; i++) { 
                                  document.getElementById("regions").appendChild("<option value='" + options['id'] + "'>" + options['text'] + "</option>");
                             }
                        }
                    }
                    requestObj.send(null);
                }
            }

Quite nostalgic working without jQuery, right? Does this explanation clarify things?

Answer 2

To start off, consider dividing the content into regions.jsp and cities.jsp (assuming countries remain consistent). Then, establish a function that captures the selected values from countries using the OnChange event and transfers them to your regions.jsp. Here's an example:

<select name-"countries" id-"countries" OnChange="getRegions();"><option> ...</option></selct>

Subsequently, incorporate JavaScript to facilitate the Ajax call, without the need for jQuery.

            var requestObj = false;

            if (window.XMLHttpRequest) {
                requestObj = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                requestObj = new ActiveXObject("Microsoft.XMLHTTP");
            }

            function getRegions()
            {
                var select = document.getElementById('countries');
                var currentCountry = select.options[select.selectedIndex]; 
                if (requestObj) {
                    requestObj.open("GET", "/ajax/regions.jsp?country=" + currentCountry);
                    requestObj.onreadystatechange = function ()
                    {
                        if (requestObj.readyState == 4 && requestObj.status == 200) {
                               var options = parseJSON(requestObj.responseText);
                             for( var i=0; i<options.length; i++) { 
                                  document.getElementById("regions").appendChild("<option value='" + options['id'] + "'>" + options['text'] + "</option>");
                             }
                        }
                    }
                    requestObj.send(null);
                }
            }

Quite nostalgic working without jQuery, right? Does this explanation clarify things?

Performing an XMLHttpRequest in the same JSP file using Javascript

Answer №1

Similar questions

Issues with React Native imports not functioning properly following recent upgrade

Utilizing Jackson to deserialize a serialized final class

What is the best way to differentiate and analyze new AJAX output from previous data using div elements?

Transferring information from Python to JavaScript and receiving a response

Nuxt - Dynamically manage routes while utilizing server-side rendering functionality

Trouble with jQuery: Tackling a Basic String and Variable Issue

apply a course to the designated element

Leveraging the import statement within lib.d.ts to enhance Intellisense functionality in Visual Studio Code

The data from the Ajax request failed to display in the table

Using VueJS to perform a filtering operation on the JSON data when a button is clicked

Tips for formatting result data when using FullCalendar's eventSources URL

Using PHP's mysqli function to generate a JSON array

troubleshooting problems with jquery ajax and setInterval

What strategies can be employed to reduce the need for numerous if-else statements in my JavaScript code?

What are the steps for incorporating React into an existing website?

Utilizing Ajax to fetch a div element from a web page

Payload bytes do not match the expected byte values

Using Slick.JS to Sync Navigation with Main Slider, Automatically Resetting to First Slide

Kendo's data-bind onclick feature functions properly on web browsers but fails to work on mobile devices

Tips for keeping the options menu visible even when the video is paused