從零開始的畢設--JavaScript-Ajax（2）-GET

阿新 • • 發佈：2018-12-14

DOM處理XML

XML在伺服器記錄的內容，在用GET方法傳回客戶端時，DOM可以把XML當成節點樹處理。我們的blog.xml檔案是這樣的：

<?xml version="1.0" encoding="utf-8"?>
<blog>
  <title>YouCube - The Blog for Cube Puzzlers</title>
  <author>Puzzler Ruby</author>
  <entries>
    <entry>
      <date>08/14/2008</ 
date>
      <body>Got the new cube I ordered. It's a real pearl.</body>
    </entry>
    <entry>
      <date>08/19/2008</date>
      <body>Solved the new cube but of course, now I'm bored and shopping for a new one.</body>
    </entry>
    <entry> 

      <date>08/16/2008</date>
      <body>Managed to get a headache toiling over the new cube. Gotta nap.</body>
    </entry>
    <entry>
      <date>08/21/2008</date>
      <body>Found a 7x7x7 cube for sale online. Yikes! That one could be a beast.</body> 

    </entry>
    <entry>
      <date>08/29/2008</date>
      <body>Met up with some fellow cubers to discuss the prospect of a 7x7x7 cube. Mixed feelings.</body>
    </entry>
    <entry>
      <date>08/27/2008</date>
      <body>Went ahead and ordered the scary 7x7x7 cube. Starting a mental exercise regimen to prepare.</body>
    </entry>
    <entry>
      <date>09/3/2008</date>
      <body>Attended a rally outside of a local toy store that stopped carrying cube puzzles. Power to the puzzlers!</body>
    </entry>
    <entry>
      <date>09/5/2008</date>
      <body>Got the new 7x7x7 cube. Could be my last blog post for a while...</body>
    </entry>
    <entry>
      <date>09/19/2008</date>
      <body>Wow, it took me a month but the new cube is finally solved!</body>
      <image>cube777.png</image>
    </entry>
    <entry>
      <date>09/24/2008</date>
      <body>I dreamed last night a huge cube was chasing me, and it kept yelling my name backwards...Ybur!</body>
    </entry>
    <entry>
      <date>09/26/2008</date>
      <body>These dreams just keep getting weirder...now I'm seeing a cube take itself apart. What <strong>does</strong> it mean?</body>
      <image>cubeapart.png</image>
    </entry>
  </entries>
</blog>

function getText(elem) {
//elem自變數是欲提取內容的元素的名稱
        var text = "";
        if (elem) {
          if (elem.childNodes) {
            for (var i = 0; i < elem.childNodes.length; i++) {
            //通過迴圈，獲取elem的子節點
              var child = elem.childNodes[i];
              if (child.nodeValue)//如果子節點是根節點
                text += child.nodeValue;
              else {  
                if (child.childNodes[0])//如果子節點還有子節點
                  if (child.childNodes[0].nodeValue)//如果孫子節點是根節點
                    text += child.childNodes[0].nodeValue;//取子節點的第一個節點即可。
              }
            }
          }
        }
        return text;
      }

假設XML響應資料已經全部儲存在變數xmlData中，如果要使用xml標籤<author>：

Blog.prototype.signature="by"+getText(xmlData.getElementByTagName("author")[0]);

最後Handler的程式碼：

  // Handle the Ajax request
      function handleRequest() {
        if (ajaxReq.getReadyState() == 4 && ajaxReq.getStatus() == 200) {
          // Store the XML response data
          var xmlData = ajaxReq.getResponseXML().getElementsByTagName("blog")[0];

          // Set the blog-wide signature
          Blog.prototype.signature = "by " + getText(xmlData.getElementsByTagName("author")[0]);


          // Create the array of Blog entry objects
          var entries = xmlData.getElementsByTagName("entry");
          for (var i = 0; i < entries.length; i++) {
            // Create the blog entry
            blog.push(new Blog(getText(entries[i].getElementsByTagName("body")[0]),
              new Date(getText(entries[i].getElementsByTagName("date")[0])),
              getText(entries[i].getElementsByTagName("image")[0])));
          }

          // Enable the blog buttons
          document.getElementById("search").disabled = false;
          document.getElementById("showall").disabled = false;
          document.getElementById("viewrandom").disabled = false;

          // Show the blog
          showBlog(5);
        }else {
          alert(ajaxReq.getReadyState()+" :"+ajaxReq.getStatus());
        }
      }

從零開始的畢設--JavaScript-Ajax（2）-GET

DOM處理XML XML在伺服器記錄的內容，在用GET方法傳回客戶端時，DOM可以把XML當成節點樹處理。我們的blog.xml檔案是這樣的： <?xml version="1.0" encoding="utf-8"?> <blog>

從零開始的畢設--JavaScript-Ajax（3）-POST

// Global Ajax request var ajaxReq = new AjaxRequest(); // Add a new blog entry to an XML doc on the server using Ajax function a

從零開始學 Web 之 Ajax（三）Ajax 概述，快速上手

lan 技術分享 php 概述由於 val asc logs 更新大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：ht

從零開始學 Web 之 Ajax（五）同步異步請求，數據格式

遊記 document 空閑 name center 20px 實現 resp 也會大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之

從零開始學 Web 之 Ajax（六）jQuery中的Ajax

var 技術分享 else parse cnblogs 我會 clas alt jquer 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web

從零開始學 Web 之 Ajax（五）同步非同步請求，資料格式

一、同步請求與非同步請求同步請求：在使用者進行請求傳送之後，瀏覽器會一直等待伺服器的資料返回，如果網路延遲比較高，瀏覽器就一直卡在當前介面，直到伺服器返回資料才可進行其他操作。非同步請求：在使用者進行請求傳送之後，瀏覽器可以自由操作頁面中其他的元素，當伺服器放回資料的時候，才觸發相應事件，對返回的資料

從零開始學 Web 之 Ajax（二）PHP基礎語法

一、PHP 基礎語法 1、基本結構所有PHP程式碼都要寫到 <?php ... ?> 裡面。 PHP檔案可以和 HTML 檔案結合進行使用。 PHP檔案的預設副檔名是 ".php"。 PHP程式碼必須在伺服器上執行。 2、列印語句 echo：的作用在頁面中輸入字串（只能列印字串，數字等

從零開始學 Web 之 Ajax（四）介面文件，驗證使用者名稱唯一性案例

>大家好，這裡是「從零開始學 Web 系列教程」，並在下列地址同步更新...... > > - github：https://github.com/Daotin/Web > - 微信公眾號：[Web前端之巔](https://github.com/Daotin/pi

從零開始學 Web 之 Ajax（一）伺服器相關概念

一、伺服器和客戶端伺服器和客戶端都是電腦，在硬體層面上沒有明顯的劃分，配置很差的個人電腦任然可以作為伺服器。伺服器如果想對外提供服務，必須安裝相應的軟體，所以不是伺服器這臺電腦可以提供服務，而是其安裝的軟體提供的服務。比如： HTTP網頁服務：Apache，Tomcat，IIS等檔案上傳下載服務：V

從零開始學 Web 之 Ajax（七）跨域

一、跨域跨域這個概念來自一個叫 “同源策略” 的東西。同源策略是瀏覽器上為了安全考慮實施的非常重要的安全機制。 Ajax 預設只能獲取到同源的資料，對於非同源的資料，Ajax是獲取不到的。什麼是同源？協議、域名、埠全部相同。如果使用 Ajax 獲取非同源的資料，會報錯，報錯資訊如下： Fail

不容錯過，最全的安卓架構合集【從零開始搭建android框架系列（2）】

安卓架構文章合集（a collection of android Architecture）部落格原地址：簡書部落格 github地址：這是從各大平臺上參考的android架構文章，文章資料，主要參考自Info，推薦關注： infoQ 1 Android

從零開始搞後臺管理系統（2）——shin-server

shin 的讀音是[ʃɪn]，諧音就是行，寓意可行的後端系統服務，shin-server 的特點是：站在巨人的肩膀上，依託KOA2、bunyan、Sequelize等優秀的框架和庫所搭建的定製化後端系統服務。一套完整的 Node.js 後端服務解決方案。除錯便捷，實時打印出各類

從零開始的畢設--HTML&&CSS（2）

瀏覽器和表單到目前為止，所有Web通訊都是單向的:只是從頁面到訪問者。要使用到表單，就需要了解<form>元素。如下：那麼<form>元素是如何工作的呢？ <form action="http://xxx.com/con

從零開始搭建android框架系列（轉）

bsp andro hup 開始 blank class and lan com 網址：從零開始搭建android框架系列 githup：https://github.com/CameloeAnthony/Ant從零開始搭建android框架系列（轉）

從零開始學Kotlin-控制語句（4）

系列文章 ren kcon tin else andro 格式當前 break 從零開始學Kotlin基礎篇系列文章條件控制-if var a=10 var b=20 if(a>b) print(a)

從零開始學Kotlin-枚舉（9）

emc roi 實例 list cnblogs 外部 listener ring 枚舉從零開始學Kotlin基礎篇系列文章枚舉的定義一個類的對象是有限且固定的，這種實例有限且固定的類稱為枚舉類; 枚舉常量用逗號分隔,每個枚舉常量都是一個對象; enum class

從零開始學 Web 之 DOM（一）DOM的概念，對標簽操作

關註 1.5 pan 什麽 tin p標簽 nod text == 大家好，這裏是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，

從零開始學 Web 之 DOM（四）節點

def clas scrip while p標簽設置 ner 操作 text 大家好，這裏是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相

從零開始學 Web 之 BOM（三）offset，scroll，變速動畫函數

樣式清理 java mar dde sof mov har width 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：

從零開始學 Web 之 jQuery（二）獲取和操作元素的屬性

eight images idt 隱藏 lis 屬性 ner master lin 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔

從零開始的畢設--JavaScript-Ajax（2）-GET

DOM處理XML

相關推薦