XMLHttpRequest vs. PostBack
זה נכון שכדי לעבוד עם AJAX אנחנו עובדים עם ספריות כמו של ScriptManager או של jQuery, אבל בכל זאת חשבתי לכתוב דוגמא לשימוש ב - XMLHttpRequest לבד.
את הדוגמא אפשר להוריד
מכאן.
נניח שיש לנו מסך שנראה כך:
המשתמש יבחר שם -
במידה והוא לוחץ על הלחצן server אנחנו ניגש לשרת בצורה רגילה (כלומר PostBack) ונביא נתונים אודות המשתמש.
במידה והוא לוחץ על הלחצן xml אנחנו ניגש לשרת בעזרת XMLHttpRequest ונביא את הנתונים.
קוד ה - HTML
<div id='mydiv'></div>
<asp:ListBox ID="name" runat="server">
<asp:ListItem>shlomo</asp:ListItem>
<asp:ListItem>noam</asp:ListItem>
<asp:ListItem>yossi</asp:ListItem>
</asp:ListBox>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Server" />
<input id="Button2" type="button" value="xml" onclick="GetHtml()" />
יש לנו handler שיודע להחזיר html לפי פרמטר בשם name - הנה הקוד שלו
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
if (context.Request["name"] == "shlomo")
{
context.Response.Write("name=shlomo<br/>last name=goldberg<br/>age=25");
}
else if (context.Request["name"] == "noam")
{
context.Response.Write("name=noam<br/>last name=king<br/>age=40");
}
else if (context.Request["name"] == "yossi")
{
context.Response.Write("name=yossi<br/>last name=goldberg<br/>age=23");
}
}
כמו שאתם שמים לב - לפי הפרמטר name ה - handler מייצר קוד html ומוסיף את זה ל - Response.
כעת נראה מה קורה כשהמשתמש ילחץ על הלחצן Server
protected void Button1_Click(object sender, EventArgs e)
{
var x = new Data();
x.ProcessRequest(HttpContext.Current);
}
אנחנו מייצרים מופע של ה - Handler (הוא נקרא Data) ומפעילים את מתודת ProcessRequest שכאמור תוסיף ל - Response את ה - html המתאים. (הפרמטר name נשלח ב - Request היות שה - Id של ה - ListBox הוא name)
כמובן שהלחיצה על הלחצן תעשה PostBack מלא - וכל הדף יתרפרש כדי לייבא את הנתונים.
כעת נראה מה יקרה אם נלחץ על ה - xml
function GetHtml() {
var xhr = new XMLHttpRequest();
var data = '?name=' + document.getElementById('name').value;
var url = 'http://localhost:3319/Data.ashx' + data;
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
document.getElementById('mydiv').innerHTML = xhr.responseText;
}
}
xhr.send(null);
}
בשורה הראשונה אנחנו מייצרים מופע של XMLHttpRequest
לאחריו אנחנו מייצרים queryString שנראה כך:
?name=noam
כמובן שהוא לוקח את הערך מתוך מה שהמשתמש בחר.
נגדיר את ה - url ל - handler ונוסיף את ה - query string
נפתח connection ומגדיר שאנחנו שולחים ב - GET ל - url שהגדרנו ואנחנו רוצים לעשות את זה בצורה אסינכרונית (כלומר לא לחכות לתשובה)
נרשם לאירוע שנקרא onreadystatechange ונגדיר שאם ה - state הוא 4 (כלומר קבלנו תשובה) נכתוב ל - div את ה - html שקבלנו.
ונפעיל את הבקשה בעזרת קריאה ל - send.
כמובן שבשיטה הזאת אין PostBack והכל הרבה יותר מהיר וחסכנו בתעבורה.