整合營銷服務商

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

          免費咨詢熱線:

          在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片无码一区二区不卡电影| 午夜福利av无码一区二区| 久久亚洲国产精品一区二区| 亚洲AV综合色区无码一区| 精品国产一区二区三区AV性色| 无码人妻精品一区二区三区99不卡 | 综合无码一区二区三区| 国产一区二区高清在线播放| 一区二区三区在线视频播放| 一区二区三区在线观看中文字幕| 中文字幕精品亚洲无线码一区| 一区二区国产在线观看| 国产精品亚洲高清一区二区| 成人免费av一区二区三区| 色噜噜AV亚洲色一区二区 | 亚洲另类无码一区二区三区| 亚洲色一区二区三区四区| 国产福利一区二区三区在线视频 | 人妻无码一区二区三区| 亚洲一区二区三区免费| 亚洲一区二区三区无码中文字幕| 一区二区三区午夜视频| 无码国产精品一区二区免费I6| 爆乳无码AV一区二区三区 | 亚洲综合色一区二区三区 | 奇米精品视频一区二区三区| 精品一区精品二区制服|