Using jQuery AJAX will allow your website to respond to user in­ter­ac­tions dy­nam­ic­ally. jQuery AJAX makes it possible to retrieve or send data from the server, update content and more, without having to com­pletely reload the page. Asyn­chron­ous data transfers with jQuery AJAX ensures re­spons­ive web ap­plic­a­tions.

What are jQuery.ajax() methods?

AJAX stands for Asyn­chron­ous JavaS­cript and XML. The JavaS­cript scripting language and the jQuery library include AJAX methods for asyn­chron­ous exchange of data between a client and a server. jQuery AJAX requests use JavaS­cript’s XM­L­Ht­tpRe­quest object in­tern­ally. Asyn­chron­ous HTTP requests are sent via AJAX to the web server, which returns the response in a specific format, like XML or JSON. This allows in­di­vidu­al sections of a web page to be updated without having to reload the entire page. AJAX has the benefits of being flexible and com­pat­ible with jQuery in WordPress.

Tip

Whether it’s your first jQuery ap­plic­a­tion, a blog or your own forum, webspace from IONOS is what will get your personal web project online. At IONOS, you’ll get a domain, an email address and cheap storage space.

What are the jQuery.ajax() methods?

To un­der­stand how .ajax() methods work, some basic un­der­stand­ing of jQuery is required. That’s why we recommend taking a look at our jQuery tutorial before diving into AJAX.

  • ajax(): sends asyn­chron­ous HTTP requests to the server
  • get(): sends an HTTP GET request to load the data from the server
  • post(): sends a jQuery AJAX post request to submit certain data to the server.
  • getJSON(): transmits a jQuery AJAX GET request to the server and expects the response in JSON format.
  • getScript(): sends an HTTP GET request to get and execute a JavaS­cript file from a server
  • load(): sends an HTTP request to load HTML or text from the server and attach it to DOM elements
Tip

With the IONOS API you can manage your IONOS hosting products con­veni­ently and securely. You’ll receive an access key for using the IONOS APIs. You can find detailed doc­u­ment­a­tion on the IONOS Developer API in­form­a­tion page.

Ap­plic­a­tion example for jQuery.ajax() methods

jQuery.ajax() can also be combined with classic jQuery functions like jQuery.click(), jQuery.append() and jQuery.each().

In the following example, we reference the text ‘This is a jQuery AJAX example’ from the URL /jquery/getdata. The text has been trans­ferred as the first argument to the jQuery.ajax() method. To allocate the second parameter, we decided to use a callback function which handles the server response and inserts the data inside the p tag in the DOM. The .ajax() method sends a GET request to the ap­pro­pri­ate server by default. The sending of the jQuery AJAX request is triggered by a click event from the btn button. After that, the text is displayed in the browser.

<!DOCTYPE html>
                
<html>
<head>
     <meta name="viewport" content="width=device-width" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
     </script>
     <script type="text/javascript">
      $(document).ready(function () {
     $('#btn').click(function(){
          $.ajax('/jquery/getdata', // request url
                {
                success: function (data, status, xhr) { // success callback function
                                     $('p').append(data);
                }
          });
          });
      });
     </script>
</head>
<body>
     <input type="button" id="btn" value="send jQuery AJAX request" />
     <p></p>
</body>
</html>
html

As output we get:

This is a jQuery AJAX example
text
Tip

With Deploy Now from IONOS, you can deploy static websites and single page ap­plic­a­tions directly via GitHub. Simply connect your re­pos­it­ory to Deploy Now and submit changes using the push command. Deploy Now auto­mat­ic­ally detects a variety of frame­works and ap­pro­pri­ately con­fig­ures your build. Stream­line your workflow with Deploy Now mem­ber­ship.

Go to Main Menu