עדכוני עמוד דינאמיים באמצעות XMLHTTP

עדכוני עמוד דינאמיים באמצעות XMLHTTP

כדי להתאים אישית עמודה זו לצרכיך, אנו מעוניינים להזמין אותך לשלוח את הרעיונות שלך לגבי נושאים המעניינים אותך ובעיות שברצונך לראות כתובות במאמרים עתידיים של Knowledge Base ולתמוך בעמודות קוליות. באפשרותך לשלוח את הרעיונות והמשוב שלך באמצעות הטופס ' בקש '. יש גם קישור לטופס בחלק התחתון של עמודה זו.

מבט כללי

XMLHTTP פועל על-ידי שליחת בקשה לשרת האינטרנט מהלקוח והחזרת אי של נתוני XML. בהתאם למבנה ה-XML המתקבל, באפשרותך להשתמש ב-XSLT או ב-XML DOM כדי לטפל בו ולאגד חלקים של הדף לנתונים אלה. זוהי טכניקה רבת-עוצמה.

NoteMicrosoft מציע אופן פעולה של שירות אינטרנט עבור Internet Explorer המאפשר שיחות אסינכרוניות ל-ASP.NET Web services במהירות ובקלות. עם זאת, אופן פעולה זה אינו נתמך ואין זו הדרך הטובה ביותר לעדכן עמוד באופן אסינכרוני. עליך להשתמש ב-XMLHTTP במקום זאת!


בדוגמה אני אעבוד בעמודה זו, אני אעשה שלושה שיחות שירות אינטרנט לשירות אינטרנט של ASP.NET באמצעות XMLHTTP. שירות האינטרנט מבצע שאילתה במסד הנתונים של Northwind בשרת SQL המקומי והוא מחזיר ערכת נתונים ללקוח בתבנית של diffgram XML. לאחר מכן, אשתמש ב-XML DOM כדי לנתח נתוני XML אלה ולעדכן באופן דינאמי חלקים מהדף שלי. כל זה יתבצע ללא הודעה בחזרה.

שירות האינטרנט

שירות האינטרנט שבו אני משתמש נקרא DynaProducts. זהו שירות אינטרנט בסיסי של ASP.NET הכתוב ב-Cושמכיל את שלוש השיטות הבאות.

• GetCategories – החזרת ערכת נתונים המכילה את כל הקטגוריות בטבלה קטגוריות.
  

• GetProducts – החזרת ערכת נתונים המכילה את כל המוצרים של הקטגוריה המועברים לפעולת השירות.
  

• GetProductDetails – החזרת ערכת נתונים המכילה פרטים על המוצר שמוצר ה-ProductID שלו מועבר לפעולת השירות.
  

דף ה-HTML

הדבר הראשון שעשוי לפגוע בך לגבי דוגמה זו הוא שהדף שאני מעדכן למרות ששירות האינטרנט של ASP.NET אינו דף ASP.NET. זהו רק דף HTML רגיל. עם זאת, הוספתי את הסכום ההוגן של JavaScript בצד הלקוח לעמוד, והסקריפט שעושה את השיחות לשירות האינטרנט.



הבה נבחן את הקטע הראשון של הקוד מתוך דף ה-HTML.

var objHttp;
var objXmlDoc;

function getDataFromWS(methodName, dataSetName, wsParamValue, wsParamName)
{

    // create the XML object
    objXmlDoc = new ActiveXObject("Msxml2.DOMDocument");

    if (objXmlDoc == null)
    {
        alert("Unable to create DOM document!");

    } else {

    // create an XmlHttp instance
    objHttp = new ActiveXObject("Microsoft.XMLHTTP");


    // Create the SOAP Envelope
    strEnvelope = "<soap:Envelope xsi=\"http://www.w3.org/2001/XMLSchema-instance\"" +

            " xsd=\"http://www.w3.org/2001/XMLSchema\"" +

            " soap=\"http://schemas.xmlsoap.org/soap/envelope/\">" +

            "  <soap:Body>" +

            "    <" + methodName + " xmlns=\"http://jimcoaddins.com/DynaProducts\">" +

            "    </" + methodName + ">" +

            "  </soap:Body>" +

            "</soap:Envelope>";


    // Set up the post
    objHttp.onreadystatechange = function(){

        // a readyState of 4 means we're ready to use the data returned by XMLHTTP
        if (objHttp.readyState == 4)
        {

            // get the return envelope
            var szResponse = objHttp.responseText;

            // load the return into an XML data island
            objXmlDoc.loadXML(szResponse);

            if (objXmlDoc.parseError.errorCode != 0) {
                var xmlErr = objXmlDoc.parseError;
                alert("You have error " + xmlErr.reason);
            } else {

                switch(dataSetName)
                {
                    case "CategoriesDS":
                        processCategory();
                        break;

                    case "ProductsDS":
                        processProducts();
                        break;

                    case "ProductDetailDS":
                        processProductDetails();
                        break;

                }
            }

        }
     }

    var szUrl;
    szUrl = "http://dadatop/wsXmlHttp/DynaProducts.asmx/" + methodName;

    if (wsParamValue != null)
    {

        szUrl += "?" + wsParamName + "=" + wsParamValue;
    }

    // send the POST to the Web service
    objHttp.open("POST", szUrl, true);
    objHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    objHttp.send(strEnvelope);
  }
}

זהו פריט הקוד הגדול ביותר מהעמוד, וברצוני לעבור עליו בפרוטרוט כדי שתבין מה קורה.



בחלק העליון של בלוק script זה, יצרתי שני משתנים: objHttp ו-objXmlDoc. אלה המשתנים שאני משתמש בהם עבור אובייקט XMLHTTP שלי ואובייקט XML DOM שלי. מיד לאחר מכן זוהי הגדרת הפונקציה עבור הפונקציה getDataFromWS. זוהי הפונקציה האחראית להפיכת השיחה בצד הלקוח לשירות האינטרנט. נדרשות ארבע הארגומנטים הבאים, שניים מהם הם אופציונליים:

• methodName – שם שיטת התקשרות בשירות האינטרנט.
  

• dataSetName – שם ערכת הנתונים המוחזרת על-ידי שירות האינטרנט.
  

• wsParamValue – ערך הפרמטר המועבר לשירות האינטרנט אם הוא ישים. אופציונלי
  

• wsParamName – שם הפרמטר שמועבר לשירות האינטרנט אם הוא ישים. אופציונלי
  

הבה נשבור את הפונקציה getDataFromWS לחלקים ונדון בכל אחד מהם. להלן הגזירה הראשונה:

// create the XML object
    objXmlDoc = new ActiveXObject("Msxml2.DOMDocument");

    if (objXmlDoc == null)
    {
    alert("Unable to create DOM document!");

    } else {

// create an XMLHTTP instance
objHttp = new ActiveXObject("Microsoft.XMLHTTP");

בלוק קוד זה יוצר את אובייקט XMLHTTP ואת אובייקט מסמך ה-XML. לאחר מכן, אני מתחיל ליצור את מעטפת הסבון.

// Create the SOAP Envelope
strEnvelope = "<soap:Envelope xsi=\"http://www.w3.org/2001/XMLSchema-instance\"" +

          " xsd=\"http://www.w3.org/2001/XMLSchema\"" +

          " soap=\"http://schemas.xmlsoap.org/soap/envelope/\">" +

          "  <soap:Body>" +

          "    <" + methodName + " xmlns=\"http://jimcoaddins.com/DynaProducts\">" +

          "    </" + methodName + ">" +

          "  </soap:Body>" +

          "</soap:Envelope>";

בקוד זה, אני מקצה את מעטפת הסבון למשתנה מחרוזת כדי שאוכל להעביר אותו לשירות האינטרנט. למעשה, די קל לגלות כיצד לעצב את מעטפת הסבון עבור שירות האינטרנט שלך. פשוט אתר את שירות האינטרנט ולחץ על אחת מהשיטות להצגת מעטפת SOAP עבור שיטה זו. לדוגמה, הנה מה שאני רואה כאשר אתה מדפדף לשיטה GetCategories של שירות האינטרנט של wsXMLHTTP שיצרתי עבור מאמר זה

:

ASP.NET מספר לך כיצד יש לעצב את מעטפת הסבון עבור פרסום HTTP ו-http get. בדוגמה המוצגת במאמר זה, אני משתמש ב-HTTP POST.



בינתיים בסדר. כעת הבה נבחן את המקטע הבא של הקוד.

// Set up the post
objHttp.onreadystatechange = function(){

// a readyState of 4means we're ready to use thedata returned byXMLHTTP
if (objHttp.readyState == 4)
{

// getthe return envelope
   varszResponse= objHttp.responseText;

   // loadthe return into an XML data island
   objXmlDoc.loadXML(szResponse);

   if (objXmlDoc.parseError.errorCode != 0) {
var xmlErr =objXmlDoc.parseError;
 alert("You have error " + xmlErr.reason);
}
else
{

switch(dataSetName)
{
case "CategoriesDS":
processCategory();
break;
case "ProductsDS":
processProducts();
break;
case "ProductDetailDS":
processProductDetails();
break;

}
}

כאשר בקשה מתבצעת באמצעות XMLHTTP, אובייקט XMLHTTP משתמש במאפיין readyState כדי לעקוב אחר מצב הבקשה. כאשר כל הנתונים התקבלו בחזרה משירות האינטרנט, המאפיין readyState משתנה לערך של 4. המאפיין onreadystatechange עבור האובייקט XMLHTTP מאפשר לך להגדיר פונקציית התקשרות חזרה שתיקרא כאשר המאפיין readyState ישתנה. על-ידי הבטחה שהנתונים התקבלו בשלמותו, באפשרותי להמשיך לפעול על נתונים אלה עד שאהיה מוכן.



לאחר שכל הנתונים התקבלו, אני יוצר אי נתוני XML עם התגובה באמצעות המאפיין responseText. כפי שסביר להניח שאתה יודע, התגובה משירות אינטרנט נמצאת בתבנית XML. במקרה זה, אני מחזירה ערכת נתונים של Microsoft ADO.NET.



המקטע הבא בבלוק קוד זה משתמש במשפט החלפה כדי להתקשר לפונקציה המתאימה בהתבסס על שם ערכת הנתונים המוחזרת משירות האינטרנט. אני אכנס לקוד עבור פונקציות אלה בפרוטרוט מעט מאוחר יותר.


כעת הבה נבחן את הקוד שמבצע למעשה את בקשת XMLHTTP.

var szUrl;
szUrl = "http://dadatop/wsXmlHttp/DynaProducts.asmx/" + methodName;

if (wsParamValue != null)
{

      szUrl += "?" + wsParamName + "=" + wsParamValue;
}

// send the POST to the Web service
objHttp.open("POST", szUrl, true);
objHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
objHttp.send(strEnvelope);

המשתנה szUrl מכיל את כתובת ה-URL המשמשת לקריאה לשירות האינטרנט לצורך בהירות. לאחר מכן, יש לי משפט if שמדביק את כל הפרמטרים המועברים כערך QueryString. בסביבה שלך, ייתכן שתרצה להוסיף את הפרמטרים למעטפת SOAP. בכל מקרה, הדרך תפעל בסדר גמור.



פעולת השירות open של האובייקט XMLHTTP נקראת next. השתמשתי בשלושת הארגומנטים הראשונים עבור השיטה הפתוחה; השיטה, כתובת ה-URL וערך בוליאני המציין אם השיחה אינה מסונכרנת.
חשוב אם אתה מבצע שיחה אסינכרונית בזמן שאני כאן, עליך להגדיר פונקציה של החזרת התקשרות באמצעות המאפיין onreadystatechanged.

לאחר שכותרת הבקשה עבור סוג התוכן מוגדרת, אני שולח את הבקשה כמעטפה סבון באמצעות משתנה המחרוזת שמאוכלס מוקדם יותר.



כעת עברנו על כל הקוד שהופך את בקשת XMLHTTP. כעת הבה נבחן את הקוד המטפל בממשק בדפדפן והוא מטפל בתגובה משיחת שירות האינטרנט.

תחילה נבחן את הפונקציה שנקראת כאשר הדף נטען לראשונה.

function getCategories()
{

  var func = "getDataFromWS('GetCategories', 'CategoriesDS')";
  document.all.lblCategoryDropdown.innerText = 
"Please wait while data is retrieved...";
  window.setTimeout(func, 1);

  }

הדבר הראשון שאני עושה בפונקציה זו הוא יצירת משתנה לאחסון חתימת הפונקציה עבור getDataFromWS. אני עושה זאת מכיוון שאני הולך להתקשר לחלון. setTimeout בסוף פונקציה זו כדי להתקשר לפונקציה getDataFromWS. המטרה לגישה זו היא לאפשר לי להציג את המצב למשתמש תוך כדי המתנה להשלמת השיחה לשירות האינטרנט. שים לב שאני משנה את innerText של DIV כדי להציג הודעה המציינת שהנתונים מאוחזרים. לאחר מכן אני מתזמן את הפונקציה getDataFromWS דרך החלון. setTimeout call, והערכתי אותו לפעול באלפיות שניה אחת.

עיבוד ההיענות לשירות האינטרנט

זכור מוקדם יותר שהשתמשתי במאפיין onreadystatechanged כדי לקבוע את התצורה של הפונקציה החזרת התקשרות. כמו כן, זכור שהפונקציה החזרה מכילה משפט switch הקורא לפונקציה מסוימת בהתבסס על שם ערכת הנתונים. במקרה זה, שם ערכת הנתונים שלנו הוא CategoriesDS. לכן, הפונקציה processCategory תיקרא מתוך הפונקציה התקשרות חזרה. בוא נבחן פונקציה זו כדי לראות כיצד להשתמש ב-XML DOM כדי לנתח את התגובה משירות האינטרנט.

function processCategory()
{

  // get an XML data island with the category data
  objNodeList = objXmlDoc.getElementsByTagName("Categories");

  // add default value to the drop-down
  document.forms[0].drpCategory.options[0] = new Option("Select a Category", 0);

  // walk through the nodeList and populate the drop-down
  for (var i = 0; i < objNodeList.length; i++) 
  {
      var dataNodeList;
      var textNode;
      var valueNode;

      dataNodeList = objNodeList[i].childNodes;
      valueNode = dataNodeList.item(0);
      textNode = dataNodeList.item(1);

      document.forms[0].drpCategory.options[i + 1] = 
new Option(textNode.text, valueNode.text);
      document.all.lblCategoryDropdown.innerText = "Select a Category:";
      document.forms[0].drpCategory.style.visibility = "visible";

    }

  }

זכור כי הפונקציה getDataFromWS נטענת XML מהתגובה לאובייקט objXmlDoc. בפונקציה processCategory, אני מעבירה את ה-XML ומנתח אותה כדי לאכלס את הרשימה הנפתחת של הקטגוריה.



הדבר הראשון שאני עושה הוא ליצור אובייקט IXMLDOMNodeList באמצעות חלק מתגובת ה-XML. ערכת הנתונים שאני חוזר משיחת האינטרנט מוחזרת כdiffgram, והחלק היחיד של התגובה שאני מעוניין בו הוא הנתונים מDataTable שהוספתי לערכת הנתונים. באפשרותי להגיע אליו על-ידי יצירת אובייקט IXMLDOMNodeList מבלוק ה-XML המכיל את DataTable.



אם תסתכל על הקוד של שירות האינטרנט, תראה שאני יוצר DataTable שנקרא קטגוריות ומוסיף אותו לערכת הנתונים. כאשר ה-XML מוחזר משירות האינטרנט, ערכת הנתונים נכללת בתוך <CategoriesDS>, וכל שורה מDataTable כלולה בקטגוריות <נפרדות> בלוקים כפי שמוצג בקובץ ה-XML שלהלן.

הקבצים הבאים זמינים להורדה ממרכז ההורדות של Microsoft
:הורד את חבילת הGetCategories.xml כעת.
הורד את חבילת הWSXMLHTTP.exe כעת.לקבלת מידע נוסף אודות אופן ההורדה של קבצי התמיכה של Microsoft, לחץ על מספר המאמר הבא כדי להציג את המאמר ב-Microsoft Knowledge Base:

119591 כיצד ניתן להשיג קבצי תמיכה של Microsoft משירותים מקוונים
שעבורם microsoft סרקה קובץ זה עבור וירוסים. Microsoft השתמשה בתוכנת איתור הווירוסים העדכנית ביותר שהיתה זמינה בתאריך שבו הקובץ נרשם. הקובץ מאוחסן בשרתים בעלי אבטחה משופרת שעוזרים למנוע שינויים בלתי מורשים בקובץ.


כדי לקבל את חסימת ה-XML המכילה את DataTable, אני משתמש בקוד הבא:

objNodeList = objXmlDoc.getElementsByTagName("Categories");

פעולה זו מחזירה אובייקט IXMLDOMNodeList שמכיל כל <קטגוריות> צומת. לאחר מכן חזר דרך רשימה זו באמצעות a לולאה.

// walk through the nodeList and populate the drop-down
  for (var i = 0; i < objNodeList.length; i++) 
  {
      var dataNodeList;
      var textNode;
      var valueNode;

      dataNodeList = objNodeList[i].childNodes;
      valueNode = dataNodeList.item(0);
      textNode = dataNodeList.item(1);

      document.forms[0].drpCategory.options[i + 1] = 
new Option(textNode.text, valueNode.text);
      document.all.lblCategoryDropdown.innerText = "Select a Category:";
      document.forms[0].drpCategory.style.visibility = "visible";

    }

אני כבר יודע שכל <קטגוריות> צומת יהיו שתי צמתים הדרושים לי: מזהה <> צומת והצומת <CategoryName>. לכן, הדבר הראשון שאני עושה הוא ליצור IXMLDOMNodeList חדש ולאכלס אותו באמצעות צמתי הצאצא של ה> הנוכחית של קטגוריות ה<.

dataNodeList = objNodeList[i].childNodes;

לאחר מכן, השתמש בשיטת הפריט כדי לגשת לשני הצמתים הדרושים לי כדי לאכלס את הרשימה הנפתחת. הצומת הראשון מכיל את השדה CategoryID ממסד נתונים, והצומת השני מכיל את השדה CategoryName ממסד הנתונים. אני יוצר אובייקט אפשרויות חדש, הגדר את הטקסט לCategoryName, הגדר את הערך ל-CategoryID והוסף אותו לרשימה הנפתחת drpCategory. הקוד הנמצא בשימוש בפונקציות הנותרות משתמש באותה שיטה כדי למשוך את הנתונים הדרושים מתגובת ה-XML ולאכלס חלקים של הדף.

NoteSince אנחנו מתעסקים עם כמויות קטנות של נתונים כאן, באמצעות DOM היא דרך נהדרת להוציא את הנתונים הדרושים לנו. אם התמודדת עם כמות גדולה של נתונים, ייתכן שתבחר להשתמש ב-XSLT במקום זאת.

כיצד לגרום להכל לעבוד

כעת, לאחר שכבר כיסיתי את הפרטים המחוספסים של אופן הפעולה של כל זה, הגיע הזמן לעבור על האופן שבו תוכל להשתמש בקבצי המדגם הכלולים כדי לראות אותו עובד בעצמך.