הרבה פעמים נשאלת בפורומים השאלה "איך אני יכול לעדכן או לשלוף מידע מבסיס הנתונים מבלי לרענן את הדף"?
מכיוון שעדכון בסיס נתונים נעשה בצד השרת, והשרת בעצם סיים כבר את פעולתו כאשר הדף מוצג ללקוח, לא ניתן לעשות זאת ללא פניה נוספת לשרת. אבל אין זה אומר שחייבים לרענון את הדף.
שתי הטכניקות הנפוצות לביצוע מטרה זו הן שימוש ב-XMLHTTP, או ב-download behavior.
במאמר זה נדגים את השימוש בשיטה השניה – download behavior.
כיצד לעדכן נתונים ללא ריענון עמוד?
כדי לעשות זאת, נשתמש ב download behavior. האלמנט שעליו אנו רוצים להחיל את העדכון ישתמש בקלאס download, הנראה כך:
|
.download {
behavior:url("#default#download");
} |
|
|
נניח שזהו הinput שלנו:
|
<input type="text" name="blah" class="download" /> |
|
|
בעדכון השדה ובעזיבתו, האירוע onchange מופעל. לכן, נוסיף לו את האירוע, שיטפל בעדכון.
אלמנט עם download behavior מקבל מטודה בשם startDownload אשר מקבלת את כתובת העמוד אותו יש לטעון, ורפרנס לפונקציה שמקבלת את המחרוזת של תוכן העמוד המוחזר, אותה יש להפעיל בסיום הטעינה של העמוד.
|
<input type="text" name="blah" class="download"
onchange="fUpdate()" /> |
|
|
והפונקציה fUpdate:
|
function fUpdate() {
var oDL=event.srcElement;
oDL.startDownload(
"update.asp?text="+oDL.value,
function(sText) {
alert("updated to "+sText);
}
);
} |
|
|
בעמוד update.asp אנו נקבל את text כמשתנה עם הערך החדש של השדה, איתו יהיה אפשר לפנות לDB ולעדכן או לעשות ככל העולה על רוחנו
הקוד במלואו:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35 |
|
/*list.asp*/
<html>
<head>
<script language="jscript">
function fUpdate() {
var oDL=event.srcElement;
oDL.startDownload(
"update.asp?text="+oDL.value,
function(sText) {
alert("updated to '"+sText+"'");
}
);
}
</script>
<style>
.download {
behavior:url("#default#download");
}
</style>
</head>
<body>
<input type="text" name="blah" class="download" onchange="fUpdate()" />
</body>
</html>
/*update.asp*/
<%
' Insert into DB
Response.write(Request("text"));
%>
|
|
|
בהצלחה!
Facebook
Twitter
RSS
תגובות בפייסבוק