AJAX Operations

Hello,

In this lesson, we learn how to interact with the remote server by using jQuery AJAX Methods.

AJAX(Asynchronous Javascript And XML) is a technology that makes data transfer with the Server asynchronously without refreshing the web page.

User experience is positively affected, especially since data can be transferred without refreshing the page.

Especially, the most popular web applications of the world such as Facebook, Gmail, Youtube use AJAX technology frequently.

In fact, instead of thinking of AJAX as a new technology, you can think of it as a method that provides asynchronous data transfer between server and client using Javascript.

Well, let's give an example of a function using AJAX.

For example, you watched a video on youtube.com and clicked the like button. In this case, our like event is transmitted to youtube servers in the background before the youtube page is refreshed.

This is a process that takes place with an AJAX request.

Let's do an example of AJAX requests.

Below is a GET request code made with AJAX to https://api.coddykit.com/api/coddy-test

This is made with Vanilla Javascript and is a bit tricky to syntax, as you can see.

<div id="result"></div>

<script>
 var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 
        && this.status == 200) {
      //we are writing the AJAX request response 
      //to div element that has result id
      var result = document.getElementById('result');
      result.innerHTML = JSON.stringify(this.responseText);
    }
  };
  xhttp.open("GET", "https://api.coddykit.com/api/coddy-test", true);
  xhttp.send();
</script>

As we said before, jQuery is a DOM modification library as well as providing methods to make AJAX operations easier.

We have a fairly simple method to manage our AJAX requests with jQuery. 

With the ajax() method, we can easily use HTTP methods commonly used in the Web world such as get, post or put.

The syntax of the Ajax method is as follows.

$.ajax ({

url: 'remote URL'.

data: 'Data that we will send',

method: 'HTTP Method - Default GET',

success: 'Here, we should define function that work when Ajax get success result',

dataType: 'Interaction data type'

});

Let's make an example

<div id="result"></div>

<script>
$.ajax ({
   url: 'https://api.coddykit.com/api/coddy-test',
   success: function(data){
   $('#result').text(JSON.stringify(data));
  }
});

</script>

Ajax get Request

Now let's improve our example.

In the example below, an ajax request has been sent to the URL (https://api.coddykit.com/api/coddy-test)

If no HTTP method is defined, a GET request is made by default.

const https = require('https');

function ajax(url) {
  const callbacks = { success: [], fail: [], always: [] };
  const req = https.get(url, (res) => {
    let data = '';
    res.on('data', chunk => data += chunk);
    res.on('end', () => {
      callbacks.success.forEach(cb => cb(data));
      callbacks.always.forEach(cb => cb());
    });
  });
  req.on('error', (err) => {
    callbacks.fail.forEach(cb => cb(err));
    callbacks.always.forEach(cb => cb());
  });
  return {
    done: function(cb) { callbacks.success.push(cb); return this; },
    fail: function(cb) { callbacks.fail.push(cb); return this; },
    always: function(cb) { callbacks.always.push(cb); return this; }
  };
}

var ajaxReq = ajax("https://api.coddykit.com/api/coddy-test")
  .done(function() {
   //success callback
  /*
  If our get request is sent to 
  the server with success (HTTP 2xx), 
  this function is called.
 */
  })
  .fail(function() {
   /* This function works 
       if the AJAX request fails.
   */
  })
  .always(function() {
   /*
   This function works in all cases when 
    the AJAX request is 
    successful or unsuccessful.
   */
  });

$.get() Method and Get Request

We can use the $.get() method to send an HTTP get request to our servers.

This method is provided to us by jQuery and allows us to send a GET request by writing more concise and easy code instead of Vanilla Javascript.

Let's do an example and note how shortened the code is.

<div id="result"></div> 

<script>
$.get("https://api.coddykit.com/api/coddy-test", 
function(response) {
   $('#result').text(JSON.stringify(response));
})
</script>

$.post() Method and Post Request

We can use the $.post() method to send an HTTP Post request to our servers.

Let's do an example and note how shortened the code is.

We will use post requests frequently, especially when submitting web forms to the server.

<div id="result"></div> 

<script>
$.post("https://api.coddykit.com/api/coddy-test", 
//Please note that we can send data in body while we sending Post Request
{name:'Coddy', age: 3},
function(response) {
   $('#result').text(JSON.stringify(response));
})
</script>

Put Request

We can use the $.put() method to send an HTTP Put request to our servers.

Let's make an example.

<div id="result"></div> 

<script>
$.ajax({
method:'PUT', 
url:"https://api.coddykit.com/api/coddy-test",
//Please note that we can send data in body while we sending Put Request
data: {name:'Coddy', age: 3},
success: function(response) {
   $('#result').text(JSON.stringify(response));
}})
</script>

Delete Request

We can use the $.delete() method to send an HTTP Delete request to our servers.

Let's make an example

<div id="result"></div> 

<script>
$.ajax({
method:'DELETE', 
url:"https://api.coddykit.com/api/coddy-test",
success: function(response) {
   $('#result').text(JSON.stringify(response));
}})
</script>

You can find examples and get detailed information about AJAX methods from the link below.

Congratulations 🎉

In this section, we learned the AJAX with jQuery

Thank you for joining us during the jQuery For Beginners Course 🎉🎉🎉

You can now take the exam and get a certificate for the jQuery Tutorial For Beginners course 🚀🚀🚀