前端
<!--PHP编程实战-->
<!--JSON & Ajax -->
<!--15-19-->
<!--向PHP脚本进行Ajax调用的HTML 保存+清除+载入上次绘图-->
<html>
<head>
<title>Drawing Grid Exapmle</title>
<style type="text/css">
#grid, #palette {
padding: 0px;
margin: 0px;
border-collapse: collapse;
}
#palette td, #grid td {
width: 20px;
height: 20px;
}
#grid td {
border: 1px solid #cccccc;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
//生成10*10的表格
for (i = 0; i < 10; ++i) {
$("#grid").append(
"<tr>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"<td> </td>" +
"</tr>"
);
}
//向后台-请求已经保存的数据
$.getJSON("load_drawing.php", function (data) {
$("#grid td").each(function (index) {
$(this).css("background-color", data[index]);
});
});
var active_color = "rgb(0,0,0)";
//调色板onClick事件,用active_color记录
$("#palette td").each(
function (index) {
$(this).bind(
"click",
function () {
active_color = $(this).css("background-color");
$("#debug_palette_color").html("active palette color is: " +
"<span style='width:20px;height:20px;background-color:>" + active_color + ";'>" + active_color + "</span>");
}
)
}
);
//用active_color绘制选中单元格背景色
$("#grid td").each(
function (index) {
$(this).bind(
"click",
function () {
$(this).css("background-color", active_color);
}
)
}
);
$("#clear").click(function () {
$("#grid td").css("background-color", "transparent");
});
$("#save").click(function () {
var colorsAsJson = new Object();
var i = 0;
$("#grid td").each(function () {
colorsAsJson[i] = $(this).css("background-color");
++i;
});
$.ajax(
{
type: "post",
url: "save_drawing.php",
dateType: "text",
data: colorsAsJson,
success: function (data) {
$("#debug_message").html("saved image");
},
failure: function () {
$("#debug_message").html("An error has occured tyring to save the image");
}
}
);
});
})
</script>
</head>
<body>
<p><strong>Palette</strong></p>
<table id="palette">
<tr>
<td style="background-color: rgb(0,0,0);"> </td>
<td style="background-color: rgb(119,119,119);"> </td>
<td style="background-color:rgb(255,255,255);"> </td>
<td style="background-color: rgb(255,0,0);"> </td>
<td style="background-color: rgb(0,255,0);"> </td>
<td style="background-color:rgb(0,0,255);"> </td>
<td style="background-color: rgb(255,255,0);"> </td>
</tr>
</table>
<button id="save">Save</button>
<button id="clear">Clear</button>
<p><strong>Draw!</strong></p>
<table id="grid"></table>
<p><em>Debug console: </em></p>
<div id="debug_palette_color"></div>
</body>
</html>
服务器端
save_drawing.php
<?php
error_reporting(E_ALL);
file_put_contents("image.x", json_encode($_POST));
?>
load_drawing.php
<?php
$filename = "image.x";
if (file_exists($filename)) {
print file_get_contents($filename);
}
?>
重点
- 像素文件保存为json格式.
- 循环网格的每个单元格并给她们赋上相应的背景色.
- 保存前端数据可用 文件 数据库 $_SESSION,这里用文件
保存频率选择
- 每个像素变化,速度慢,资源密集.
- 添加保存按钮,按需保存
- 跟踪每次保存间隔内的变化数量,每发生n此变化后,后台自动保存
总结
- 用来发送Ajax请求最流行的脚本语言是JavaScript
- 与直接处理XMLHttpRequest对象相比,使用高级的API如jQuery,可以让Ajax开发工作更轻松愉快.
- Ajax是一把双刃剑.一方面,Ajax使响应能力和后台数据传输不可能以经典的Web模型实现.另一方面,用户期望有丰富的浏览体验.
- 开发人员需要擅长JavaScript DOM选择器 JSON和XML.
- 反向Ajax涉及HTTP的长连接,由服务器将数据推送到客户端.目的是解决Ajax传统Web模型所带来的一个限制：实时信息很难从技术上解决。WebSocket 技术来自 HTML5，是一种最近才出现的技术，许多浏览器已经支持它（Firefox、Google Chrome、Safari 等等）。WebSocket 启用双向的、全双工的通信信道，其通过某种被称为 WebSocket 握手的 HTTP 请求来打开连接，并用到了一些特殊的报头。连接保持在活动状态，您可以用 JavaScript 来写和接收数据，就像是正在用一个原始的 TCP 套接口一样。
反向Ajax
