HTML5特性与社交网开发
超级会员免费看
HTML5 特性与社交网络应用开发
1. Web Workers 与同源策略
Web workers 受同源策略的约束，这意味着如果不采用跨域方法，就无法从与原始脚本不同源的地方加载 web worker。
2. 拖放功能
通过为
ondragstart
、
ondragover
和
ondrop
事件设置事件处理程序，就能轻松支持网页上对象的拖放操作。以下是示例代码：
<!DOCTYPE HTML>
<html>
<head>
<title>Drag and Drop</title>
<script src='OSC.js'></script>
<style>
#dest {
background:lightblue;
border :1px solid #444;
width :320px;
height :100px;
padding :10px;
}
</style>
</head>
<body>
<div id='dest' ondrop='drop(event)' ondragover='allow(event)'></div><br>
Drag the image below into the above element<br><br>
<img id='source1' src='image1.png' draggable='true' ondragstart='drag(event)'>
<img id='source2' src='image2.png' draggable='true' ondragstart='drag(event)'>
<img id='source3' src='image3.png' draggable='true' ondragstart='drag(event)'>
<script>
function allow(event)
{
event.preventDefault()
}
function drag(event)
{
event.dataTransfer.setData('image/png', event.target.id)
}
function drop(event)
{
event.preventDefault()
var data=event.dataTransfer.getData('image/png')
event.target.appendChild(O(data))
}
</script>
</body>
</html>
2.1 代码解析
-
HTML 部分
：设置页面标题，引入
OSC.js文件，对id为dest的<div>元素进行样式设置，包括背景颜色、边框、尺寸和内边距。 -
<body>部分 ：创建<div>元素，并将drop和allow事件处理函数分别附加到其ondrop和ondragover事件上。接着显示一些文本，然后展示三张图片，将它们的draggable属性设置为true，并将drag函数附加到每张图片的ondragstart事件上。 -
<script>部分 ：-
allow事件处理函数：阻止拖动的默认操作（即禁止拖动）。 -
drag事件处理函数：调用事件的dataTransfer对象的setData方法，传入 MIME 类型image/png和事件的target.id（即被拖动的对象）。 -
drop事件处理函数：拦截默认操作，允许放置操作，从dataTransfer对象中获取被拖动对象的内容，然后通过appendChild方法将放置的数据追加到目标（即dest<div>）中。
-
2.2 其他拖放事件
还可以附加其他事件，如
ondragenter
（拖动操作进入元素时触发）、
ondragleave
（拖动操作离开元素时触发）和
ondragend
（拖动操作结束时触发），可用于在这些操作期间修改光标样式。
3. 跨文档消息传递
3.1 背景
在 HTML5 之前，浏览器开发者禁止跨文档脚本编写，这虽然能阻止潜在的攻击站点，但也妨碍了合法页面之间的通信。通常，任何形式的文档交互都必须通过 Ajax 和第三方 Web 服务器来实现，这种方式构建和维护起来既繁琐又麻烦。
3.2 实现方式
现在，Web 消息传递允许脚本通过一些合理的安全限制来跨越这些边界进行交互，以防止恶意黑客攻击。这是通过
postMessage
方法实现的，它允许在单个浏览器内从一个域向另一个域发送纯文本消息。
3.3 示例代码
发送消息
<!DOCTYPE HTML>
<html>
<head>
<title>Web Messaging (a)</title>
<script src='OSC.js'></script>
</head>
<body>
<iframe id='frame' src='07.html' width='360' height='75'></iframe>
<script>
count = 1
setInterval(function()
{
O('frame').contentWindow.postMessage('Message ' + count++, '*')
}, 1000)
</script>
</body>
</html>
接收消息
<!DOCTYPE HTML>
<html>
<head>
<title>Web Messaging (b)</title>
<style>
#output {
font-family:"Courier New";
white-space:pre;
}
</style>
<script src='OSC.js'></script>
</head>
<body>
<div id='output'>Received messages will display here</div>
<script>
window.onmessage = function(event)
{
O('output').innerHTML =
'<b>Origin:</b> ' + event.origin + '<br>' +
'<b>Source:</b> ' + event.source + '<br>' +
'<b>Data:</b> ' + event.data
}
</script>
</body>
</html>
3.4 代码解析
-
发送消息代码
：使用
OSC.js文件引入O函数，创建一个id为frame的<iframe>元素，加载07.html文件。在<script>部分，将变量count初始化为 1，设置一个每秒执行一次的重复间隔，使用postMessage方法发送字符串'Message '以及当前的count值，然后将count递增。postMessage调用附加到<iframe>对象的contentWindow属性上。 -
接收消息代码
：设置一些样式使输出更清晰，创建一个
id为output的<div>元素，用于显示接收到的消息内容。在<script>部分，将一个匿名函数附加到窗口的onmessage事件上，在该函数中显示事件的origin、source和data属性值。
3.5 安全性考虑
-
当前示例中，传递给
postMessage的域值是通配符*，这并不安全。可以将其改为特定的域，如http://localhost，以确保只向从本地服务器加载的文档发送消息。 -
监听程序目前会显示接收到的所有消息，这也不安全。可以使用
if语句限制监听程序对消息的响应，例如：
window.onmessage = function(event)
{
if (event.origin == 'http://localhost')
{
O('output').innerHTML =
'<b>Origin:</b> ' + event.origin + '<br>' +
'<b>Source:</b> ' + event.source + '<br>' +
'<b>Data:</b> ' + event.data
}
}
4. 其他 HTML5 标签
主流浏览器正在采用许多其他新的 HTML5 标签，包括
<article>
、
<aside>
、
<details>
、
<figcaption>
、
<figure>
、
<footer>
、
<header>
、
<hgroup>
、
<mark>
、
<menuitem>
、
<meter>
、
<nav>
、
<output>
、
<progress>
、
<rp>
、
<rt>
、
<ruby>
、
<section>
、
<summary>
、
<time>
和
<wbr>
。可以从
eastmanreference.com
获取这些以及所有其他 HTML5 标签的更多信息。
5. 社交网络应用开发
5.1 项目概述
构建一个简单的社交网络项目，包含 MySQL 表创建、数据库访问、CSS、文件包含、会话控制、DOM 访问、异步调用、事件和错误处理、文件上传、图像操作、HTML5 画布等多种功能。该项目使用 jQuery 和 jQuery Mobile，代码运行速度快、易于使用，能适应各种环境，外观美观。
5.2 项目需求
设计社交网络应用前，确定了以下必要功能：
- 注册流程
- 登录表单
- 注销功能
- 会话控制
- 带有上传缩略图的用户资料
- 成员目录
- 添加成员为好友
- 成员之间的公共和私人消息传递
- 项目样式设计
5.3 项目文件
5.3.1 functions.php
该文件是主要函数的包含文件，还包含数据库登录详细信息。以下是示例代码：
<?php // Example 01: functions.php
$host = 'localhost'; // Change as necessary
$data = 'robinsnest'; // Change as necessary
$user = 'robinsnest'; // Change as necessary
$pass = 'password'; // Change as necessary
$chrs = 'utf8mb4';
$attr = "mysql:host=$host;dbname=$data;charset=$chrs";
$opts =
[
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES => false,
];
try
{
$pdo = new PDO($attr, $user, $pass, $opts);
}
catch (\PDOException $e)
{
throw new \PDOException($e->getMessage(), (int)$e->getCode());
}
function createTable($name, $query)
{
queryMysql("CREATE TABLE IF NOT EXISTS $name($query)");
echo "Table '$name' created or already exists.<br>";
}
function queryMysql($query)
{
global $pdo;
return $pdo->query($query);
}
function destroySession()
{
$_SESSION=array();
if (session_id() != "" || isset($_COOKIE[session_name()]))
setcookie(session_name(), '', time()-2592000, '/');
session_destroy();
}
function sanitizeString($var)
{
global $pdo;
$var = strip_tags($var);
$var = htmlentities($var);
if (get_magic_quotes_gpc())
$var = stripslashes($var);
$result = $pdo->quote($var); // This adds single quotes
return str_replace("'", "", $result); // So now remove them
}
function showProfile($user)
{
if (file_exists("$user.jpg"))
echo "<img src='$user.jpg' style='float:left;'>";
$result = $pdo->query("SELECT * FROM profiles WHERE user='$user'");
while ($row = $result->fetch())
{
die(stripslashes($row['text']) . "<br style='clear:left;'><br>");
}
echo "<p>Nothing to see here, yet</p><br>";
}
?>
5.3.2 主要函数
| 函数名 | 功能 |
|---|---|
createTable
| 检查表格是否已存在，如果不存在则创建表格 |
queryMysql
| 向 MySQL 发出查询，如果失败则输出错误消息 |
destroySession
| 销毁 PHP 会话并清除其数据，实现用户注销 |
sanitizeString
| 从用户输入中移除潜在的恶意代码或标签 |
showProfile
| 如果用户有图像，则显示用户的图像和“关于我”消息 |
5.3.3 header.php
该文件为项目的每个页面提供统一的功能，包含
functions.php
文件。以下是示例代码：
<?php // Example 02: header.php
session_start();
echo <<<_INIT
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href='jquery.mobile-1.4.5.min.css'>
<link rel='stylesheet' href='styles.css'>
<script src='javascript.js'></script>
<script src='jquery-2.2.4.min.js'></script>
<script src='jquery.mobile-1.4.5.min.js'></script>
_INIT;
require_once 'functions.php';
$userstr = 'Welcome Guest';
$randstr = substr(md5(rand()), 0, 7);
if (isset($_SESSION['user']))
{
$user = $_SESSION['user'];
$loggedin = TRUE;
$userstr = "Logged in as: $user";
}
else $loggedin = FALSE;
echo <<<_MAIN
<title>Robin's Nest: $userstr</title>
</head>
<body>
<div data-role='page'>
<div data-role='header'>
<div id='logo'
class='center'>R<img id='robin' src='robin.gif'>bin's Nest</div>
<div class='username'>$userstr</div>
</div>
<div data-role='content'>
_MAIN;
if ($loggedin)
{
echo <<<_LOGGEDIN
<div class='center'>
<a data-role='button' data-inline='true' data-icon='home'
data-transition="slide" href='members.php?view=$user&r=$randstr'>Home</a>
<a data-role='button' data-inline='true' data-icon='user'
data-transition="slide" href='members.php?r=$randstr'>Members</a>
<a data-role='button' data-inline='true' data-icon='heart'
data-transition="slide" href='friends.php?r=$randstr'>Friends</a><br>
<a data-role='button' data-inline='true' data-icon='mail'
data-transition="slide" href='messages.php?r=$randstr'>Messages</a>
<a data-role='button' data-inline='true' data-icon='edit'
data-transition="slide" href='profile.php?r=$randstr'>Edit Profile</a>
<a data-role='button' data-inline='true' data-icon='action'
data-transition="slide" href='logout.php?r=$randstr'>Log out</a>
</div>
_LOGGEDIN;
}
else
?>
5.4 代码解析
-
session_start：启动一个会话，用于跨不同 PHP 文件存储某些值。 - 输出 HTML ：设置每个网页所需的 HTML，包括加载样式表和各种 JavaScript 库。
-
包含函数文件
：包含
functions.php文件，并将默认字符串“Welcome Guest”分配给$userstr。 -
随机字符串
：为变量
$randstr分配一个随机字符串值，用于附加到 URL 上，确保每个新页面请求都来自服务器而不是缓存。 -
检查登录状态
：检查会话变量
user是否当前分配了值。如果是，则用户已登录，将$loggedin设置为TRUE，从会话变量user中获取用户名到 PHP 变量$user中，并相应地更新$userstr；如果用户尚未登录，则将$loggedin设置为FALSE。 -
显示菜单
：根据
$loggedin的值显示两组菜单之一。未登录的菜单仅提供“Home”、“Sign Up”和“Log In”选项，而登录后的版本提供对应用程序功能的完全访问权限。
通过上述内容，我们了解了 HTML5 的一些重要特性，如拖放功能、跨文档消息传递，以及如何开发一个简单的社交网络应用。这些技术能帮助我们创建更动态、更吸引人的网站。
5.5 项目操作流程
以下是社交网络项目的主要操作流程：
graph LR
classDef startend fill:#F5EBFF,stroke:#BE8FED,stroke-width:2px;
classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px;
classDef decision fill:#FFF6CC,stroke:#FFBC52,stroke-width:2px;
A([开始]):::startend --> B{用户是否已登录}:::decision
B -->|是| C(进入主界面):::process
B -->|否| D(显示登录/注册界面):::process
C --> E(可进行成员查看、消息收发等操作):::process
E --> F{是否注销登录}:::decision
F -->|是| G(销毁会话，返回登录/注册界面):::process
F -->|否| E
D --> H{用户选择注册还是登录}:::decision
H -->|注册| I(进行注册流程，创建用户信息):::process
H -->|登录| J(验证用户信息):::process
I --> C
J -->|验证成功| C
J -->|验证失败| D
5.6 注意事项
-
数据库安全
：在
functions.php文件中，使用的数据库用户名和密码示例较为简单，在生产环境中，务必使用更安全的密码，避免数据库被恶意攻击。 - 跨文档消息传递安全 ：在跨文档消息传递时，要注意设置正确的目标域，避免消息被恶意接收，同时对接收的消息进行严格的验证和过滤。
-
缓存问题
：在使用 jQuery 时，为了确保动态内容的更新，使用随机字符串
$randstr附加到 URL 上，避免页面从缓存中加载。
6. 总结
6.1 技术要点回顾
-
HTML5 特性
：掌握了 Web workers 的同源策略、拖放功能的实现、跨文档消息传递的方法以及其他新的 HTML5 标签的应用。
-
拖放功能
：通过设置
ondragstart、ondragover和ondrop事件处理程序，实现了网页上对象的拖放操作。 -
跨文档消息传递
：使用
postMessage方法在不同文档之间传递消息，并通过设置目标域和验证消息来源提高安全性。
-
拖放功能
：通过设置
-
社交网络应用开发
：了解了社交网络应用的设计思路和开发流程，包括数据库操作、会话控制、用户界面设计等。
- 数据库操作 ：使用 PDO 进行 MySQL 数据库的连接和操作，实现了表格的创建、数据的查询等功能。
-
会话控制
：通过
session_start和destroySession函数实现了用户会话的管理。
6.2 应用拓展
可以基于这个简单的社交网络项目进行拓展，例如：
-
增加社交互动功能
：如点赞、评论、分享等，增强用户之间的互动性。
-
优化用户界面
：使用更美观的 CSS 样式和动画效果，提升用户体验。
-
引入第三方服务
：如集成社交媒体登录、支付功能等，丰富应用的功能。
6.3 学习建议
- 实践操作 ：通过实际编写代码，加深对 HTML5 特性和社交网络应用开发的理解。可以按照示例代码进行实践，然后尝试进行一些修改和拓展。
- 参考文档 ：查阅相关的技术文档，如 HTML5 标签的详细说明、jQuery 和 jQuery Mobile 的使用手册等，不断学习和掌握新的知识。
- 交流分享 ：加入技术交流社区，与其他开发者分享经验和心得，解决遇到的问题。
通过学习和实践，我们可以利用 HTML5 技术和相关开发知识，创建出更具吸引力和功能性的社交网络应用，为用户带来更好的体验。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
