Ajax: บันทึกทำ history
Submitted by wd on Tue, 2007-03-20 09:08
Topic:
Ajax มีข้อดีหลายอย่าง แต่ก็มีข้อเสียตรงที่ไม่สามารถใช้งานปุ่ม Back และ Forward ของบราวเซอร์ได้
วิธีแก้ อ่านเจอที่ Really Simple History
เป็นการเก็บค่า page history ไว้ที่เครื่องของ client
ต้องดาวน์โหลดไลบรารีมาไว้ด้วย
$ mkdir -p include; cd include
$ wget http://codinginparadise.org/projects/dhtml_history/dhtmlHistory.js
$ cd ..
สร้างโดยเวลาเรียกเว็บเพจ ต้องให้โปรแกรมทำงานก่อน โดยใช้ <body onload="initialize();">
ดังนี้
<head>
<link rel="stylesheet" type="text/css" href="include/style.css" />
<script type="text/javascript" src="include/dhtmlHistory.js"></script>
<script type="text/javascript">
//SOLVE BACK BUTTON BY ADD HISTORY DHTML
//BEGIN WITH <body onload="initialize();">
//FROM: http://codinginparadise.org/projects/dhtml_history/README.html
var hLocation;
function initialize() {
// initialize our DHTML history
dhtmlHistory.initialize();
// if this is the first time we have loaded the page...
if (dhtmlHistory.isFirstLoad()) {
hLocation = "0";
dhtmlHistory.add(hLocation, document.getElementById("d_main").innerHTML);
}
// add ourselves as a listener for history change events
dhtmlHistory.addListener(handleHistoryChange);
}
/** A function that is called whenever the user presses the back or forward buttons. This
function will be passed the newLocation, as well as any history data we associated
with the location. */
function handleHistoryChange(newLocation, historyData) {
// use the history data to update our UI
updateUI(newLocation, historyData);
/** A simple method that updates our user interface using the new location. */
function updateUI(newLocation, historyData) {
var output = document.getElementById("d_main");
if (historyData == null) {
message = "";
} else {
message = historyData;
}
output.innerHTML = message;
}
function replace(argvalue, x, y) {
//FROM: http://www.tneoh.zoneit.com/javascript/js_func.html
//Substitute a string X to a string Y in an argument.
//Usage: replace("abc123defgh", "123", "ABC");
if ((x == y) || (parseInt(y.indexOf(x)) > -1)) {
errmessage = "replace function error: ";
errmessage += "Second argument and third argument could be the same ";
errmessage += "or third argument contains second argument.";
errmessage += "This will create an infinite loop as it's replaced globally.";
alert(errmessage);
return false;
}
while (argvalue.indexOf(x) != -1) {
var leading = argvalue.substring(0, argvalue.indexOf(x));
var trailing = argvalue.substring(argvalue.indexOf(x) + x.length, argvalue.length);
argvalue = leading + y + trailing;
}
return argvalue;
}
function char2url(arg) {
arg = replace(arg, '\\n', "|_newline_|");
arg = replace(arg, ";", "|_scln_|");
arg = replace(arg, "&", "|_amp_|");
arg = replace(arg, "+", "|_plus_|");
arg = replace(arg, "%", "|_percent_|");
arg = replace(arg, "'", "|_apos_|");
arg = replace(arg, '"', "|_quot_|");
arg = replace(arg, "<", "|_lt_|");
arg = replace(arg, ">", "|_gt_|");
return arg;
}
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest(); //Not IE
} else {
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP"); //IE
} else {
alert("Your browser doesn't support the XmlHttpRequest object. Better upgrade to Firefox.");
}
}
}
var req = getXmlHttpRequestObject();
function d_post(cmd,argv) {
document.getElementById("loading").className = "";
modargv = char2url(argv);
setTimeout( 'xd_post("' + cmd + '","' + modargv + '");' , 10);
}
function xd_post(cmd,argv) {
arg1 = "cmd="+cmd+"/"+argv;
req.open("POST", "?", false);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.send(arg1);
if (cmd=="info" || cmd=="source") {
document.getElementById("d_main").innerHTML = req.responseText;
document.getElementById("loading").className = "hidden";
document.getElementById("search_form").focus();
} else if (cmd=="c2e" || cmd=="e2c") {
document.getElementById("d_main").innerHTML = req.responseText;
document.getElementById("loading").className = "hidden";
document.getElementById("search_form").focus();
}
setTimeout('addHistory()',1);
}
function addHistory() {
hLocation = dhtmlHistory.getCurrentLocation();
hLocation = ""+(parseInt(hLocation)+1)
dhtmlHistory.add(hLocation, document.getElementById("d_main").innerHTML);
}
</script>
</head>
<body onload="initialize();">
<div class="hidden" id="history_counter">1</div>
<div id="testing"></div>
<div id="loading" class="hidden"><p>Loading ... </p></div>
<div class="header"><div id="d_header"><?py print page_header ?></div></div>
<div class="subheader"><div id="d_subheader"><?py print page_subheader ?></div></div>
<div class="two_col">
<?py if page_sidebar_left != "": print '''
<div class="sidebar_left"><div id="d_sidebar_left">
<div class="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="inner">
%s
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</div></div>
''' % (page_sidebar_left) ?>
<?py if page_sidebar_right != "": print '''<div class="sidebar-right"><div id="d_sidebar_right">%s</div></div>''' % (page_sidebar_right) ?>
<div class="main"><div id="testpoint"></div><div id="d_main">
<?py print page_main ?>
</div></div>
<div class="clear"> </div>
</div>
<div class="footer"><div id="d_footer"><?py print page_footer ?></div></div>
</body>
</html>
ตามตัวอย่างจะเก็บประวัติเฉพาะข้อมูลภายในแท็ก <div id="d_main" > โดยจะบันทึกผ่านฟังก์ชั่น dhtmlHistory.add เมื่อมีการเรียกใช้ AJAX ผ่านฟังก์ชั่น d_post
f0nt.com
Recent comments