Dynaamiset sivupäivitykset XMLHTTP-määrityksen avulla

Dynaamiset sivupäivitykset XMLHTTP-määrityksen avulla

Jos haluat mukauttaa tätä saraketta tarpeidesi mukaan, kutsumme sinua antamaan ideoita sinua kiinnostavista aiheista ja ongelmista, joita haluat tarkastella tulevissa Knowledge Base -artikkeleissa ja Tukiääni-sarakkeissa. Voit lähettää ideasi ja palautteesi Kysy sitä -lomakkeella. Tämän sarakkeen alareunassa on myös linkki lomakkeeseen.

Yleistä

XMLHTTP toimii lähettämällä pyynnön verkkopalvelimeen asiakasohjelmasta ja palauttamalla XML-tietosaaren. Vastaanottaneen XML-rakenteen mukaan voit käsitellä sitä XSLT-määrityksen tai XML-datatiedoston avulla ja sitoa sivun osia tietoihin. Tämä on erittäin tehokas tekniikka.

NoteMicrosoft tarjoaa Internet Explorerille verkkopalvelun toimintoja, jotka tekevät asynkronisia puheluita ASP.NET verkkopalveluihin nopeasti ja helposti. Tätä toimintaa ei kuitenkaan tueta, eikä se ole paras tapa päivittää sivua asynkronisesti. Käytä sen sijaan XMLHTTP-funktiota.


Tässä esimerkissä soitan tässä sarakkeessa kolme verkkopalvelupuhelua ASP.NET XMLHTTP:n kautta. Verkkopalvelu tekee kyselyn Northwind-tietokannasta paikallisessa SQL Serverissä ja palauttaa DataSet-joukon asiakkaaseen XML-hajonnalla. Tämän jälkeen jäsennän xml-tiedot XML-datan xml-datan avulla ja päivitän sivuni osia dynaamisesti. Kaikki tämä tehdään ilman viestiä.

Verkkopalvelu

Käytettävä verkkopalvelu on nimeltään DynaProducts. Se on C#-ASP.NET peruspalvelu, joka sisältää seuraavat kolme menetelmää.

• GetCategories – Palauttaa Tietojoukon, joka sisältää kaikki Luokat-taulukon luokat.
  

• GetProducts – Palauttaa tietojoukon, joka sisältää kaikki menetelmään välitetyt luokan tuotteet.
  

• GetProductDetails – Palauttaa tietojoukon, joka sisältää sen tuotteen tiedot, jonka tuotetunnus siirretään menetelmään.
  

HTML-sivu

Ensimmäiseksi saatat saada tästä mallista ylistää se, että päivitän sivun, vaikka ASP.NET ei ole ASP.NET sivu. Se on vain tavallinen HTML-sivu. Olen kuitenkin lisännyt sivulle melko paljon asiakaspuolen JavaScript-komentosarjaa, ja se komentosarja, joka soittaa puheluita verkkopalveluun.



Katsotaan ensimmäistä koodikatkelmia HTML-sivulta.

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);
  }
}

Tämä on sivun suurin koodikappale, ja haluan käydä sen yksityiskohtaisesti yli, jotta ymmärrät, mitä tapahtuu.



Tämän komentosarjalohkon yläosassa loin kaksi muuttujaa: objHttp ja objXmlDoc. Nämä ovat XMLHTTP-objektissani ja XML-DOM-objektissani käytettävät muuttujat. Tämän jälkeen on getDataFromWS-funktion funktiomääritys. Tämä on funktio, joka vastaa asiakaspuolen puhelujen soittaminen verkkopalveluun. Se käyttää seuraavia neljää argumenttia, joista kaksi on valinnaisia:

• methodName – verkkopalvelussa kutsutavan nimi.
  

• dataSetName – verkkopalvelun palauttama DataSet-joukon nimi.
  

• wsParamValue – verkkopalveluun tarvittaessa välitetty parametrin arvo. (Valinnainen)
  

• wsParamName – verkkopalveluun tarvittaessa välitetty parametrin nimi. (Valinnainen)
  

Let's break the getDataFromWS function into parts and discuss each one. Tässä on ensimmäinen katkelma:

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

Tämä koodilohko luo XMLHTTP-objektin ja XML-asiakirjaobjektin. Seuraavaksi aloitan SOAP-kirjekuoren luomisen.

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

Määritän tässä koodissa SOAP-kirjekuoren merkkijonomuuttujalle, jotta voin siirtää sen verkkopalveluun. On itse asiassa melko helppo löytää, miten SOAP-kirjekuori muotoiltavaksi verkkopalvelua varten. Selaa vain verkkopalveluun ja valitse jokin menetelmistä, niin näet tätä menetelmää varten SOAP-kirjekuoren. Näen esimerkiksi tämän, kun selaan tässä artikkelissa luomani wsXMLHTTP-verkkopalvelun GetCategories-menetelmää:ASP.NET kertoo, miten SOAP-kirjekuori on muotoiltava HTTP POST- ja HTTP GET

-muotoja

varten. Tässä artikkelissa olevassa esimerkissä käytetään HTTP POST -protokollaa.



Kaikki hyvin toistaiseksi. Katsotaan seuraavaksi koodin seuraavaa osaa.

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

}
}

Kun pyyntö tehdään XMLHTTP-määrityksen avulla, XMLHTTP-objekti käyttää ReadyState-ominaisuutta pyynnön tilan seuraamista varten. Kun kaikki tiedot on vastaanotettu takaisin verkkopalvelusta, ReadyState-ominaisuus muuttuu arvoksi 4. XMLHTTP-objektin onreadystatechange-ominaisuuden avulla voit määrittää takaisinsoittofunktion, jota kutsutaan, kun ReadyState-ominaisuus muuttuu. Varmistamalla, että tiedot on vastaanotettu kokonaisuudessaan, voin jatkaa tietojen käsittelyä, kunnes olen valmis.



Kun kaikki tiedot on vastaanotettu, luon vastauksen xml-tietosaaren käyttämällä responseText-ominaisuutta. Kuten todennäköisesti tiedät, verkkopalvelun vastaus on XML-muodossa. Tässä tapauksessa palautan Microsoft ADO.NET DataSetin.



Tämän koodilohkon seuraavassa osassa käytetään valitsinlauseketta kutsumaan sopivaa funktiota verkkopalvelusta palautetun DataSet-funktion nimen perusteella. Siirryn näiden funktioiden koodiin yksityiskohtaisesti hieman myöhemmin.


Katsotaan nyt koodia, joka todellisuudessa suorittaa XMLHTTP-pyynnön.

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);

Muuttuja szUrl sisältää URL-osoitteen, jota käytetään verkkopalvelun kutsumiseksi selkeyden vuoksi. Sen jälkeen minulla on jos-lauseke, joka käyttää kyselymerkkijonoarvona välitettyjä parametreja. Ympäristössäsi haluat ehkä lisätä parametrit SOAP-kirjekuoreen. Kummassakin tapauksessa se toimii hyvin.



XMLHTTP-objektin avointa menetelmää kutsutaan seuraavaksi. Olen käyttänyt kolme ensimmäistä argumenttia avoimessa menetelmässä. menetelmä, URL-osoite ja totuusarvo, joka määrittää, onko kutsu asynkroninen.
Tärkeää Jos soitat asynkronisen puhelun, kuten olen tässä, sinun on määritettävä takaisinsoittofunktio onreadystatechanged-ominaisuuden kautta.

Kun sisältötyypin pyynnön otsikko on määritetty, lähetän pyynnön SOAP-kirjekuorena käyttämällä aiemmin täytettyä merkkijonomuuttujaa.



Olemme nyt käyneet läpi kaikki koodit, jotka tekevät XMLHTTP-pyynnön. Katsotaan nyt koodia, joka käsittelee käyttöliittymää selaimessa ja joka käsittelee verkkopalvelupuhelun vastauksen.

Tarkistamme ensin funktion, jota kutsutaan sivun latautuessa ensimmäisen kerran.

function getCategories()
{

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

  }

Ensimmäinen asia, jonka teen tässä funktiossa, on luoda muuttuja, joka tallentaa funktion allekirjoituksen getDataFromWS-funktiota varten. Teen tämän, koska aion soittaa window.setTimeout-puheluun tämän funktion lopussa getDataFromWS-funktion kutsumista varten. Tämän menetelmän tarkoituksena on antaa minun näyttää käyttäjälle tila, kun odotat verkkopalvelupuhelun valmistumista. Huomaa, että muutan JAKO-näppäimen sisemmän tekstin näyttämään viestin, joka ilmaisee, että tietoja noudetaan. Ajoitan getDataFromWS-funktion window.setTimeout-puhelun kautta ja määritän sen toimimaan millisekunnilla.

Verkkopalveluvastauksen käsittely

Muista aiemmin, että käytit onreadystatechanged-ominaisuutta takaisinsoittofunktion määrittämiseen. Muista myös, että takaisinsoittofunktio sisältää valitsintoiminnon, joka kutsuu tiettyä funktiota DataSet-nimen perusteella. Tässä tapauksessa Tietojoukon nimi on CategoriesDS. Siksi processCategory-funktio kutsutaan takaisinsoittofunktiosta. Katsotaanpa, miten voit jäsentää verkkopalvelun vastauksen XML-dom-määrityksen avulla.

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

    }

  }

Muista, että getDataFromWS-funktio ladasi XML:n vastauksesta objXmlDoc-objektiin. ProcessCategory-funktiossa otan XML:n ja jäsennän sen läpi avattavaan Luokka-valikkoon.



Ensimmäiseksi luon IXMLDOMNodeList-objektin xml-vastauksen osan avulla. DataSet, jonka olen palauttanut verkkopalvelupuhelusta, palautetaan hajakaaviona, ja ainoa osa vastauksesta, jota olen kiinnostunut, on DataSetiin lisäämieni DataTable-taulukon tietojen osa. Voin käyttää tätä luomalla IXMLDOMNodeList-objektin DataTable-taulukon sisältävästä XML-lohkosta.



Jos katsot verkkopalvelun koodia, näen, että luon Luokat-nimisen DataTable-taulukon ja lisään sen DataSetiin. Kun XML palautetaan verkkopalvelusta, Tietojoukko sisältyy <CategoriesDS> -lohkoon ja jokainen DataTable-taulukon rivi sisältyy erillisiin <Categories> -lohkoihin alla olevan XML-tiedoston mukaisesti.

Seuraavat tiedostot ovat ladattavissa Microsoft Download Centeristä:
lataa GetCategories.xml nyt.
lataa WSXMLHTTP.exe nyt.Saat lisätietoja Microsoft-tukitiedostojen lataamista varten napsauttamalla seuraavaa artikkelin numeroa, jolloin saat artikkelin microsoft Knowledge Base -tietokantaan:

119591 Microsoftin tukitiedostojen hankkiminen verkkopalveluista,
jotka Microsoft on tarkistanut tämän tiedoston virusten varalta. Microsoft on käyttänyt uusinta virustorjuntaohjelmistoa, joka on ollut saatavilla silloin, kun kyseinen tiedosto on asetettu ladattavaksi. Tiedosto on tallennettuna suojattuihin palvelimiin, jotka estävät luvattomat muutokset tiedostoon.


Jos haluat saada DataTable-taulukon sisältävän XML-lohkon, käytä seuraavaa koodia:

objNodeList = objXmlDoc.getElementsByTagName("Categories");

Tämä palauttaa IXMLDOMNodeList-objektin, joka sisältää <luokat> solmu. Sen jälkeen iteroitan luettelon silmukan avulla.

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

    }

Tiedän jo, että <Categories> -solmussa on kaksi solmua: <-tunnus> solmu ja <LuokanNimi> solmu. Siksi luon ensin uuden IXMLDOMNodeList-luettelon ja täytän sen nykyisen luokan <solmujen> solmulla.

dataNodeList = objNodeList[i].childNodes;

Sen jälkeen käytän kohdemenetelmää, jotta voin käyttää molempia solmuja, jotka minun on täytetty avattavaan valikkoon. Ensimmäinen solmu sisältää tietokannan CategoryID-kentän ja toinen solmu sisältää tietokannan LuokanNimi-kentän. Luon uuden Option-objektin, määritän tekstin LuokanNimi-kenttään, määritän arvoksi LuokanTunnus ja lisään sen avattavaan drpCategory-valikkoon. Jäljellä olevien funktioiden koodi käyttää samaa menetelmää XML-vastauksesta tarvittavien tietojen keruussa ja sivun osien lisäämiseen.

Huomaa, että käsittelemme tässä pieniä tietomääriä, dom-datan käyttäminen on hyvä tapa vetää esiin tarvitsemiamme tietoja. Jos käsittelet suurta tietomäärää, voit käyttää sen sijaan XSLT:tä.

Miten kaikki toimii?

Nyt kun olen tutustunut tämän toimintatahdon yksityiskohtiin, on aika käydä se selväksi, miten voit käyttää mukana toimitettuja mallitiedostoja, jotta näet, miten ne toimivat itse.