• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,055
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
24
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. JavaScript & AJAX
  • 2. AJAX
    • Asynchronous JavaScript And XML
    • 在 JavaScript 程式中,可以使用 http 連至伺服器讀取 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 Reference: http://web5.w3.org/TR/XMLHttpRequest/ 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")
  • 5. menu.xml <?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?> <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>
  • 6.
    • var xmlhttp=new XMLHttpRequest();
    • window.onload = function() {
    • try {
    • xmlhttp.open(&quot;GET&quot;, &quot;menu.xml&quot;, true);
    • xmlhttp.onreadystatechange=rsChange;
    • xmlhttp.send(null);
    • } catch(e) {
    • alert(e.message);
    • }
    • }
    • function rsChange() {
    • if (xmlhttp.readyState==4) {
    • var vmenu=document.getElementById(&quot;vmenu&quot;);
    • var xmenu=xmlhttp.responseXML;
    • var itemArr = xmenu.getElementsByTagName(&quot;item&quot;);
    • for (var i=0;i<itemArr.length;i++) {
    • var url=itemArr[i].getElementsByTagName(&quot;url&quot;)[0].firstChild.nodeValue;
    • var text=itemArr[i].getElementsByTagName(&quot;text&quot;)[0].firstChild.nodeValue;
    • var li =document.createElement(&quot;li&quot;);
    • li.innerHTML='<a href=&quot;'+url+'&quot;>'+text+'</a>';
    • vmenu.appendChild(li);
    • }
    • }
    • }
  • 7. var xmlhttp=new XMLHttpRequest(); window.onload = function() { var url=&quot;http://www.cwb.gov.tw/rss/forecast/36_10.xml&quot;; try { xmlhttp.open(&quot;GET&quot;, 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(&quot;item&quot;)[0]; var title = item.getElementsByTagName(&quot;title&quot;)[0].firstChild.nodeValue; var desc = item.getElementsByTagName(&quot;description&quot;)[0].firstChild.nodeValue; document.getElementById(&quot;head&quot;).innerHTML = title; document.getElementById(&quot;content&quot;).innerHTML = desc; } http://www.im.ncnu.edu.tw/ycchen/www2010/lab/xmlhttp.html
  • 8. http://www.cwb.gov.tw/rss/forecast/36_10.xml
  • 9. http://www.im.ncnu.edu.tw/ycchen/www2010/lab/rsshttp.html
  • 10.  
  • 11. Internet Explorer 5 and 6
    • var xmlhttp=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);
    var xmlhttp; function loadXMLDoc(url) { xmlhttp=null; if (window.XMLHttpRequest) { // code for all new browsers    xmlhttp=new XMLHttpRequest(); } else if (window.ActiveXObject) { // code for IE5 and IE6    xmlhttp=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); } if (xmlhttp!=null) {    xmlhttp.onreadystatechange=state_Change;    xmlhttp.open(&quot;GET&quot;,url,true);    xmlhttp.send(null); } else    alert(&quot;Your browser does not support XMLHTTP.&quot;); } function state_Change() { if (xmlhttp.readyState==4) { // 4 = &quot;loaded&quot;    if (xmlhttp.status==200) { // 200 = OK      // ...our code here...     } else      alert(&quot;Problem retrieving XML data&quot;);   } }