# 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.

![](https://cdn-images-1.medium.com/max/1600/1*UM-rjVu0qd3oVQmYkaRR-g.jpeg align="left")

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](https://www.w3schools.com/xml/ajax_intro.asp).

### **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**

```plaintext
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:

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

```plaintext
// Your code goes here
```

```plaintext
});
```

**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 —

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

Hence, the final get request will look like this -

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

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

```plaintext
// Your code goes here
```

```plaintext
});
```

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 —

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

Use the following method to post data —

```plaintext
$.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.

```plaintext
$.ajax({
```

```plaintext
url: 'sample_url'
```

```plaintext
type: 'DELETE',
```

```plaintext
success: //Enter your callback function here
```

```plaintext
});
```

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.

```plaintext
$.ajax({
```

```plaintext
url: 'sample_url'
```

```plaintext
type: 'SAMPLE TYPE',
```

```plaintext
data: my_JSON_obj,
```

```plaintext
success: //Enter your callback function here
```

```plaintext
});
```

Best of luck for your next project!