Transcript JavaScript & AJAX

JavaScript & AJAX
AJAX




Asynchronous JavaScript And XML
在JavaScript程式中，可以使用http連至伺服器讀
取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
responseText
responseXML
status
statusText
Returns the state of the object:
0 = UNSENT
1 = OPENED
2 = HEADERS_RECEIVED
3 = LOADING
4 = DONE
Returns the response as a string
Returns the response as XML. This property returns an XML
document object.
Returns the status as a number (e.g. 404 for "Not Found" or
200 for "OK")
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>
<item>
<url>http://www.im.ncnu.edu.tw/</url>
<text>暨大資管</text>
</item>
<item>
<url>https://webmail.ncnu.edu.tw/</url>
<text>暨大 Web Mail</text>
</item>
<item>
<url>http://rent.im.ncnu.edu.tw/</url>
<text>暨居蟹</text>
</item>
</menu>
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