ASP.NET Voice -sarakkeen tuki

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.

JOHDANTO

Yksi suosikkitavoistani tutkia verkkosovellusten käytettävyyttä on seurata, miten vaimoni siirtyy verkkosivustossa. Hän voi kiertää Internetiä melko hyvin, mutta hän ei tiedä juurikaan pienitason teknisiä näkökohtia (mitä hän kutsuu "työtahnaksi"), jotka tekevät siitä kaiken toimivan.



Äskettäin illalla katselin, miten vaimoni perustaisi sähköisen kaupan sovelluksen yhdestä isosta isästä. Hän oli porautumassa tuoteluetteloon käyttämällä useita avattavaa luetteloa, joista jokainen syöttäen aiemmin tehtyä valintaa. Kun hän napsautti kohdetta jokaisessa avattavassa ruudussa, sivu on lähetetty takaisin, jotta hän saa seuraavan avattavan luetteloruudun tiedot. Kokemus oli turhauttava hänelle, koska hänen vaikutelmansa oli se, että viestien palaaminen kesti kauan.



Sovelluksen kehittäjät ovat voineet helposti lieventää hänen turhautumistaan, jos he käyttäneet XMLHTTP-funktiota tietojen noutamiseen sen sijaan, että he julkaisevat ne uudelleen. Tässä kuussa 2010-sarakkeessa on kyse tästä. Näytän, miten voit päivittää verkkosivun osan Microsoft ASP.NET -verkkopalvelun tiedoista ilman, että julkaiset sen uudelleen. Tästä tulee todella hienoa! Usko nyt.

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ää:vaihtoehtoinen tekstiASP.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 lataa GetCategories.xml nyt.
Lataa 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.

Verkkopalvelun käyttöönotto

Voit ottaa ASP.NET käyttöön purkamalla liitetyn verkkopalveluesinäytteen verkkopalvelimen pääkansioon. Tämän jälkeen sinun täytyy avata DynaProducts.asmx-koodi ja muuttaa yhteysmerkkijonoa. Sinun on annettava vähintään SA-salasana. Kun olet tehnyt muutoksen, täydentä verkkopalvelu uudelleen.

HTML-tiedoston käyttöönotto

HTML-tiedosto sisältää szUrl-nimisen muuttujan, joka sisältää verkkopalvelun URL-osoitteen. Tämä muuttuja löytyy getDataFromWS-funktiosta funktion alareunasta. Sinun on muutettava se yllä käyttöönotetun verkkopalvelun URL-osoitteeksi.


Kun olet ottanut käyttöön sekä verkkopalvelun että HTML-tiedoston, selaa HTML-tiedostoon. Kun se latautuu, avattava luokka-luettelo täytetään www-palvelun ensimmäisellä XMLHTTP-pyynnöllä. Kun tämä on täytetty, valitse luokka, joka ottaa käyttöön seuraavan AVATTAVAN XMLHTTP-pyynnön, joka täyttää avattavan Tuotteet-luetteloruudun. Jos valitset tuotteen avattavasta Tuotteet-luettelosta, taulukkoon lisätään tietoja tuotteesta.



Huomaa, että sivu ei julkaise mitään näistä XMLHTTP-pyynnöistä. Tämä on XMLHTTP-pyyntöjen kauneutta. Jos olen tehnyt tämän suurella sivulla, sivu on myös säilyttänyt vieritys sijaintinsa ilman vilkkumista käyttäjän käytössä. Jos minulta kysytään, se on aika tehokasta!



Vielä yksi asia: tässä artikkelissa käytin XMLHTTP-kyselyä verkkopalvelussa. Olen voinut yhtä helposti käyttää sitä ASPX-sivun tai ASP-sivun pyynnön pyytäessä. Tämän tekniikan käyttömahdollisuudet ovat rajattomat. Toivottavasti XMLHTTP on hyödyllinen tulevassa verkkosovellusten kehittämisessä.

Kuten aina, voit lähettää ideoita aiheista, joita haluat käsitellä tulevissa sarakkeissa tai Microsoft Knowledge Base -tietokannassa Kysy tietoja -lomakkeella.

Tarvitsetko lisäohjeita?

Kehitä taitojasi
Tutustu koulutusmateriaaliin
Saat uudet ominaisuudet ensimmäisten joukossa
Liity Microsoft Insider-käyttäjille

Oliko näistä tiedoista hyötyä?

Kuinka tyytyväinen olet käännöksen laatuun?
Mikä vaikutti kokemukseesi?

Kiitos palautteesta!

×