iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0

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:

  1. Install Chrome Extension Web Server for Chrome, and choose a root folder.
  2. Create an HTML file with a simple context.
  3. Copy and combine the web server URL and the name of our HTML file together.
    Done!!
    https://ithelp.ithome.com.tw/upload/images/20210929/201303624goohzPhKK.png

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

Yes


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./images/emoticon/emoticon12.gif


上一篇
#28 JS: Timing Events - Part 2
下一篇
#30 [Final] Had Fun Learning JavaScript?
系列文
Learn & Play JavaScript -- Entry-Level Front-End Web Development30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言