---
title: Ajax + Bootstrap
tags: Javascript, Ajax, Bootstrap
---
> 【目錄】
> [TOC]
> Reference website：
> [網頁新手入門：初探網頁架構和前後端語言](https://medium.com/appworks-school/%E7%B6%B2%E9%A0%81%E6%96%B0%E6%89%8B%E5%85%A5%E9%96%80-%E5%88%9D%E6%8E%A2%E7%B6%B2%E9%A0%81%E6%9E%B6%E6%A7%8B%E5%92%8C%E5%89%8D%E5%BE%8C%E7%AB%AF%E8%AA%9E%E8%A8%80-a88a5dc86ee3)
> [Learn AJAX in Half an Hour!](https://www.codemio.com/2016/07/ajax-tutorial-learn-ajax-in-an-hour.html)
> [AJAX (w3schools)](https://www.w3schools.com/xml/ajax_intro.asp)
> [JavaScript、jQuery、AJAX、JSON 這四個之間的關係？](https://www.zhihu.com/question/31305968)
> [五個月成為 JavaScript 工程師的完整攻略](https://buzzorange.com/techorange/2018/01/04/learn-coding-in-5-months/)
* 目前講過：HTML、CSS、Bootstrap、JavaScript、jQuery、Ajax
* 尚未講過：Php、MSSQL、MySQL、JSON、Google Map API、Google APIs、Animation effects、HTML5 Canvas、Charts、Validate forms、Slides, drag and drops pps, navigation menus、node.js
# ==網頁運作原理==
**一個網頁在運作時，主要有三項參與其中：**
1. Client（瀏覽器）
2. Web Server（資料的運算和處理）
3. Database（儲存資料）
# 初探網頁概念 前端 vs. 後端
## ==前端 (Front-end)==：像點餐，直接面對使用者對網站的動作。
:::info
### 靜態網站 (Static web pages)
* 資料寫死在 HTML 中，只做單純的展示功能。
* 不與 database 做互動。
### 動態網站 (Dynamic web pages)
* 透過與 database 的互動，來產生網頁內容。
:::
### [前端網頁基本組成](http://tsweb44.com/js_ascc/webpage/page1_1.php)
JavaScript 是一個用途很廣泛的程式語言，普遍用於網頁。
[==What is jQuery ?==](https://progressbar.tw/posts/6)
1. jQuery是一個[以 JavaScript 來編寫的函式庫 (JavaScript library)](https://zh.wikipedia.org/wiki/JavaScript%E5%87%BD%E5%BC%8F%E5%BA%AB)。
2. jQuery is a lightweight, "write less, do more".
3. jQuery 簡化了 JavaScript 的表達，比如 “AJAX calls” 和 “DOM manipulation”。
註：[【Library】函式庫](http://thecodingtime.blogspot.com/2014/02/apimethodlibrary.html)，指將一群已經寫好的 Method (Function)包成一個 Library，當我們 import 這個 Library 後就能使用其包含的 Method。
同樣這種幫助 JavaScript 在網頁操控上如魚得水的好用工具還有很多，
例如 [三大框架 Angular.js、Vue.js、React.js](https://buzzorange.com/techorange/2017/07/31/all-about-javascript-framework/) ...，這些工具大幅簡化了寫網頁的複雜度，也讓更多人願意投入寫 JavaScript 的行列。
而越多人投入寫 JavaScript，就也促使越多人設計優化出更多好用的工具。這個良性循環也奠定了 JavaScript 在網頁端學習以及應用的優勢。
---
==What is AJAX (非同步的 JavaScript 與 XML 資料交換技術) ?==
1. AJAX 不是一個程式語言，而是一種綜合了多項技術的瀏覽器端網頁開發技術。
2. AJAX 雖然其名稱包含 XML，但實際上資料格式可以由 JSON 代替。
3. 優點：不重新載入頁面，仍可與伺服器交換資訊並更新部份網頁內容。
> **AJAX + XML：**
> * https://www.w3schools.com/xml/tryit.asp?filename=tryajax_xml2
> * https://www.w3schools.com/xml/cd_catalog.xml
> **AJAX uses a combination of:**
> * 運用 JavaScript 內建的 XMLHttpRequest 物件 ==> 專門用來和伺服器做連線
> A browser built-in XMLHttpRequest object (to request data from a web server)
>
> * 操作 DOM（Document Object Model） ==> 用來執行動態效果
> JavaScript and HTML DOM (to display or use the data)
---
## ==後端 (Back-end)==：像出餐，接收前端的要求並提供相應的資料。
不像前端只有 JavaScript 一種語言，後端語言在選擇上可說是百家爭鳴、百花齊放。
常見的有老牌的 PHP、Java，最近十分熱門的 Python、Ruby，來勢洶洶的 Node.js、Go 等等。
事實上，每個後端語言都有不一樣的特性，也都有各自的擁護者。
哪一個語言最適合做為後端語言的入門一直都是沒有定論的問題。
---
# Ajax + Bootstrap 實作
* [Web Server for Chrome](https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb/related)
* [Allow-Control-Allow-Origin: *](https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related?hl=zh-TW)
* [Bootstrap](https://getbootstrap.com/)
* [如何把 bootstrap 內容置中？](http://jasonlung.logdown.com/posts/2016/07/23/how-to-bootstrap-content)
* [HTML嵌入音樂播放器](https://tutorialehtml.com/zh/html-tutorial-embed-audio/)
* [從YouTube下載視頻和音頻](https://y2mate.com/zh-tw)
* vs. [HTML+CSS --- Tabs](https://www.w3schools.com/howto/howto_js_tabs.asp)
## 起手式
* index.html
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax 標籤選單</title>
<script> //等會ㄦ要打程式碼 </script>
</head>
<body>
<div>
<button>電影</button>
<button>音樂</button>
</div>
<hr>
<div id="content">
<!--等會ㄦ內容會載入到這裡-->
</div>
</body>
</html>
```
* movie.html
```htmlmixed=
<ul>
<li>極限獵殺 Downrange</li>
<li>電影版吹響吧！上低音號～莉茲與青鳥～ Liz and the Blue Bird</li>
<li>藤子海敏：寂默鋼琴師 Fuzjko: A Pianist of Silence & Solitude</li>
</ul>
```
* music.html
```htmlmixed=
<table width="100%" border="1">
<tr>
<th>Singer</th>
<th>Song</th>
<th>Music Player</th>
</tr>
<tr>
<td>林采欣 Bae</td>
<td>【可樂 Cola】</td>
<td></td>
</tr>
<tr>
<td>米津玄師</td>
<td>【Lemon】</td>
<td></td>
</tr>
<tr>
<td>miwa・坂口健太郎</td>
<td>【アイオクリ】</td>
<td></td>
</tr>
</table>
```
## 慢慢改 index.html
```htmlmixed=
<script>
//等會ㄦ要打程式碼
function getData(){
// JavaScript 內建的 XMLHttpRequest 物件, 專門用來和伺服器做連線
var req = new XMLHttpRequest();
//get 連線的方法 //想要連線的網址
req.open("get","http://140.136.24.167:8887/movie.html");
//代表連線完成，並取得網頁內容的結果(取得伺服器的回應)
req.onload = function(){
alert(this.responseText);
};
req.send(); //真正的送出連線
}
</script>
<button onclick="getData();">電影</button>
```
```javascript=
req.onload = function(){
var content = document.getElementById("content");
content.innerHTML = this.responseText;
};
```
## Ajax 功能完成~
簡言之，就是透過程式碼，動態的讓網頁與伺服器做連線。
```javascript=
<button onclick="getData('movie.html');">電影</button>
<script>
//等會ㄦ要打程式碼
function getData(pagename){
// JavaScript 內建的 XMLHttpRequest 物件, 專門用來和伺服器做連線
var req = new XMLHttpRequest();
//get 連線的方法 //想要連線的網址
req.open("get","http://140.136.24.167:8887/"+pagename);
//代表連線完成，並取得網頁內容的結果(取得伺服器的回應)
req.onload = function(){
var content = document.getElementById("content");
content.innerHTML = this.responseText;
};
req.send(); //真正的送出連線
}
</script>
#簡單初始化
<body onload="getData('movie.html')">
```
---
# 下次上課的內容：
* index.html
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax 標籤選單</title>
//等會ㄦ要放 Bootstrap CDN (共4個)
<script> //等會ㄦ要打程式碼 </script>
</head>
<body>
//bootstrap 的 breadcrumb
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#" onclick="getData('movie.html');">電影</a>
</li>
<li class="breadcrumb-item">
<a href="#" onclick="getData('music.html');">音樂</a>
</li>
</ol>
</nav>
<hr>
<div id="content" class="container-fluid"> <!--等會ㄦ內容會載入到這裡-->
</div>
</body>
</html>
```
```htmlmixed=
#最終版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax 標籤選單</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script>
//等會ㄦ要打程式碼
function getData(pageName){
var req = new XMLHttpRequest();
req.open("get","http://192.168.0.106:8887/"+ pageName);
req.onload = function(){
var content = document.getElementById("content");
content.innerHTML = this.responseText;
};
req.send();
}
</script>
</head>
<body>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#" onclick="getData('movie.html');">電影</a>
</li>
<li class="breadcrumb-item">
<a href="#" onclick="getData('music.html');">音樂</a>
</li>
</ol>
</nav>
<hr>
<div id="content" class="container-fluid">
<!--等會ㄦ內容會載入到這裡-->
</div>
</body>
</html>
```
* movie.html
```htmlmixed=
#最終版
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner container col-md-8 col-md-offset-2">
<div class="carousel-item active">
<img class="d-block w-100" src="https://img.athena77.com/20180831073027_58.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://img5.mtime.cn/CMS/Gallery/2017/11/28/103713.76698885_1000.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://www.taghobby.com/wp-content/uploads/2017/12/top-1.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--自動播放背景音樂-->
<embed height="60" type="audio/mpeg" width="144" src="vk_1_billion_lightyear_of_distance.mp3" volume="60" loop="false" autostart="true" />
```
* music.html
```htmlmixed=
#最終版
<div class="alert alert-warning" role="alert">音樂</div>
<table class="table table-hover">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Singer</th>
<th scope="col">Song</th>
<th scope="col">Music Player</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>林采欣 Bae</td>
<td>【可樂 Cola】</td>
<td><audio controls><source src="cola.mp3" type="audio/mpeg"></audio></td>
</tr>
<tr>
<th scope="row">2</th>
<td>米津玄師</td>
<td>【Lemon】</td>
<td><audio controls><source src="lemon.mp3" type="audio/mpeg"></audio></td>
</tr>
<tr>
<th scope="row">3</th>
<td>miwa・坂口健太郎</td>
<td>【アイオクリ】</td>
<td><audio controls><source src="アイオクリ.mp3" type="audio/mpeg"></audio></td>
</tr>
</tbody>
</table>
```
---
# 補充：[Bootstrap 免費模板](https://getbootstrap.com/docs/4.1/examples/)
* **Bootstrap 是免費的 CSS, JavaScript 的資源套件，我們可以把它 download 並套用**
Sign in with Wallet
Connect another wallet