前端
<!--PHP編程實(shí)戰(zhàn)-->
<!--JSON & Ajax -->
<!--15-19-->
<!--向PHP腳本進(jìn)行Ajax調(diào)用的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>"
);
}
//向后臺(tái)-請(qǐng)求已經(jīng)保存的數(shù)據(jù)
$.getJSON("load_drawing.php", function (data) {
$("#grid td").each(function (index) {
$(this).css("background-color", data[index]);
});
});
var active_color = "rgb(0,0,0)";
//調(diào)色板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>
服務(wù)器端
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);
}
?>
重點(diǎn)
- 像素文件保存為json格式.
- 循環(huán)網(wǎng)格的每個(gè)單元格并給她們賦上相應(yīng)的背景色.
- 保存前端數(shù)據(jù)可用 文件 數(shù)據(jù)庫 $_SESSION,這里用文件
保存頻率選擇
- 每個(gè)像素變化,速度慢,資源密集.
- 添加保存按鈕,按需保存
- 跟蹤每次保存間隔內(nèi)的變化數(shù)量,每發(fā)生n此變化后,后臺(tái)自動(dòng)保存
總結(jié)
- 用來發(fā)送Ajax請(qǐng)求最流行的腳本語言是JavaScript
- 與直接處理XMLHttpRequest對(duì)象相比,使用高級(jí)的API如jQuery,可以讓Ajax開發(fā)工作更輕松愉快.
- Ajax是一把雙刃劍.一方面,Ajax使響應(yīng)能力和后臺(tái)數(shù)據(jù)傳輸不可能以經(jīng)典的Web模型實(shí)現(xiàn).另一方面,用戶期望有豐富的瀏覽體驗(yàn).
- 開發(fā)人員需要擅長(zhǎng)JavaScript DOM選擇器 JSON和XML.
- 反向Ajax涉及HTTP的長(zhǎng)連接,由服務(wù)器將數(shù)據(jù)推送到客戶端.目的是解決Ajax傳統(tǒng)Web模型所帶來的一個(gè)限制：實(shí)時(shí)信息很難從技術(shù)上解決雾叭。WebSocket 技術(shù)來自 HTML5凑耻，是一種最近才出現(xiàn)的技術(shù)，許多瀏覽器已經(jīng)支持它（Firefox雷恃、Google Chrome、Safari 等等）逻炊。WebSocket 啟用雙向的市咆、全雙工的通信信道，其通過某種被稱為 WebSocket 握手的 HTTP 請(qǐng)求來打開連接愁铺，并用到了一些特殊的報(bào)頭鹰霍。連接保持在活動(dòng)狀態(tài)，您可以用 JavaScript 來寫和接收數(shù)據(jù)茵乱，就像是正在用一個(gè)原始的 TCP 套接口一樣茂洒。
反向Ajax
