#29 JS: AJAX

2021 iThome 鐵人賽

DAY 29

Modern Web

Learn & Play JavaScript -- Entry-Level Front-End Web Development系列第 29 篇

13th鐵人賽 javascript front-end ajax server

Vida Lin

2021-09-29 16:18:01

1269 瀏覽

What is AJAX?

AJAX = Asynchronous JavaScript And XML.
AJAX is not a programming language, it just uses a combination of:

A browser built-in XMLHttpRequest object (to request data from a web server)
JavaScript and HTML DOM (to display or use the data)

AJAX is a developer's dream, because you can:

Read data from a web server - after a web page has loaded
Update a web page without reloading the page
Send data to a web server - in the background"

by W3C School

Before learning AJAX, we have to know how to build up a web server

Tutorial in Mandarin: Build up web server

Step by step:

Install Chrome Extension Web Server for Chrome, and choose a root folder.
Create an HTML file with a simple context.
Copy and combine the web server URL and the name of our HTML file together.
Done!!

How does AJAX work?

Usage Scenario: To create a personal blog or whatever main page containing URLs that needs to be transferred to other website.
As mentioned, before this menu page practice, we should create multiple HTML pages so that we can connect through the server. (I created Writing.html and Portfolio.html)

From the example above, AJAX helps request other pages’ data through the server immediately when we click Writing or Portfolio at this Menu page.

<body onload="getData('Writing.html')" style="font-family:Arial">
    <div>
        <span onclick="getData('Writing.html');">Writing</span>
        <span onclick="getData('Portfolio.html');">Portfolio</span>
    </div>
    <!-- adding a horizontal line -->
    <hr/>
    <div id="content"></div> 
 
    <script type="text/javascript">
    function getData(pageName){
    //AJAX XMLHttpRequest object: for connecting with the server.
        let req=new XMLHttpRequest();
        req.open("get","http://127.0.0.1:8887/"+pageName); //setting the connection and URL.
        req.onload=function(){ //Use load event to detect when the connection is finished.  
        // From here, the connection is done.
            let content=document.getElementById("content");
            content.innerHTML=this.responseText;
        };
        req.send();//Call the "send" to send out the connection request.
    }   
    </script>
</body>

*Note:Add onload="getData('Writing.html')" to <body> will present the Writing page's content once we open up the menu page.

Music of Today: Without You by Oh Wonder

Like/Share/Follow

Feel free to comment and share your ideas below to learn together!
If you guys find this article helpful, please kindly do the writer a favor — LIKE this article.