JavaScript & AJAX

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

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

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: http://web5.w3.org/TR/XMLHttpRequest/

menu.xml <?xml version="1.0" encoding="UTF-8" ?> <menu> <item> <url>http://www.ncnu.edu.tw/</url> <text>NCNU</text> </item> <url>http://www.im.ncnu.edu.tw/</url> <text>暨大資管</text> <url>https://webmail.ncnu.edu.tw/</url> <text>暨大 Web Mail</text> <url>http://rent.im.ncnu.edu.tw/</url> <text>暨居蟹</text> </menu>

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);

var xmlhttp=new XMLHttpRequest(); window.onload = function() { var url="http://www.cwb.gov.tw/rss/forecast/36_10.xml"; 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;

http://www.cwb.gov.tw/rss/forecast/36_10.xml

http://ycchen.im.ncnu.edu.tw/www2011/lab/rsshttp.html http://ycchen.im.ncnu.edu.tw/www2011/lab/rsshttp1.html