在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 的基本步驟包括：

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

實際運用一例

以下 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 都是一個寶貴的資源。

在線咨詢

上一篇：使用HTML，CSS和Javascript創建漂亮的懸停觸發的可擴展側邊欄
下一篇：使用 WebGL 為 HTML5 游戲創建逼真的地形

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商