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
$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 = 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 是一種瀏覽器與服務器進行數據交換的 API。盡管它的名字包含 “XML”,XHR 實際上支持多種數據格式,如 JSON、HTML 和純文本等。初期,它主要用于處理 XML 格式數據,但隨著時間的發展,XHR 的功能已經大為擴展。
使用 XML HttpRequest 的基本步驟包括:
以下 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 提供了持續與服務器通信的能力。
雖然 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 都是一個寶貴的資源。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。