DEV Community

Hamid Haghdoost
Hamid Haghdoost

Posted on

5 3

Simple exercise for Javascript Ajax

I have about 4 years of experience working as private tutor of programming. About five years ago I published a blog post in my website in Persian language about entitled "Private Laravel Tutor" and people started to call me. I always love teaching people and it was a good opportunity.
After a while the number of student raise up and today I have two sessions per day in average and most of my previous students are working around the world.
Today I had a JS session about Working with AJAX. I post the content of the codes for beginner friends at this community.

index.html
Enter fullscreen mode Exit fullscreen mode
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learning Ajax</title>

    <link rel="stylesheet" href="css/app.css">
</head>
<body>
    <button class="btn" id="load">Load Posts</button>
    <button class="btn" id="clear">Clear Posts</button>
    <div id="posts">

    </div>
    <script src="js/app.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
css/app.css
Enter fullscreen mode Exit fullscreen mode
body {
    margin: 0;
}

#posts {
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}


.post {
    width: 25%;
    margin: 20px;
    border: 3px solid rgb(36, 220, 91);
    padding: 10px;
}

.post:hover {
    border: 3px solid rgb(0, 0, 0);
}

.post h1 {
    font-family: cursive;
}

.btn {
    padding: 10px;
    margin: 10px;
    background-color: rgb(36, 220, 91);
    color: black;
}
Enter fullscreen mode Exit fullscreen mode
js/app.js
Enter fullscreen mode Exit fullscreen mode

document.getElementById("load").addEventListener("click", function () {
    url = "https://jsonplaceholder.typicode.com/posts";
    sendAjax(url);
});

function sendAjax(url) {
    let http = new XMLHttpRequest();
    http.onload = function () {
        let posts_element = document.getElementById("posts");
        let posts = JSON.parse(this.responseText);

        posts.forEach(function (post) {
            let div = document.createElement("div");
            div.className = "post";

            let h3 = document.createElement("h3");
            h3.textContent = post.title;
            div.appendChild(h3);

            let p = document.createElement("p");
            p.textContent = post.body;
            div.appendChild(p);

            posts_element.appendChild(div);
        });
    };
    http.open("GET", url);
    http.send();
}

document.getElementById("clear").addEventListener("click", function () {
    let posts_element = document.getElementById("posts");
    posts_element.textContent = ''
});
Enter fullscreen mode Exit fullscreen mode

If you are looking for a tutor, feel free to contact me :)

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more