A front end beginner’s guide to linking

Using AJAX and jQuery

Linking is an essential skill for a front end developer. This skill involves connecting the back end (server-side) to the front end (client-side). A front end developer who has no skill in linking is as good as someone trying to have soup with a fork.

Basic knowledge of jQuery is a prerequisite before proceeding further. I have used the bare minimum of it so the guide is easier for beginners who are not familiar with jQuery.

AJAX

AJAX stands for A*synchronous **J*avaScript *A*nd *X**ML. It allows developers to update a part of the web page without refreshing the entire thing.*

More details on AJAX can be found here.

JSON Objects

When exchanging data between a browser and a server, the data can only be text. JSON is text, and we can convert any JavaScript object into JSON, and send JSON to the server, or, convert any JSON received from the server into JavaScript objects.

Rules of JSON

• JSON objects are written in key/value pairs and surrounded by curly braces {}.

• Keys must be strings, and values must be a valid JSON data type (string, number, object, array, boolean or null).

• Keys and values are separated by a colon.

They work similarly to dictionaries in python.

Example

var myObj = {name: "Raj", age: 19, city: "New Delhi"};

Requests

Before we begin communicating with the server, we need to understand the different types of requests present. Some widely used ones are given below:

GET Request: Receive data from the server

POST Request: Send data to the server

DEL Request: Request deleting the chosen data from server

Now that you’re familiar with the basic terms, let’s get started.

Sending GET Request

As mentioned before, used to receive or get data from the server.

Use the following jQuery method:

$.get(URL, function(data, status){

// Your code goes here

});

URL specifies the address of the server from which you want to get the data.

The callback function ( A function that is passed as a parameter to another function ) has two parameters: data and status.

The status stores the server status code. Each code means a different thing which is decided by the back end developer. Some common practices include giving a status code of 200 when everything’s fine and 404 when the page cannot be found.

The data stores the actual JSON object received from the server. Depending on the server, you may get back the data in the form of string or JSON. If it is received in the form of a string, the following method parses the string into a JSON object —

var obj = JSON.parse(data);     // Convert string to JSON

Hence, the final get request will look like this -

$.get(URL, function(data, status){

var obj = JSON.parse(data);     // If data received is string

// Your code goes here

});

You can proceed to use normal HTML DOM to manipulate and use the JSON on your web page.

Sending POST Request

Post requests send or post data to the server.

Depending on the server, the data you send should be of JSON or string format. To convert JSON to string, use the following method to stringify it —

var myJSON = JSON.stringify(obj);    // Convert JSON to string

Use the following method to post data —

$.post(URL,data,callback);

URL and callback have the same usage as before. The data parameter is the data that is sent to the server (in the form of a JSON object or a stringified JSON object).

Sending DEL Request

DEL requests are for deleting data from the server.

There is no built-in method like $.del that gets the job done.

Instead, we use the $.ajax method and modify some terms to fit it to our need, as shown below.

$.ajax({

url: 'sample_url'

type: 'DELETE',

success: //Enter your callback function here

});

Yup, that’s it.
But wait, how do I tell what data to delete?

That’s the beauty of it. The URL contains an id within it that points to the location of the id of the data to be removed. When you want to delete something, you must pass the id into the URL using string concatenation.

Provide your callback function in SUCCESS that runs when the delete operation is successful.

The $.ajax() method can be modified to fit other request types that are not frequently used too. Just change the ‘type’ and you’re good to go. Use ‘data’ in case there is a JSON to be sent to the server.

$.ajax({

url: 'sample_url'

type: 'SAMPLE TYPE',

data: my_JSON_obj,

success: //Enter your callback function here

});

Best of luck for your next project!