1. JavaScript & AJAX

2. AJAX Asynchronous JavaScript And XML
讀取動作於背後進行，網頁維持原畫面正常運作。
一旦資料從伺服器讀取後，再更新網頁內容。
Ex: gmail, google maps,…

3. XMLHttpRequest Object
var xmlhttp=new XMLHttpRequest();
Method
Description
abort()
Cancels the current request
getAllResponseHeaders()
Returns the complete set of http headers as a string
getResponseHeader("headername")
Returns the value of the specified http header
open("method","URL",async,"uname","pswd")
method: GET, POST, or PUT
URL: a relative or complete URL.
async: true (asynchronously)
false (synchronously)
send(content)
Sends the request
setRequestHeader("label","value")
Adds a label/value pair to the http header to be sent

4. XMLHttpRequest's Properties
Property
Description
onreadystatechange
An event handler for an event that fires at every state change
readyState
Returns the state of the object:
0 = UNSENT 1 = OPENED 2 = HEADERS_RECEIVED 3 = LOADING 4 = DONE
responseText
Returns the response as a string
responseXML
Returns the response as XML. This property returns an XML document object.
status
Returns the status as a number (e.g. 404 for "Not Found" or 200 for "OK")
statusText
Returns the status as a string (e.g. "Not Found" or "OK")
Reference:

5. menu.xml <?xml version="1.0" encoding="UTF-8" ?> <menu>
<item>
<url>
<text>NCNU</text>
</item>
<url>
<text>暨大資管</text>
<url>
<text>暨大 Web Mail</text>
<url>
<text>暨居蟹</text>
</menu>

6. var xmlhttp=new XMLHttpRequest(); window
var xmlhttp=new XMLHttpRequest(); window.onload = function() { try { xmlhttp.open("GET", "menu.xml", true); xmlhttp.onreadystatechange=rsChange; xmlhttp.send(null); } catch(e) { alert(e.message); } function rsChange() { if (xmlhttp.readyState==4) { var vmenu=document.getElementById("vmenu"); var xmenu=xmlhttp.responseXML; var itemArr = xmenu.getElementsByTagName("item"); for (var i=0;i<itemArr.length;i++) { var url=itemArr[i].getElementsByTagName("url")[0].firstChild.nodeValue; var text=itemArr[i].getElementsByTagName("text")[0].firstChild.nodeValue; var li =document.createElement("li"); li.innerHTML='<a href="'+url+'">'+text+'</a>'; vmenu.appendChild(li);

7. var xmlhttp=new XMLHttpRequest();
window.onload = function() {
var url="
try {
xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange=rsChange;
xmlhttp.send(null);
} catch(e) {
alert(e.message); }
function rsChange() {
if (xmlhttp.readyState==4) {
var doc=xmlhttp.responseXML;
nantou(doc);
function nantou(doc) {
var item = doc.getElementsByTagName("item")[0];
var title = item.getElementsByTagName("title")[0].firstChild.nodeValue;
var desc = item.getElementsByTagName("description")[0].firstChild.nodeValue;
document.getElementById("head").innerHTML = title;
document.getElementById("content").innerHTML = desc;