Δυναμικές ενημερώσεις σελίδων με χρήση XMLHTTP

Δυναμικές ενημερώσεις σελίδων με χρήση XMLHTTP

Για να προσαρμόσετε αυτή τη στήλη στις ανάγκες σας, θέλουμε να σας προσκαλέσουμε να υποβάλετε τις ιδέες σας σχετικά με θέματα που σας ενδιαφέρουν και θέματα που θέλετε να αντιμετωπιστούν σε μελλοντικά άρθρα της Γνωσιακής βάσης και σε στήλες φωνής υποστήριξης. Μπορείτε να υποβάλετε τις ιδέες και τα σχόλιά σας χρησιμοποιώντας τη φόρμα "Ζητήστε το". Υπάρχει επίσης μια σύνδεση με τη φόρμα στο κάτω μέρος αυτής της στήλης.

Γενική επισκόπηση

Η XMLHTTP λειτουργεί με την αποστολή μιας αίτησης στο διακομιστή Web από τον υπολογιστή-πελάτη και την επιστροφή ενός νησιού δεδομένων XML. Ανάλογα με τη δομή της XML που λαμβάνεται, μπορείτε να χρησιμοποιήσετε το XSLT ή το XML DOM για να το χειριστείτε και να συνδέσετε τμήματα της σελίδας με αυτά τα δεδομένα. Αυτή είναι μια εξαιρετικά ισχυρή τεχνική.

Η NoteMicrosoft προσφέρει μια συμπεριφορά υπηρεσίας Web για τον Internet Explorer που κάνει τις ασύγχρονες κλήσεις προς ASP.NET υπηρεσίες Web γρήγορες και εύκολες. Ωστόσο, αυτή η συμπεριφορά δεν υποστηρίζεται και δεν είναι ο καλύτερος τρόπος για να ενημερώσετε μια σελίδα με ασύγχρονη τρόπο. Θα πρέπει να χρησιμοποιήσετε XMLHTTP!


In the example I'll work through in this column, I will make three Web service calls to an ASP.NET Web service through XMLHTTP. Η υπηρεσία Web θα κάνει ερώτημα στη βάση δεδομένων Northwind στον τοπικό SQL Server και θα επιστρέψει ένα Σύνολο δεδομένων στο πρόγραμμα-πελάτη με τη μορφή diffgram XML. I will then use the XML DOM to parse that XML data and dynamically update portions of my page. Όλα αυτά θα γίνουν χωρίς καταχώρηση.

Η υπηρεσία Web

Η υπηρεσία Web που θα χρησιμοποιήσω ονομάζεται DynaProducts. Είναι μια βασική υπηρεσία ASP.NET Web που έχει συνταχθεί στο C# και περιέχει τις ακόλουθες τρεις μεθόδους.

• GetCategories – Επιστρέφει ένα σύνολο δεδομένων που περιέχει όλες τις κατηγορίες στον πίνακα "Κατηγορίες".
  

• GetProducts – Επιστρέφει ένα σύνολο δεδομένων που περιέχει όλα τα προϊόντα της κατηγορίας που έχουν περάσει στη μέθοδο.
  

• GetProductDetails – Επιστρέφει ένα σύνολο δεδομένων που περιέχει λεπτομέρειες για το προϊόν του οποίου το ProductID έχει μεταδοτεί στη μέθοδο.
  

Η σελίδα HTML

Το πρώτο πράγμα που μπορεί να σας αφορά αυτό το δείγμα είναι ότι η σελίδα που ενημερώνω, παρόλο που η υπηρεσία Web του ASP.NET δεν είναι μια ASP.NET σελίδας. Είναι απλώς μια κανονική σελίδα HTML. Ωστόσο, έχω προσθέσει μια εύλογη ποσότητα JavaScript από την πλευρά του προγράμματος-πελάτη στη σελίδα και είναι αυτή η δέσμη ενεργειών που πραγματοποιεί τις κλήσεις στην υπηρεσία Web.



Ας δούμε το πρώτο τμήμα κώδικα από τη σελίδα 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);
  }
}

Αυτό είναι το μεγαλύτερο τμήμα κώδικα από τη σελίδα και θέλω να το δούμε λεπτομερώς, ώστε να κατανοήσετε τι συμβαίνει.



Στο επάνω μέρος αυτού του μπλοκ δέσμης ενεργειών, δημιούργησα δύο μεταβλητές: objHttp και objXmlDoc. Αυτές είναι οι μεταβλητές που θα χρησιμοποιήσω για το αντικείμενο XMLHTTP και το αντικείμενο XML DOM που έχω. Αμέσως μετά από αυτό είναι ο ορισμός της συνάρτησης για τη συνάρτηση getDataFromWS. Αυτή είναι η λειτουργία που είναι υπεύθυνη για την πραγματοποίηση της κλήσης από την πλευρά του προγράμματος-πελάτη στην υπηρεσία Web. Λαμβάνει τα ακόλουθα τέσσερα ορίσματα, δύο από τα οποία είναι προαιρετικά:

• methodName: Το όνομα της μεθόδου κλήσης στην υπηρεσία Web.
  

• dataSetName: Το όνομα του συνόλου δεδομένων που επιστρέφεται από την υπηρεσία Web.
  

• wsParamValue : Η τιμή της παραμέτρου που μεταβιβάζεται στην υπηρεσία Web, εάν υπάρχει. (Προαιρετικό)
  

• wsParamName : Το όνομα της παραμέτρου που μεταβιβάται στην υπηρεσία Web, εάν υπάρχει. (Προαιρετικό)
  

Ας χωρίσουμε τη συνάρτησηDataFromWS σε τμήματα και ας συζητήσουμε για κάθε μία. Αυτό είναι το πρώτο τμήμα:

// 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. Στη συνέχεια, ξεκινάω τη δημιουργία του φακέλου SOAP.

// 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 σε μια μεταβλητή συμβολοσειράς, ώστε να μπορώ να τον μεταβιβάσω στην υπηρεσία Web. Στην πραγματικότητα, είναι πολύ εύκολο να ανακαλύψετε πώς μπορείτε να μορφοποιήσετε το φάκελο SOAP για την υπηρεσία Web. Απλώς μεταβείτε στην υπηρεσία Web και κάντε κλικ σε μία από τις μεθόδους για να δείτε ένα φάκελο SOAP για αυτή τη μέθοδο. Για παράδειγμα, εδώ βλέπετε αυτό που βλέπω όταν περιηγείστε στη μέθοδο GetCategories της υπηρεσίας Web wsXMLHTTP που δημιούργησα για αυτό το άρθρο: το ASP.NET σάς ενημερώνει για το πώς πρέπει να μορφοποιηθεί ο φάκελος SOAP για μια δημοσίευση HTTP και ένα



HTTP GET. Στο παράδειγμα που παρουσιάζεται σε αυτό το άρθρο, θα χρησιμοποιώ τη δημοσίευση HTTP.



Μέχρι τώρα καλά. Ας δούμε τώρα την επόμενη ενότητα του κώδικα.

// 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 για να παρακολουθεί την κατάσταση της αίτησης. Όταν όλα τα δεδομένα έχουν ληφθεί πίσω από την υπηρεσία Web, η ιδιότητα readyState αλλάζει σε τιμή 4. Η ιδιότητα onreadystatechange για το αντικείμενο XMLHTTP σάς επιτρέπει να ρυθμίσετε μια συνάρτηση επιστροφής κλήσης που θα ονομάζεται όταν αλλάξει η ιδιότητα readyState. Εξασφαλίζοντας ότι τα δεδομένα έχουν ληφθεί στο σύνολό τους, μπορώ να μην ενεργώ για αυτά τα δεδομένα μέχρι να είμαι έτοιμος.



Όταν έχουν ληφθεί όλα τα δεδομένα, δημιουργώ ένα νησί δεδομένων XML με την απάντηση, χρησιμοποιώντας την ιδιότητα responseText. Όπως πιθανότατα γνωρίζετε, η απόκριση από μια υπηρεσία Web είναι σε μορφή XML. Σε αυτή την περίπτωση, θα επιστρέψω ένα Microsoft ADO.NET DataSet.



Η επόμενη ενότητα αυτού του μπλοκ κώδικα χρησιμοποιεί μια πρόταση switch για να καλέσει την κατάλληλη συνάρτηση με βάση το όνομα του συνόλου δεδομένων που επιστρέφεται από την υπηρεσία Web. Θα κάνω λεπτομερή ανάλυση του κώδικα για αυτές τις συναρτήσεις αργότερα.


Ας δούμε τώρα τον κώδικα που εκτελεί την αίτηση 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 που χρησιμοποιείται για την κλήση της υπηρεσίας Web για λόγους σαφήνειας. Στη συνέχεια, έχω μια πρόταση IF που τυπώνει οποιεσδήποτε παραμέτρους μεταβιβάσμαται ως τιμή QueryString. Στο περιβάλλον σας, μπορεί να θέλετε να προσθέσετε τις παραμέτρους στο φάκελο SOAP. Σε κάθε περίπτωση δεν υπάρχει πρόβλημα.



Η μέθοδος "Άνοιγμα" του αντικειμένου XMLHTTP ονομάζεται "επόμενο". Έχω χρησιμοποιήσει τα τρία πρώτα ορίσματα για τη μέθοδο open. η μέθοδος, η διεύθυνση URL και μια δυαδική τιμή που καθορίζει εάν η κλήση είναι ασύγχρονη ή όχι.
Σημαντικό Εάν κάνετε μια ασύγχρονη κλήση καθώς είμαι εδώ, πρέπει να ρυθμίσετε μια συνάρτηση επιστροφής κλήσης μέσω της ιδιότητας onreadystatechanged.

Όταν οριστεί η κεφαλίδα αίτησης για τον τύπο περιεχομένου, στέλνω την αίτηση ως φάκελο SOAP χρησιμοποιώντας τη μεταβλητή συμβολοσειράς που συμπληρώνονται νωρίτερα.



Τώρα έχουμε αναλάβει όλο τον κώδικα που αποτελεί την αίτηση XMLHTTP. Ας δούμε τώρα τον κώδικα που χειρίζεται το περιβάλλον εργασίας στο πρόγραμμα περιήγησης και ο οποίο χειρίζεται την απάντηση από την κλήση υπηρεσίας Web.

Πρώτα θα δούμε τη συνάρτηση που ονομάζεται κατά τη φόρτωση της σελίδας για πρώτη φορά.

function getCategories()
{

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

  }

Το πρώτο πράγμα που κάνω σε αυτή τη συνάρτηση είναι να δημιουργήσω μια μεταβλητή για να αποθηκεύσω την υπογραφή της συνάρτησης για το getDataFromWS. Αυτό το κάνω επειδή θα καλέσετε window.setTimeout στο τέλος αυτής της συνάρτησης για να καλέσετε τη συνάρτηση getDataFromWS. Ο σκοπός αυτής της προσέγγισης είναι να μου επιτρέψει να εμφανίσω την κατάσταση στο χρήστη ενώ περιμένετε να ολοκληρωθεί η κλήση της υπηρεσίας Web. Παρατηρήστε ότι αλλάζω το εσωτερικό κείμενο ενός DIV για να εμφανίσω ένα μήνυμα που υποδεικνύει ότι τα δεδομένα ανακτώνται. Στη συνέχεια, προγραμματώ τη συνάρτηση getDataFromWS μέσω της κλήσης window.setTimeout και την έχω ορίσει να εκτελείται σε ένα χιλιοστό του δευτερολέπτου.

Επεξεργασία της απόκρισης της υπηρεσίας Web

Να θυμάστε ότι προηγουμένως χρησιμοποίησα την ιδιότητα onreadystatechanged για να ρυθμίσω τις παραμέτρους μιας συνάρτησης επιστροφής κλήσης. Επίσης, να θυμάστε ότι η συνάρτηση επιστροφής κλήσης περιέχει μια πρόταση διακόπτη που καλεί μια συγκεκριμένη συνάρτηση με βάση το όνομα του συνόλου δεδομένων. Σε αυτή την περίπτωση, το όνομα του συνόλου δεδομένων μας είναι CategoriesDS. Επομένως, η συνάρτηση processCategory θα καλείται από τη συνάρτηση επιστροφής κλήσης. Ας δούμε αυτήν τη συνάρτηση για να δούμε πώς μπορείτε να χρησιμοποιήσετε την XML DOM για να ανάλυση της απόκρισης από την υπηρεσία Web.

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, i take that XML and parse through it to populate the Category drop-down.



Το πρώτο πράγμα που κάνω είναι να δημιουργήσω ένα αντικείμενο IXMLDOMNodeList χρησιμοποιώντας ένα μέρος της απόκρισης XML. Το Σύνολο δεδομένων που επέστρεφα από την κλήση υπηρεσίας Web επιστρέφεται ως άβολο και το μόνο τμήμα αυτής της απάντησης που πραγματικά με ενδιαφέρει είναι τα δεδομένα από τον Πίνακα δεδομένων που έχω εισαγάγει στο Σύνολο δεδομένων. Μπορώ να αποκτήσω πρόσβαση σε αυτό δημιουργώντας ένα αντικείμενο IXMLDOMNodeList από το μπλοκ XML που περιέχει τον Πίνακα δεδομένων.



Εάν κοιτάξετε τον κώδικα για την υπηρεσία Web, θα δείτε ότι δημιουργώ έναν Πίνακα δεδομένων που ονομάζεται "Κατηγορίες" και τον προσθέτω στο Σύνολο δεδομένων. Όταν το XML επιστρέφεται από την υπηρεσία Web, το Σύνολο δεδομένων περιέχεται μέσα σε ένα μπλοκ <CategoriesDS> και κάθε γραμμή από τον Πίνακα δεδομένων περιέχεται σε ξεχωριστά μπλοκ <Categories> όπως φαίνεται στο παρακάτω αρχείο XML.

Τα παρακάτω αρχεία είναι διαθέσιμα για λήψη από το Κέντρο λήψης αρχείων της Microsoft:
κάντε λήψη του GetCategories.xml σας τώρα.
λήψη του WSXMLHTTP.exe τώρα.Για περισσότερες πληροφορίες σχετικά με τον τρόπο λήψης αρχείων υποστήριξης της Microsoft, κάντε κλικ στον αριθμό του άρθρου παρακάτω για να προβάλετε το άρθρο της Γνωσιακής Βάσης της Microsoft:

119591 Πώς μπορείτε να αποκτήσετε αρχεία υποστήριξης της Microsoft από ηλεκτρονικές υπηρεσίες
η Microsoft σάρωσε αυτό το αρχείο για ιούς. Η Microsoft χρησιμοποίησε το πιο ενημερωμένο λογισμικό εντοπισμού ιών που ήταν διαθέσιμο κατά την ημερομηνία δημοσίευσης του αρχείου. Το αρχείο αποθηκεύεται σε διακομιστές με βελτιωμένη ασφάλεια που βοηθούν στην αποτροπή μη εξουσιοδοτημένων αλλαγών στο αρχείο.


Για να λάβετε το μπλοκ XML που περιέχει τον DataTable, χρησιμοποιώ τον παρακάτω κώδικα:

objNodeList = objXmlDoc.getElementsByTagName("Categories");

Αυτό επιστρέφει ένα αντικείμενο IXMLDOMNodeList που περιέχει <κατηγορίες> κόμβο. Στη συνέχεια, κάνω επανάληψη σε αυτή τη λίστα χρησιμοποιώντας ένα βρόχο.

// 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";

    }

Γνωρίζω ήδη ότι κάθε κόμβος <κατηγοριών> θα έχει δύο κόμβους που χρειάζομαι: τον κόμβο <ID> και τον κόμβο <CategoryName>. Επομένως, το πρώτο πράγμα που κάνω είναι να δημιουργήσω μια νέα IXMLDOMNodeList και να τη συμπληρώσετε με τους θυγατρικούς κόμβους του τρέχοντος κόμβου <Κατηγορίες>.

dataNodeList = objNodeList[i].childNodes;

Στη συνέχεια, χρησιμοποιώ τη μέθοδο στοιχείου για να αποκτήσω πρόσβαση και στους δύο κόμβους που χρειάζομαι για να συμπληρωθεί η αναπτυσσόμενη λίστα μου. Ο πρώτος κόμβος περιέχει το πεδίο CategoryID από τη βάση δεδομένων και ο δεύτερος κόμβος περιέχει το πεδίο CategoryName από τη βάση δεδομένων. Δημιουργώ ένα νέο αντικείμενο Option, ορίστε το κείμενο στο CategoryName, ορίστε την τιμή στο CategoryID και προσθέστε το στην αναπτυσσόμενη λίστα drpCategory. Ο κώδικας που χρησιμοποιείται στις υπόλοιπες συναρτήσεις χρησιμοποιεί την ίδια μέθοδο για να τραβήξει τα δεδομένα που απαιτούνται από την απόκριση XML και να συμπληρώσετε τμήματα της σελίδας.

Σημειώστε ότι πρόκειται για μικρές ποσότητες δεδομένων εδώ, η χρήση του DOM είναι ένας εξαιρετικός τρόπος για να βγάλετε τα δεδομένα που χρειαζόμαστε. Εάν πρόκειται για μεγάλο όγκο δεδομένων, μπορείτε να επιλέξετε να χρησιμοποιήσετε XSLT.

Πώς μπορείτε να τα κάνετε όλα εντάξει

Τώρα που έχω καλύψει τις λεπτομέρειες σχετικά με τον τρόπο που λειτουργούν όλα αυτά, είναι ώρα να δείτε πώς μπορείτε να χρησιμοποιήσετε τα δείγματα αρχείων που περιλαμβάνονται για να τα δείτε να λειτουργούν μόνοι σας.