Pitch your project

Random text


By admin Category Uncategorized, Posted March 21st, 2016
Receiving data with AJAX

What is AJAX?

AJAX is a technique for creating fast and dynamic web pages. AJAX stands for Asynchronous JavaScript And XML. It uses the XMLHttpRequest object to communicate with server-side scripts to asynchronously update parts of a website. XMLHttpRequests can send as well as receive information in a variety of formats, including JSON, XML, HTML, and text files. Nowadays JSON gets mostly used so the name isn’t really correct but changing it would be lame. Asynchronous means that you don’t pause the code but you keep running your code whilst a part of the code waits till it gets the necessary parts to finish it or update it.

There are a couple things you need to know before you are going to request data from or to websites:
1. You can’t send a request from HTTPS to HTTP because HTTPS is a more secure extension of HTTP that doesn’t allow a request back to HTTP.
2. You can send a request from HTTP to HTTPS only if the HTTPS website allows it.
3. For HTTPS websites with secure data you will be denied by the header and you will first need to send a authenticated request to access the data.

How to receive data with AJAX.

Sending the request.

The first thing you need to do is to make a new request, like this:

var xhr = new XMLHttpRequest();

After creating the object we need to actually make the request. To make the request you need to call the open and send methods.

The open function will ask for three parameters with the third parameter being optional. In the first parameter you want to give it a sending method like get, post and head. In the second parameter you want to give it the url of the page you’re requesting. The optional third parameter asks you for if you want it asynchronous.
Then after the open method you just need to call the send method and optionally you can give it a parameter with data to send to the server, like this:

var xhr = new XMLHttpRequest();

xhr.open("get", "https://api.github.com ", true);

Handling the response.

After you made the request, you need to handle the response you’re getting back with a function. This is done by setting the onload or onReadyStateChange property of the object to the function name you want to process the response with, here examples:

var xhr = new XMLHttpRequest();

xhr.open("get", "https://api.github.com ", true);

//use this
xhr.onReadyStateChange = responseFunction;
//or use this
xhr.onload = responseFunction;

//this works too.
xhr.onReadyStateChange = function() {
  //response processing code.

onload only works for modern browsers. I would recommend just using onReadyStateChange for supporting older browser.

Now we have the function to handle the response, we will need to process the response. First we need to check the state of the request.
The readyState has 5 states, here examples:

xhr.onReadyStateChange = function(){
  if(xhr.readyState == 0){
    //state 0 - the request is uninitialized.
  else if(xhr.readyState == 1){
    //state 1 - the request is loading.
  else if(xhr.readyState == 2){
    //state 2 - the request is loaded.
  else if(xhr.readyState == 3){
    //state 3 - the request is interactive.
  else if(xhr.readyState == 4){
  //state 4 - the request is competed, the request has been received.

So we need to wait for the request to be at state 4. If the state has been checked its time to check the HTTP response code
using status method. There are many types of response codes, you can find them all here but the only code we need to check for is the code 200. Code 200 simply says your request is received and got a correct response back. When we get correct response code we can do something with the response,

I will just show an example of a JSON response:

//using this json.
  age: '150'
xhr.onReadyStateChange = function(){
  if(xhr.readyState == 4){
    if(xhr.status == 200){
      //human will get the JSON object from the server and you can use it how you want.
      var human = JSON.parse(xhr.response):

Examples and sources.

My own example
Example from source 1

Source 1
Source 2
Source 3
Source 4
Source 5

Posted by Tjeerd Verschragen

Leave a Reply

Your email address will not be published. Required fields are marked *