How to Use XMLHttpRequest to Fetch OpenMRS Data in JavaScript (2026)

In this tutorial, you'll learn how to use the XMLHttpRequest object in JavaScript to fetch data from the OpenMRS REST API. Understanding how to make AJAX requests is crucial for building dynamic web applications that interact with server-side data in real-time. By the end of this tutorial, you'll be able to effectively make GET requests and handle responses correctly.

Key Takeaways

• Understand how to set up and use XMLHttpRequest in JavaScript.
• Learn to authenticate and fetch data from the OpenMRS REST API.
• Handle asynchronous data fetching and manage response data.
• Debug common issues when working with XMLHttpRequest.

Prerequisites

• Basic knowledge of JavaScript and HTML.
• Familiarity with REST APIs and HTTP methods.
• OpenMRS server setup for testing API requests.

Step 1: Understand XMLHttpRequest Basics

XMLHttpRequest is a built-in JavaScript object that allows you to make HTTP requests. It's an essential feature for web development, enabling asynchronous communication with a server. This means you can fetch data without reloading the page.

Step 2: Set Up Your XMLHttpRequest

First, create a new XMLHttpRequest object and open a connection to your desired API endpoint. Here, we'll use the OpenMRS API as an example:

function fetchData() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "http://localhost:8081/openmrs-standalone/ws/rest/v1/person?q=John Smith", true);
  xhr.setRequestHeader("Authorization", "Basic " + btoa("admin:Admin123"));
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };
  xhr.send();
}

Here, we use the open method to specify the request type (GET), the URL, and whether the request should be asynchronous. The setRequestHeader method sets the necessary headers for authentication.

Step 3: Handle the Response

The response from the server can be handled by checking the readyState and status properties. Once the request is complete and successful, you can access the response data via xhr.responseText or xhr.responseXML, depending on the format.

Step 4: Debugging Common Issues

Sometimes, you might encounter errors such as CORS issues or incorrect status codes. Ensure your server allows requests from your client domain and that your credentials are correctly formatted. Use browser developer tools to inspect network requests and responses for debugging.

Common Errors/Troubleshooting

• CORS Issues: Ensure your server has the correct Access-Control-Allow-Origin headers.
• Authentication Errors: Double-check your credentials and authorization headers.
• Network Errors: Use developer tools to inspect failing requests and ensure your server is running.

Frequently Asked Questions

What is XMLHttpRequest?

XMLHttpRequest is a JavaScript object that allows you to make HTTP requests to servers asynchronously.

How do I handle CORS issues?

Ensure your server includes the necessary CORS headers like Access-Control-Allow-Origin.

Why isn't my request authenticated?

Check your authorization header and ensure credentials are base64 encoded correctly.