02-04-2012, 22:06
|
|
|
חבר מתאריך: 25.08.03
הודעות: 9,114
|
|
למיטב הבנתי, במקרה שאתה מתאר, אתה מבקש מהשרת פרטים על מוצר, ואת הפרטים אתה מכניס לתוך אלמנט מסויים.
במקרה כזה, הגיוני שהשרת יחזיר קוד HTML שאינו צריך לעבור עיבוד נוסף על מנת להתאימו לתצוגה, וללא אף עיבוד נוסף על התוכן, להכניסו ישירות לאלמנט הנדרש.
קוד:
<div id="productDetails986"></div>
# HTTP_REQUEST = XMLHttpRequest object - site/productDetails?id=986
document.getElementById("productDetails986").innerHTML = HTTP_REQUEST.responseText;
ישנם מקרים בהם יש לנו טבלת HTML, ואנחנו רוצים להוסיף מס' רשומות, להסיר מס' רשומות, או אף לערוך מס' רשומות.
במקרה כזה, לא נבקש מהשרת את השורות הנוספות כקוד HTML ונכניס את התשובה ישירות לתג tbody באופן שיחליף את כל הרשומות (tbody.innerHTML = HTTP_REQUEST.responseText) או באופן שבו נוסיף את השורות שהתקבלו לשורות הקיימות (tbody.innerHTML += HTTP_REQUEST.responseText) - פעולה שאגב עלולה להיות איטית מאד במידה ולא מדובר במחרוזת קצרה, אלא נשלוף מהשרת את התשובה באופן שבו נוכל לעבד את התשובה באמצעות קוד JS, נעבור על התוכן ונוסיף כל שורה בנפרד.
קוד דוגמה עבור XML:
קוד:
<table id="productsList">
<tbody></tbody>
</table>
var productsTable = document.getElementById("productsList").getElementsByTagName("tbody")[0];
# HTTP_REQUEST = XMLHttpRequest object - site.com/productDetails/986
var products = HTTP_REQUEST.responseXML.getElementsByTagName("product");
var tr;
for(x in products){
tr = document.createElement("div");
tr.innerHTML = "<td>" + products[x].firstChild + "</td><td>" + products[x].firstChild.nextSibling + "</td>";
productsTable.appendChild(tr);
}
לתשומת לב: הקוד נועד להמחיש ולעזור בהסבר, אך יתכן והוא מכיל באגים!
הבאגים העיקריים שיתכנו בקוד: יתכן ובדפדפנים מסויימים לולאת for in x תעבור על שני איברים נוספים שלא תצפה שיהיו קיימים. יצירת ופעולות על אלמנט tr נוסף עלולה להשליך על ה-tr הראשון שנוצר.
לדרך שהצעת ללא שימוש בבקשת XMLHTTP ישנן מס' יתרונות: זה צפוי לפעול כשורה בכל דפדפן מצוי וללא צורך בתמיכה מותאמת, זה יפעל גם במידה וקוד ה-js בכל זאת לא יפעל או לא יפעל כצפוי, המשתמש יכול להחזיק ולשתף את המידע באמצעות קישור ישיר לתוכן וזה טוב גם עבור קידום האתר.
מאידך, זה מכביד על הגלישה.
לכן, הפתרון הטוב ביותר הוא לשלב את שתי האפשרויות.
כברירת מחדל, לחיצה על הקישור תקרא לפונקציה שתגרום להצגת פרטי המוצר ללא צורך בטעינת הדף מחדש. במידה ולא יתגלו תקלות בפונקציה, הפונקציה תחזיר false, על מנת שהקישור לא יפעל.
_____________________________________
בניית אתרים
פיתוח יישומי אינטרנט
שמות תחום, אחסון, עיצוב ושירותים נלווים.
פיתוח, שירות,יעוץ והדרכה.
|