AJAX

AJAX是Asynchronous JavaScript And XML的簡稱，AJAX並不是一個程式語言，所以不能單獨使用，僅能跟browser內建的XMLHttpRequest物件合用，或是JavaScript跟HTML DOM並用。雖然根據名稱是使用XML來傳遞資訊，事實上一樣可以使用純文字或是JSON。使用AJAX可以傳遞要求(Request)給伺服器，也可以接受來自伺服器的訊息。

How it works?

以下使用範例簡介並說明AJAX如何使用。

: 首先建立兩個檔案，一為html檔(Ajax_1_html.html)，另一為文字檔(ajax1_info.txt)，文字檔內儲存一些文字(以下例子使用Chrome無法顯示，可使用FireFox。)。

	<!DOCTYPE html>
	<html>
	<head>
	<title>AJAX html</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	</head>
	<body>
		<div id = "div1">
			<h3>Change Text</h3>
			<button type="button" onclick="loadDoc()">Change</button>
		</div>
		<script>
			function loadDoc(){
				var count = 0;
				var xhttp = new XMLHttpRequest();
				xhttp.onreadystatechange = function(){
					//console.log(count);	Different browser has different response >> FireFox is OK. Chrome is not.
					//count++;
					if (this.readyState == 4 && this.status == 200){ 
						document.getElementById("div1").innerHTML = this.responseText;
					
					}
				}
				xhttp.open("GET", "ajax_1_info.txt", true);
				//xhttp.open("GET", "http://www2.nkfust.edu.tw/~shanhuen/JavaScript/ajax_1.json", true);
				//xhttp.open("GET", "http://localhost/WorkSpace/ajax1_info.txt", true);
				xhttp.send();
			}
		</script>
	</body>
	</html>

在網頁(web page)產生一個事件(event)，e.g. page loaded or button clicked。
使用JavaScript建立一個XMLHttpRequest物件。
XMLHttpRequest物件傳送一個需求(request)給伺服器(web server)。
伺服器處理需求後，傳回回應(response)給網頁。
JavaScript接收回應然後進行動作(e.g. 更新網頁)。
使用open()時，第一個參數可使用"GET"或"POST"，GET比較簡單且快速，用於大多數的情況。使用POST的時機一般為

不使用cached file(e.g. 更新伺服器上的檔案)
傳送大資料到伺服器(POST沒有大小限制)
傳送使用者輸入的資料(可能包含未知字元)

open()的第二個參數為資料名稱與位置，第三個參數表示是否使用asynchronous(使用true)。
open()之後須send()才會傳送。
伺服器傳回回應時，onreadystatechange是定義一個函數，當readyState改變時呼叫。
readyState紀錄XMLHttpRequest的狀態，狀態定義如下:

0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

status與statusText兩性質紀錄XMLHttpRequest物件的狀態(See https://en.wikipedia.org/wiki/List_of_HTTP_status_codes or https://www.w3schools.com/tags/ref_httpmessages.asp for more details.)。

200: "OK"
403: "Forbidden"
404: "Page not found"
statusText傳回描述文字，e.g. "OK" or "Not Found"

使用Chrome需與伺服器連結，所以首先先打開XAMPP Control Panel，開啟Apache，讓電腦成為主機。將檔案ajax1_info.txt複製到C:\xampp\htdocs\WorkSpace(php的workspace)。

若放置於相同網域則無此問題，所以在此使用xhttp.open("GET", "http://www2.nkfust.edu.tw/~shanhuen/JavaScript/ajax_1.json", true);並將檔案上傳至伺服器後使用。若要跨域連結，所以需要開啟Access-Control-Allow-Origin: *這個在伺服器，練習時可使用以下方式暫時使用(詳細內容請見CORS)。
點選以下連結https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en-US來允許Allow-Control-Allow-Origin(練習用，使用後應即關閉，開啟時會影響網站安全性，欲取消再到同網站點選取消)。。
若使用FireFox，至以下網站https://addons.mozilla.org/en-US/firefox/addon/access-control-allow-origin/點選允許Allow-Control-Allow-Origin(練習用，使用後應即關閉，開啟時會影響網站安全性，欲取消再到同網站點選取消)。

將xhttp.open("GET", "ajax1_info.txt", true);中第二個參數改為http://localhost/WorkSpace/ajax1_info.txt(或設計一個json檔案，e.g. ajax_1.json)，然後執行程式再看結果。甚至可以將第二個參數修改為http://www2.nkfust.edu.tw/~shanhuen/JavaScript/ajax_1.json
利用如此方式，可以取得伺服器中的資訊來顯示在網頁中。

Callback Function

在呼叫時使用callback function，可產生不同事件

: 讓callback function成為事件的參數，不同的事件呼叫不同的function。利用這個方式，可以顯示不同資料來源的內容，之後僅要更新資料來源即可。

Ajax_2_callback.html

	<!DOCTYPE html>
	<html>
	<head>
	<title>AJAX</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	</head>
	<body>
		
		<h3>Change Text</h3>
		<button type="button" onclick="loadDoc('http://www2.nkfust.edu.tw/~shanhuen/JavaScript/ajax_1.json', fun1)">Get JSON</button>
		<button type="button" onclick="loadDoc('http://www2.nkfust.edu.tw/~shanhuen/JavaScript/ajax1_info.txt', fun2)">Get TXT</button>
		
		<div id = "div1">	
		</div>
		
		<script>
			function loadDoc(url, func){
				var xhttp = new XMLHttpRequest();
				xhttp.onreadystatechange = function(){
					if (this.readyState == 4 && this.status == 200){ 
						func(this);
					}
				};
				xhttp.open("GET", url, true);
				xhttp.send();
			}
			function fun1(xhttp) {
				document.getElementById("div1").innerHTML = xhttp.responseText;
			}
			function fun2(xhttp) {
				document.getElementById("div1").innerHTML = xhttp.responseText;
			}
		</script>
	</body>
	</html>

deal XML

使用AJAX取得XML資料

: 建立一個XML並使用AJAX來取得並顯示其中資料。

Ajax3.xml

Ajax_3_xml.html

	<!DOCTYPE html>
	<html>
	<head>
	<title>AJAX XML</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style>
		table, th, td{
			border: 1px solid blue;
			border-collapse: collapse;
		}
		th, td{
			padding: 3px;
		}
		th{
			background: tomato;
			color: gold;
		}
	</style>
	</head>
	<body onload="loadDoc('http://www2.nkfust.edu.tw/~shanhuen/JavaScript/Ajax3.xml', showChar)">
		
		<h3>WOW</h3>
		<!--button type="button" onclick="loadDoc('http://www2.nkfust.edu.tw/~shanhuen/JavaScript/Ajax3.xml', showChar)">Characters</button-->
		<br><br>
		<div id = "div1">	
		</div>
		
		<script>
			function loadDoc(url, func){
				var xhttp = new XMLHttpRequest();
				xhttp.onreadystatechange = function(){
					if (this.readyState == 4 && this.status == 200){ 
						func(this);
					}
				};
				xhttp.open("GET", url, true);
				xhttp.send();
			}
			function showChar(xhttp) {
				var xmlDoc = xhttp.responseXML;
				var table = "<table><tr><th>occupation</th><th>level</th><th>side</th><th>race</th><th>gender</th><th>weapon</th></tr>";
				var x = xmlDoc.getElementsByTagName("role");
				
				for (let i = 0; i < x.length; i++){
					table += "<tr><td>" + x[i].getElementsByTagName("occupation")[0].childNodes[0].nodeValue + "</td><td>" + 
										  x[i].getElementsByTagName("level")[0].childNodes[0].nodeValue + "</td><td>" + 
										  x[i].getElementsByTagName("side")[0].childNodes[0].nodeValue + "</td><td>" + 
										  x[i].getElementsByTagName("race")[0].childNodes[0].nodeValue + "</td><td>" + 
										  x[i].getElementsByTagName("gender")[0].childNodes[0].nodeValue + "</td><td>" + 
										  x[i].getElementsByTagName("weapon")[0].childNodes[0].nodeValue + "</td></tr>";
				}
				table += "</table>";
				document.getElementById("div1").innerHTML = table;
			}
			
		</script>
	</body>
	</html>

使用XMLHttpRequest物件的responseXML取得response xml DOM物件(responseText則傳回response字串)，並使用其getElementsByTagName()取得xml中的tag。
使用getElementsByTagName("role")來取得所有的role，並存成一個array。

JSONP

JSONP是另一個取得伺服器資料的方式，而且此方式不使用XMLHttpRequest物件且不用考慮跨域的問題。

: JSONP使用script來取得資訊，首先建立以下的php檔案。

Ajax_4_jsonp.php

<?php
	$warrior='{"name":"Warr", "level":20, "side":"Aliance", "gender": "Male", "race":"Human"}';
	echo "jFunc(".$warrior.");"
?>

將此檔案放置於C:\xampp\htdocs\WorkSpace資料夾中，也就是說放在伺服器(使用本機當作伺服器)，之後的html檔案要到此讀取資料。
此php內儲存一個物件warrior，記得需在XAMPP Control Panel中activate Apache主機。
接下來建立以下的html檔案。

Ajax_4_jsonp.html

	<!DOCTYPE html>
	<html>
	<head>
		<title>JSONP</title>
		
		<script>
		function jFunc(obj){
			document.getElementById("div1").innerHTML = obj.name;
		}
		var script = document.createElement('script');
		script.src = 'http://XXX.XXX.X.XXX/workspace/Ajax_4_jsonp.php';
		//document.getElementsByTagName('head')[0].appendChild(script);
		document.querySelector('head').appendChild(script);
		</script>

	</head>

	<body>
	<div id="div1">

	</div>
	</body>

	</html>

XXX.XXX.X.XXX是你的電腦IP位址，你可以使用cmd打開DOS，在其中輸入ipconfig指令，會看到IPv4位址。
將檔案執行(或是上傳至你的html主機再執行)，此時雖在不同網域，但仍能取得php檔案內的資料，在html內顯示得到的資料。
定義函數jFunc(obj)，此於php檔內的設定要呼叫的函數名稱相同。
使用document.getElementsByTagName('head')[0]與document.querySelector('head')效果相同。
之後只要修改主機內的資料(php)，顯示端的網頁內容就可跟著改變，與AJAX效果相同。

use JQuery

也可以使用JQuery來處理上述的Ajax與JSONP

: 可以一樣使用Ajax_4_jsonp.php的檔案，或使用內容修改為如下的Ajax_4_jsonp_jquery.php，兩者都可。

Ajax_4_jsonp_jquery.php

jFunc(
	{
		"name":"Warr", "level":20, "side":"Aliance", "gender": "Male", "race":"Human"
	}
)

主要還是名稱訂為jFunc，之後才能使用。
請記得將檔案儲存於C:\xampp\htdocs\WorkSpace資料夾中，並開啟XAMPP之Apache伺服器。
接下來建立以下的html檔案。。

Ajax_4_json_jquery.html

	<!DOCTYPE html>
	<html>
	<head>
		<title>JSONP</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script>
		function jFunc(obj){
				var json = JSON.stringify(obj);
				//document.getElementById("div1").innerHTML = obj.name + "<br>" + obj.level;
				document.getElementById("div1").innerHTML = json;
			}
			
		$.ajax({ // You can have only url & dataType
			type: "get",
			async: false,
			url: "http://XXX.XXX.X.XXX/workspace/Ajax_4_jsonp_jquery.php?callback=?",
			dataType: "jsonp",
			jsonCallback:"jFunc",

		});

		</script>

	</head>

	<body id="body">
	<!--button id = "but">Click</button-->
	<div id="div1">

	</div>
	</body>

	</html>

因為要使用JQuery，所以要記得先納入標頭檔。接著直接使用.ajax並標明type, async, url, dataType, jsonCallback等參數即可。也可以只給url與dataType資訊，其他由程式自行產生。
也可以使用.getJSON來取得伺服器中的JSON資料，如下所示。

Ajax_4_json_jquery1.html

	<!DOCTYPE html>
	<html>
	<head>
		<title>JSONP</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script>
		function jFunc(obj){
				var json = JSON.stringify(obj);
				//document.getElementById("div1").innerHTML = obj.name + "<br>" + obj.level;
				document.getElementById("div1").innerHTML = json;
			}

		$.getJSON(
			"http://XXX.XXX.X.XXX/workspace/Ajax_4_jsonp_jquery.php?callback=?",
		);

		</script>

	</head>

	<body id="body">
	<!--button id = "but">Click</button-->
	<div id="div1">

	</div>
	</body>

	</html>

只在此山中，雲深不知處

聽首歌

AJAX

How it works?

Callback Function

deal XML

JSONP

use JQuery