在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小时内与您取得联系。

整合营销服务商