“AJAX” Your Client Request — The Easiest Way

Who doesn’t like “AJAX”? Okay. We move.

With AJAX your user doesn’t have to leave the page during form submission and this adds a kind of “seamless” user experience. However, for developers, it may become boring and time-consuming to always code the logic for specific-case scenarios. What if we can have a unified package that handles all our client-side requests and displays the result on the web page without writing a single line of code? This is what “MMUO” does.

This package, like the name suggests (Mmuo means Spirit in Igbo language), performs multiple functions and tasks that you won’t see coming. However, for the sake of our article today we shall focus on the AJAX request feature (you can look up the documentation for other amazing features). Simply install the package like so (if you use npm or with the appropriate package manager command you use):

$ npm install mmuo

And you’re in. The package exposes a registerEventListeners() function that already has some event listeners and classes for you to just dive right in and use. Simply import the function into your project and use it right away. Example:

import {registerEventListeners} from "mmuo"

//Always nice to register events when the DOM has been fully loaded
window.addEventListener("DOMContentLoaded", function() {
    registerEventListeners()
});

Or, if you prefer to link via <script> in your HTML document, especially if you don't use a bundler, then prefix the function(s) with "mmuo":

<script src="/path_to_node_module_or_installation_directory/mmuo/dist/mmuo.umd.js"></script>   

<script>
    window.addEventListener("DOMContentLoaded", function() {
        mmuo.registerEventListeners()
    });
</script>

This function already has some registered events with “special” class or ID names which you can just give any element. All the possible names have been documented in the official documentation already.

To run AJAX request, We advice that each input type be placed within a div for proper styling and alignment. If you use our registerEventListeners() function then make sure it has the id or class attribute set to form. Example:

<form action="submit" id="form" method="post">
    <div>
        <input type="text" name='name'>
    </div>

    <div>
        <input type="email" name='email'>
    </div>

    <div>
        <input type="password" name='password'>
    </div>
    
    <div>
        <input type="submit" value="Log In" />
    </div>
</form>

You can put as many input elements as you like and they’ll be submitted to your server.

It is important that your submit button has a type="submit" attribute so we can identify the trigger. Also, as much as possible, try to enclose your input tag(s) in a div.

By default, “Mmuo”, using Axios, expects a JSON response with a “message” property that contains the data to be displayed to the user on a successful request. If it doesn’t find any then the entire response (from the server) will be displayed to the user. The HTTP status code is used to detect a successful (or failed) request. Typically this will mean that requests that are successful should have a 200 status code while failed requests should typically have a 422 status code. If you use PHP and are worried about generating the appropriate header and or warning then you can use this popular Zam package that integrates readily with this front-end package.

You can also specify, in your error (or failed) response, a “target” property that refers to the name attribute value of a particular form input where the appropriate error message should be displayed next. For instance, if the error occur(ed) during an email validation/sanitization message such that you want to report this error to the user, it makes sense to display this error message beside, or close to, the input area. Just supply the “name” attribute value of the particular input and this package takes care of the rest.

Your response will typically be something like this in this case:

{
    "message": {
        "message":"Please enter your email address here",
        "target":"email" //This refers to the HTML input form that this validation message for (if any). It is completely optional.
    }
}

Or,

{
    "message":"Please enter your email address here",
    "target":"email" //This refers to the HTML input form 'NAME' that this validation message is meant for (if any). 
}

With the above the appropriate error message will be displayed right next after the input element it’s (message) meant for (as long as the appropriate HTTP status code is set. For form request(s) please use 422 for error response(s) when dealing with form validation).

This is just one of the many things you can do with this package and I’ll recommend you consult the documentation for more information on how to use this package.