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 :)

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay