整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          在html中直接插入svg圖像實例

          SVG(Scalable Vector Graphics)是一種基于XML的2D矢量圖形格式,可以實現圖像的無損縮放和高清晰度顯示。在HTML中嵌入SVG圖像,可以使網頁更加生動有趣,提高用戶體驗
          
          <svg width="54" height="54" class="c-nav--footer__svgicon c-slackhash" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg">
          <g fill="none" fill-rule="evenodd">
          <path d="M19.712.133a5.381 5.381 0 0 0-5.376 5.387 5.381 5.381 0 0 0 5.376 5.386h5.376V5.52A5.381 5.381 0 0 0 19.712.133m0 14.365H5.376A5.381 5.381 0 0 0 0 19.884a5.381 5.381 0 0 0 5.376 5.387h14.336a5.381 5.381 0 0 0 5.376-5.387 5.381 5.381 0 0 0-5.376-5.386" fill="#44BEDF">
          </path>
          <path d="M53.76 19.884a5.381 5.381 0 0 0-5.376-5.386 5.381 5.381 0 0 0-5.376 5.386v5.387h5.376a5.381 5.381 0 0 0 5.376-5.387m-14.336 0V5.52A5.381 5.381 0 0 0 34.048.133a5.381 5.381 0 0 0-5.376 5.387v14.364a5.381 5.381 0 0 0 5.376 5.387 5.381 5.381 0 0 0 5.376-5.387" fill="#2EB67D">
          </path>
          <path d="M34.048 54a5.381 5.381 0 0 0 5.376-5.387 5.381 5.381 0 0 0-5.376-5.386h-5.376v5.386A5.381 5.381 0 0 0 34.048 54m0-14.365h14.336a5.381 5.381 0 0 0 5.376-5.386 5.381 5.381 0 0 0-5.376-5.387H34.048a5.381 5.381 0 0 0-5.376 5.387 5.381 5.381 0 0 0 5.376 5.386" fill="#ECB22E">
          </path>
          <path d="M0 34.249a5.381 5.381 0 0 0 5.376 5.386 5.381 5.381 0 0 0 5.376-5.386v-5.387H5.376A5.381 5.381 0 0 0 0 34.25m14.336-.001v14.364A5.381 5.381 0 0 0 19.712 54a5.381 5.381 0 0 0 5.376-5.387V34.25a5.381 5.381 0 0 0-5.376-5.387 5.381 5.381 0 0 0-5.376 5.387" fill="#E01E5A">
          </path>
          </g>
          </svg>
          

          實從PHP5開始,PHP就為我們提供了一個強大的解析和生成XML相關操作的類,也就是我們今天要講的 DOMDocument 類。不過我估計大部分人在爬取網頁時還是會喜歡用正則去解析網頁內容,學了今天的這個類下回就可以嘗試下使用這個PHP自帶的方式來進行解析分析了。

          解析HTML

          // 解析 HTML
          $baidu = file_get_contents('https://www.baidu.com');
          
          $doc = new DOMDocument();
          @$doc->loadHTML($baidu);
          
          // 百度輸出框
          $inputSearch = $doc->getElementById('kw');
          var_dump($inputSearch);
          
          // object(DOMElement)#2 
          //     ....
          
          echo $inputSearch->getAttribute('name'), PHP_EOL; // wd
          
          // 獲取所有圖片的鏈接
          $allImageLinks = [];
          $imgs = $doc->getElementsByTagName('img');
          foreach($imgs as $img){
              $allImageLinks[] = $img->getAttribute('src');
          }
          
          print_r($allImageLinks);
          
          // Array
          // (
          //     [0] => //www.baidu.com/img/baidu_jgylogo3.gif
          //     [1] => //www.baidu.com/img/bd_logo.png
          //     [2] => http://s1.bdstatic.com/r/www/cache/static/global/img/gs_237f015b.gif
          // )
          
          // 利用 parse_url 分析鏈接
          foreach($allImageLinks as $link){
              print_r(parse_url($link));
          }
          
          // Array
          // (
          //     [host] => www.baidu.com
          //     [path] => /img/baidu_jgylogo3.gif
          // )
          // Array
          // (
          //     [host] => www.baidu.com
          //     [path] => /img/bd_logo.png
          // )
          // Array
          // (
          //     [scheme] => http
          //     [host] => s1.bdstatic.com
          //     [path] => /r/www/cache/static/global/img/gs_237f015b.gif
          // )
          

          是不是感覺好清晰,好有面向對象的感覺。就像第一次使用 ORM庫 來進行數據庫操作一樣的感覺。我們一段一段來看。

          $baidu = file_get_contents('https://www.baidu.com');
          
          $doc = new DOMDocument();
          @$doc->loadHTML($baidu);
          

          首先是加載文檔內容,這個比較好理解,直接使用 loadHTML() 方法加載 HTML 內容。它還提供了其它的幾個方法,分別是:load() 從一個文件加載XML;loadXML() 從字符串加載XML;loadHTMLFile() 從文件加載HTML。

          // 百度輸出框
          $inputSearch = $doc->getElementById('kw');
          var_dump($inputSearch);
          
          // object(DOMElement)#2 
          //     ....
          
          echo $inputSearch->getAttribute('name'), PHP_EOL; // wd
          

          接下來我們使用和前端 JS 一樣的 DOM 操作API來操作HTML里面的元素。這個例子中就是獲取百度的文本框,直接使用 getElementById() 方法獲得id為指定內容的 DOMElement 對象。然后就可以獲取它的值、屬性之類的內容了。

          // 獲取所有圖片的鏈接
          $allImageLinks = [];
          $imgs = $doc->getElementsByTagName('img');
          foreach($imgs as $img){
              $allImageLinks[] = $img->getAttribute('src');
          }
          
          print_r($allImageLinks);
          
          // Array
          // (
          //     [0] => //www.baidu.com/img/baidu_jgylogo3.gif
          //     [1] => //www.baidu.com/img/bd_logo.png
          //     [2] => http://s1.bdstatic.com/r/www/cache/static/global/img/gs_237f015b.gif
          // )
          
          // 利用 parse_url 分析鏈接
          foreach($allImageLinks as $link){
              print_r(parse_url($link));
          }
          
          // Array
          // (
          //     [host] => www.baidu.com
          //     [path] => /img/baidu_jgylogo3.gif
          // )
          // Array
          // (
          //     [host] => www.baidu.com
          //     [path] => /img/bd_logo.png
          // )
          // Array
          // (
          //     [scheme] => http
          //     [host] => s1.bdstatic.com
          //     [path] => /r/www/cache/static/global/img/gs_237f015b.gif
          // )
          

          這一段例子則是獲取HTML文檔中所有的圖片鏈接。相比正則來說,是不是方便很多,而且代碼本身就是自解釋的,不用考慮正則的匹配失效的問題。配合另外一個PHP中自帶的 parse_url() 方法也能非常方便地對鏈接進行分析,提取自己想要的內容。

          XML的解析和對HTML的解析也是類似的,都使用 DOMDocument 和 DOMElement 提供的這個方法接口就可以很方便的進行解析了。那么我們想要生成一個標準格式的XML呢?當然也非常的簡單,不需要再去拼接字符串了,使用這個類一樣的進行對象化的操作。

          生成一個XML

          // 生成一個XML文檔
          $xml = new DOMDocument('1.0', 'UTF-8');
          
          $node1 = $xml->createElement('First', 'This is First Node.');
          $node1->setAttribute('type', '1');
          
          $node2 = $xml->createElement('Second');
          $node2->setAttribute('type', '2');
          $node2_child = $xml->createElement('Second-Child', 'This is Second Node Child.');
          $node2->appendChild($node2_child);
          
          $xml->appendChild($node1);
          $xml->appendChild($node2);
          print $xml->saveXML();
          
          /*
          <?xml version="1.0" encoding="UTF-8"?>
          <First type="1">This is First Node.</First>
          <Second type="2"><Second-Child>This is Second Node Child.</Second-Child></Second>
          */
          

          其實只要有一點點的前端 JS 的基礎都不難看出這段代碼的含義。使用 createElement() 方法創造 DOMElement 對象,然后就可以為它添加屬性和內容。使用 appendChild() 方法就可以為當前的 DOMElement 或者 DOMDocument 添加下級節點。最后使用 saveXML() 就能夠生成標準的XML格式內容了。

          總結

          通過上面兩個簡單的小例子,相信大家已經對這個 DOMDocument 操作XML類文件解析的方式非常感興趣了。不過相對于正則解析的方式它們的性能有多大的差異并沒有找到相關的測試,不過一般正常的情況下網站的HMTL文檔都不會太大,畢竟各個網站也會考慮自身的加載速度,如果文檔非常大的話用戶體驗也會很差,所以這套接口用來進行日常爬蟲的分析處理工作基本是沒有任何問題的。

          測試代碼: https://github.com/zhangyue0503/dev-blog/blob/master/php/202002/source/PHP%E4%B8%AD%E4%BD%BF%E7%94%A8DOMDocument%E6%9D%A5%E5%A4%84%E7%90%86HTML%E3%80%81XML%E6%96%87%E6%A1%A3.php

          參考文檔: https://www.php.net/manual/zh/class.domdocument.php

          ML HttpRequest(XHR) 技術是構建動態、響應式網站的關鍵。這項技術使得網頁能在不重新加載整個頁面的情況下與服務器進行數據交互,極大地優化了用戶的交互體驗。

          • XML HttpRequest 是什么?詳細講解其用法

          定義 XML HttpRequest

          XML HttpRequest 是一種瀏覽器與服務器進行數據交換的 API。盡管它的名字包含 “XML”,XHR 實際上支持多種數據格式,如 JSON、HTML 和純文本等。初期,它主要用于處理 XML 格式數據,但隨著時間的發展,XHR 的功能已經大為擴展。

          • 什么是 JSON?JSON 文件是干什么的

          工作流程分析

          使用 XML HttpRequest 的基本步驟包括:

          1. 初始化對象:創建一個新的 XML HttpRequest 對象實例。
          2. 配置請求:通過調用 .open() 方法設置請求方法(例如 GET 或 POST)和目標 URL。
          3. 執行發送:利用 .send() 方法發起請求,該方法中可以包含需要發送的數據。
          4. 監聽并處理返回:通過事件監聽器處理來自服務器的響應。

          實際運用一例

          以下 JavaScript 代碼演示了如何通過 XML HttpRequest 發起一個 GET 請求:

          // 初始化一個XML HttpRequest對象
          var xhr = new XML HttpRequest();
          
          // 設置請求的方法和URL
          xhr.open('GET', 'https://api.example.com/data', true);
          
          // 定義響應的處理邏輯
          xhr.onreadystatechange = function() {
              if (xhr.readyState === 4 && xhr.status === 200) {
                  console.log(xhr.responseText); // 輸出響應數據
              }
          };
          
          // 執行請求
          xhr.send();
          

          在此示例中,我們配置了請求和如何在接收到響應后處理數據。

          主要使用場景

          動態內容加載

          XML HttpRequest 允訟網頁動態地加載和顯示數據,而無需刷新頁面,提高了網站的整體性能和用戶體驗。

          異步表單提交

          使用 XHR,表單數據可以異步提交,從而避免頁面刷新,用戶可以無縫繼續他們的網站活動。

          實時數據交互

          對于需要頻繁更新數據的應用,如實時報表或聊天應用,XHR 提供了持續與服務器通信的能力。

          優點與挑戰

          優勢

          • 用戶體驗提升:異步通信意味著更快的響應時間和無干擾的用戶界面。
          • 效率高:只傳輸必需的數據,減輕了服務器負擔。
          • 高度兼容性:支持多種數據格式和跨平臺使用。

          挑戰

          • 代碼復雜度:管理異步邏輯,需處理多種可能的執行路徑和錯誤。
          • 安全考量:需警惕 XSS 等安全漏洞。
          • 對舊版本IE的支持:較老IE版本中實現 XHR 的方式有所不同。

          現代 Web 開發的替代技術

          • 如何在 React 中使用 Fetch API

          雖然 Fetch API 在現代 Web 開發中逐漸成為新的標準,提供了更簡潔的 API 和更好的錯誤處理機制,Fetch 的使用示例如下:

          fetch('https://api.example.com/data')
              .then(response => response.json())
              .then(data => console.log(data))
              .catch(error => console.error('Error:', error));
          

          Fetch 基于 Promises,簡化了處理異步操作的復杭性。

          總結

          XML HttpRequest 是 Web 開發者必須掌握的重要工具之一。盡管有更現代的技術如 Fetch API,了解 XHR 仍對處理舊項目或理解 Web 開發的歷史背景非常有用。無論是更新現有的網站還是開發新的應用,XHR 都是一個寶貴的資源。


          主站蜘蛛池模板: 久久一区二区免费播放| 日韩精品一区二区三区影院| 亚洲AV无码一区二区大桥未久| 无码人妻aⅴ一区二区三区| 亚洲午夜精品第一区二区8050| 99精品国产一区二区三区2021 | 精品久久久久久无码中文字幕一区| 国产凹凸在线一区二区| 爆乳熟妇一区二区三区| 无码日韩精品一区二区人妻| 成人免费视频一区二区三区| 亚洲欧美日韩一区二区三区在线| 人妻av无码一区二区三区| 久久精品一区二区免费看| 国产乱码精品一区二区三区中文| 久久精品无码一区二区日韩AV| 国产亚洲综合一区二区三区| 成人一区专区在线观看| 麻豆AV天堂一区二区香蕉| 性盈盈影院免费视频观看在线一区| 中字幕一区二区三区乱码| 97久久精品无码一区二区 | eeuss鲁片一区二区三区| 色狠狠色狠狠综合一区| 无码播放一区二区三区| 在线精品一区二区三区| 国模精品一区二区三区视频| 免费一区二区三区四区五区| 福利片福利一区二区三区| 国产一区二区三区四| 亚洲AV无码一区二三区| 中文字幕一区二区三区视频在线| 在线精品亚洲一区二区三区| 国产一区二区精品久久| 亚洲一区二区三区四区视频| 日本一区二区三区不卡视频| 国产一区二区三区在线电影| 国产午夜三级一区二区三 | 精品一区二区三区高清免费观看 | 中文字幕精品一区影音先锋 | 久久精品国产一区|