How to use jQuery AJAX for asynchronous data transfers
IONOS editorial team3 mins
Using jQuery AJAX will allow your website to respond to user interactions dynamically. jQuery AJAX makes it possible to retrieve or send data from the server, update content and more, without having to completely reload the page. Asynchronous data transfers with jQuery AJAX ensures responsive web applications.
What are jQuery.ajax() methods?
AJAX stands for Asynchronous JavaScript and XML. The JavaScript scripting language and the jQuery library include AJAX methods for asynchronous exchange of data between a client and a server. jQuery AJAX requests use JavaScript’s XMLHttpRequest object internally. Asynchronous HTTP requests are sent via AJAX to the web server, which returns the response in a specific format, like XML or JSON. This allows individual sections of a web page to be updated without having to reload the entire page. AJAX has the benefits of being flexible and compatible with jQuery in WordPress.
Whether it’s your first jQuery application, 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 understand how .ajax() methods work, some basic understanding of jQuery is required. That’s why we recommend taking a look at our jQuery tutorial before diving into AJAX.
- ajax(): sends asynchronous 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 JavaScript file from a server
- load(): sends an HTTP request to load HTML or text from the server and attach it to DOM elements
With the IONOS API you can manage your IONOS hosting products conveniently and securely. You’ll receive an access key for using the IONOS APIs. You can find detailed documentation on the IONOS Developer API information page.
Application 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 transferred 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 appropriate 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>As output we get:
This is a jQuery AJAX exampleWith Deploy Now from IONOS, you can deploy static websites and single page applications directly via GitHub. Simply connect your repository to Deploy Now and submit changes using the push command. Deploy Now automatically detects a variety of frameworks and appropriately configures your build. Streamline your workflow with Deploy Now membership.
