A comprehensive guide on making an AJAX call to a self-hosted servlet

I created a servlet in Eclipse IDE for Java EE that posts data as an XML page and hosted it on a Tomcat server. The servlet can be accessed at http://localhost:8080/Checkers/CheckersServlet. When I open this URL in Firefox, the XML loads correctly. Now, I'm trying to call the servlet from an AJAX code, but I seem to be encountering some issues.

It seems like the code snippet below should work, however, it's not functioning as expected. In my case, the problem lies in not receiving any XML from the servlet (where displayResult(req) is a custom function that processes the received XML).

Do I need to create one of those web.xml files? Or does Eclipse handle that automatically when I use the "new Servlet" option?

var req = new XMLHttpRequest();
    req.onreadystatechange = function()
    {   
        if(req.readyState == 4)
        {
            displayResult(req);

        }
    }
    var url = "http://localhost:8080/Checkers/CheckersServlet"; 
    req.open("GET",url,true);
    req.send(null);

Answer №1

If your servlet can be accessed through a web browser or using 'curl', then the issue likely lies on the client side.

Where is the JavaScript hosted? What is the URL of the page running this JavaScript code? If it's not 'localhost:8080', you may be encountering challenges with the . To confirm, try adding the code snippet mentioned in this Stack Overflow post about disabling SOP (Same Origin Policy) - it should work after allowing the change in Firefox.

The simplest and correct solution is to store your 'js' file within Eclipse and deploy it to Tomcat so that it can be accessed at

localhost:8080/Checkers/some-file.js
(within the same domain).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Learn the process of using Angular Js to compare checkbox values with stored comma-separated values in a database

When displaying amenity checkbox options using ng-repeat of a JSON array and saving them into the database as comma-separated IDs like "1,3,7" within a single string, the challenge arises when needing to edit the amenities. This is due to retrieving the ex ...

Guide to Establishing a Connection to WCF Service using Ionic Project and AngularJS

Greetings, I am currently experiencing an issue tasked with connecting my Ionic project to a WCF service located on another PC (running a C# Application) within the local network. I have verified that the network connection between the PCs is functioning p ...

Sending data from events to a textbox and a div

I've set an onClick event for a textbox. Is there a way to have the click event of a different div also execute when clicking on the textbox, even though they are not nested and in separate parts of the document? Any help with this in Javascript would ...

Refresh the angular form after submitting data

I am currently working on an angular form to input data into a database. My framework of choice is angular-fullstack by yeoman. After successfully submitting the data, I encounter an issue where clearing the form values doesn't allow me to add new en ...

What is the hierarchy for displaying elements depending on the props?

I have developed a search input component that includes an icon which I want to reposition (either on the left or right side) depending on different scenarios. This input is part of a bootstrap input-group, so modifying the order of elements within my di ...

Auto-complete feature not populating the input field in Google Chrome

Within my register form, I have various INPUT tags present. One of these INPUTs has the name email. <input type=text name=email id=email> When filling out this form in Chrome, I encounter a peculiar behavior. Upon clicking on the email input field ...

Error: Unable to split function. Attempting to retrieve API response via GET request using ngResource

I am trying to retrieve some data from an API using ngResource by utilizing the get method. Even though I have set up a factory for my resource, when implementing it in my controller, I encounter an error stating URL.split is not a function. I'm stru ...

Issue with VueJS where the datalist input does not reset the value

I am currently working on a Vue component that scans QR codes and adds information to a database upon successful scanning. The scanning process works perfectly fine. However, after successfully sending the data, I need to clear the input field in my datali ...

Combining two arrays in JavaScript and saving the result as an XLS file

I have a question that I couldn't find an answer to. I need to merge two arrays and export them to an Excel file using only JavaScript/jQuery. Let's say we have two arrays: Array 1 : ["Item 1", "Item 2"] Array 2 : ["Item 3", "Item 4"] When the ...

Can you explain the significance behind the error message "RangeError: Invalid status code: 0"?

Currently, I'm trying to understand the workings of express and have come up with this get method: app.get('/myendpoint', function(req, res) { var js = JSON.parse ({code: 'success', message:'Valid'}); res.status( ...

Guide on utilizing TypeScript interfaces or types in JavaScript functions with vscode and jsdocs

Is there a way to utilize types or interfaces to provide intellisense for entire functions or object literals, rather than just function parameters or inline @type's? For example: type TFunc = ( x: number ) => boolean; /** * @implements {TFunc} ...

What causes the event parameter to be lost during recursion?

Below is the given code snippet: <html> <head> <meta charset="UTF-8"> <title>title...</title> <link type="text/css" rel="stylesheet" href="jquery-ui-1.10.4.custom.css" /> <script type="text/javascript" src="jq ...

Attempting to retrieve an image from the database using ajax within a PHP script

I'm facing an issue with my code where I am attempting to retrieve an image from a database using AJAX, but it's not working as expected. Can someone please help me out? Image uploading works fine when trying to fetch the image using an anchor ta ...

Guide to downloading a CSV file directly from a webpage built with vue.js

Delving into the world of vue.js, I find myself pondering over how to incorporate a download link in my webpage for a CSV file stored locally. In my component Template.vue, I have the following structure: <a :href="item.loc" download> {{item.title ...

Utilizing Jquery queue for running a series of Ajax requests; imperative to clear the queue in case of a failed request

I am currently working on creating a queue of ajax calls that need to be executed in order. The process seems to be functioning properly, but I am encountering an issue when there is an error in one of the calls. My goal is to stop the queue after an error ...

javascript display hide choose among

I am attempting to display another set of options when the user selects a specific item. For example, if the user selects "Products," then a new selection box should appear with different product types. See my code below: <html> <head> <m ...

Direct your attention solely on the input fields and buttons

Is it possible to restrict focus to specific elements, such as input fields and buttons? For example, if a user is focused on an input field and then clicks somewhere else on the page, the input field should retain focus. But if the user clicks on another ...

Could anyone clarify the reason behind the success of one function while the failure of the other?

Currently delving into the world of React, I decided to follow along with the Road To React book. In this guide, the author presented this code const List = (props) => ( props.list.map(item => ( <div key={item.objectID}> & ...

JavaScript code that triggers a function when the mouse is moved over a description box on a

As a beginner in the field of Computer Science, I recently embarked on a project to create a website for sharing science articles with students. The goal is to spark curiosity and interest in science through this platform. One key feature I wanted to inclu ...

storing information in localStorage using react-big-calendar

Incorporating react-big-calendar into my project, I encountered a problem where the events in the calendar would disappear upon page refresh despite saving them in localStorage. I had planned to store the events using localStorage and retrieve them later, ...