ASP.NET Hang támogatása oszlop
Dinamikus lapfrissítések az XMLHTTP használatával
Ennek az oszlopnak az igényeinek megfelelően való testreszabásához szeretnénk meghívni Önt, hogy küldje el az Önt érdeklendő témákkal kapcsolatos ötleteit, valamint a jövőbeli Tudásbázis-cikkekben és a Támogatási hangoszlopok között megoldani kívánt problémákat. A Ask For It űrlapon elküldheti ötleteit és visszajelzéseit. Az oszlop alján található egy hivatkozás is az űrlapra.
BEVEZETÉS
Az egyik kedvenc módszerem a webalkalmazások használhatóságának tanulmányozása, hogy a feleségem navigál egy webhelyen. Elég jól tud az interneten keresztül menni, de nem ismeri az alacsony szintű technikai aspektusokat (amit ő "a rossz dolgoknak" hív), amelyek ezt az egész munkát teszik ki.
Egy nemrég történt este a feleségem egy e-kereskedelmi alkalmazást ottott az egyik nagy fiútól. Több legördülő menüt használva ásott egy termékbe, és mindegyiket a korábban kiválasztottakból etette ki. Amikor az egyes legördülő menük egyik eleméhez kattintott, a lap újra közzé lett adva, hogy adatokat kapjon a következő legördülő menüből. Az élmény bosszantó volt számára, mert azt tapasztalta, hogy a bejegyzés visszakommentése miatt sokáig tartott.
Az alkalmazás fejlesztői egyszerűen mérséklhették az alkalmazás fejlesztői által tapasztalt zavart, ha csak az XMLHTTP segítségével szerezték be az adatokat ahelyett, hogy közzétennék őket. Erről szól az e havi oszlop. Be szeretném mutatni, hogyan frissítheti a weblapok egy részét az XMLHTTP használatával a Microsoft ASP.NET webszolgáltatásból származó adatokkal anélkül, hogy közzéten volna egy bejegyzést. Ez nagyon nagyszerű lesz! bízz bennem.
Általános áttekintés
Az XMLHTTP úgy működik, hogy kérést küld a webkiszolgálónak az ügyfélről, és visszaküld egy XML-adat szigetet. A kapott XML szerkezetétől függően az XSLT vagy az XML DOM használatával kezelheti azt, és az oldal bizonyos részeit az adatokhoz kötheti. Ez egy rendkívül hatékony technika.
A NoteMicrosoft olyan webszolgáltatás-viselkedést biztosít az Internet Explorerben, amely gyors és egyszerű ASP.NET teszi lehetővé a webes szolgáltatásokhoz való aszinkron hívásokat. Ez a viselkedés azonban nem támogatott, és nem a legjobb módszer a lap aszinkron frissítésére. Helyette az XMLHTTP-t kell használnia!
Ebben az oszlopban az alábbi példában három webszolgáltatás-hívást kezdeményezek egy ASP.NET XMLHTTP-alapú webszolgáltatáshoz. A webszolgáltatás lekérdezi a Northwind adatbázist a helyi SQL Serveren, és EGY XML-diffgram formájában visszaad egy Adatkészletet az ügyfélnek. Ezután az XML DOM segítségével elemezem az XML-adatokat, és dinamikusan frissítem a lap egyes részeit. Mindezeket közzétenés nélkül fogjuk tenni.
A webszolgáltatás
A használt webszolgáltatás neve DynaProducts. Ez egy egyszerű ASP.NET webszolgáltatás, amely c# nyelven íródott, és az alábbi három módszert tartalmazza.
-
GetCategories – A Kategóriák tábla összes kategóriáját tartalmazó Adatkészletet ad eredményül.
-
GetProducts – A metódusnak átadott kategória összes termékét tartalmazó Adatkészletet ad eredményül.
-
GetProductDetails – Egy Adatkészletet ad eredményül, amely annak a terméknek az adatait tartalmazza, amelynek a termékazonosítóját átküldték a módszernek.
A HTML-lap
Az első dolog, ami a mintával kapcsolatban előfordulhat, hogy a frissítem ezt a lapot, de a ASP.NET webszolgáltatás nem egy ASP.NET lap. Ez csak egy szokásos HTML-lap. A laphoz azonban megfelelő mennyiségű ügyféloldali JavaScript-fájlt adott hozzá, és ez a parancsfájl kezdeményezi a hívásokat a webszolgáltatáshoz.
Nézzük meg a HTML-lap első kódrészletét.
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);
}
}
Ez a lap legnagyobb kódszáma, és szeretném részletesen átlapni, hogy megértse, mi történik.
A parancsfájlblokk tetején két változót hoztam létre: objHttp és objXmlDoc. Ezeket a változókat fogom használni az XMLHTTP-objektumhoz és az XML DOM-objektumhoz. Közvetlenül ezt követően a getDataFromWS függvény függvénydefiníciója. Ez a függvény felelős azért, hogy ügyféloldali hívást hívjon a webszolgáltatáshoz. Az alábbi négy argumentum szükséges, amelyek közül kettő nem kötelező:
-
methodName – A webszolgáltatásban felhívó módszer neve.
-
dataSetName – A webszolgáltatás által visszaadott Adatkészlet neve.
-
wsParamValue – A webszolgáltatásnak adott esetben átadott paraméter értéke. (Nem kötelező)
-
wsParamName – A webszolgáltatásnak adott esetben átadott paraméter neve. (Nem kötelező)
A GetDataFromWS függvényt részekre kell lebontani, és mindegyiket meg kell beszélni. Az első kódtöredék:
// 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");
Ez a kódblokk létrehozza az XMLHTTP objektumot és az XML-dokumentum objektumot. Ezután elkezdem létrehozni a SOAP borítékot.
// 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>";
Ebben a kódban a SOAP borítékot egy karakterláncváltozóhoz rendelem, hogy át tudjam adni a webszolgáltatásnak. A SOAP-boríték webszolgáltatáshoz való formázása valójában nagyon egyszerű. Egyszerűen keresse meg a webszolgáltatást, és az egyik módszerre kattintva nyissa meg az erre a módszerre vonatkozó SOAP-borítékot. Az alábbit láthatom például a cikkhez létrehozott wsXMLHTTP webszolgáltatás GetCategories metódusának böngészésekor: a 
használni. A cikkben bemutatott példában a HTTP POST protokollt fogom használni.
eddig jó. Most nézzük meg a kód következő szakaszát.
// 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;
}
}
Az XMLHTTP szolgáltatáson keresztüli kérések esetén az XMLHTTP objektum egy readyState tulajdonságot használ a kérelem állapotának nyomon követéséhez. Amikor az összes adat vissza lett kapva a webszolgáltatástól, a readyState tulajdonság értéke 4 lesz. Az XMLHTTP objektum onreadystatechange tulajdonsága lehetővé teszi egy visszahívási függvény beállítását, amely a readyState tulajdonság megváltozásakor hívható meg. Ha gondoskodni szeretnék arról, hogy az adatok teljes egészében beérkezettek, mindaddig nem tudok az adatokon tovább tanácsokat tartani, amíg nem áll készen.
Miután minden adatot megkapott, létrehozok egy XML-adat szigetet a válaszul a responseText tulajdonság használatával. Amint valószínűleg tudja, a webszolgáltatás válasza XML formátumban van. Ebben az esetben egy Microsoft-adatkészletet ADO.NET vissza.
A kódblokk következő szakasza egy kapcsoló utasítással hívja fel a megfelelő függvényt a webszolgáltatásból visszaadott Adatkészlet neve alapján. Ezeket a függvényeket kicsit később részletezem.
Most nézzük meg azt a kódot, amely ténylegesen végrehajtja az XMLHTTP-kérelmet.
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);
Az szUrl változó tartalmazza a webszolgáltatás hívására használt URL-címet az érthetőség érdekében. Ezután van egy ha utasításom, amely a QueryString értékként átadott paramétereket visszaveszi. A környezetben előfordulhat, hogy a PARAMÉTEREKet hozzá szeretné adni a SOAP borítékhoz. Mindkét módszer jól működik.
Az XMLHTTP objektum nyitott metódusát a következőnek nevezzük. A megnyitott módszer első három argumentumát használtam; a metódus, az URL-cím és egy logikai érték, amely megadja, hogy a hívás aszinkron-e.
Fontos: Ha aszinkron hívást hoz létre, miközben én itt vagyok, be kell állítania egy visszahívási függvényt az onreadystatechanged tulajdonságon keresztül.
Miután beállította a tartalomtípus kérésfejlécét, a kérést SOAP-borítékként küldjük a korábban kitöltve változóval.
Most már átszámoltunk minden kódot, amely az XMLHTTP kérést teszi. Most nézzük meg azt a kódot, amely kezeli a kezelőfelületet a böngészőben, és amely kezeli a webszolgáltatás-hívás válaszát.
Először a lap első betöltésekor a függvény neve látható.
function getCategories()
{
var func = "getDataFromWS('GetCategories', 'CategoriesDS')";
document.all.lblCategoryDropdown.innerText =
"Please wait while data is retrieved...";
window.setTimeout(func, 1);
}
A függvény első lépéseként létrehozok egy változót a getDataFromWS függvénya aláírásának tárolására. Azért tennem ezt, mert a függvény végén felhívom a window.setTimeout függvényt a getDataFromWS függvény hívásához. Ennek a módszernek az a célja, hogy megjelenítsem a felhasználó állapotát, miközben a webszolgáltatás-hívás befejeződik. Figyelje meg, hogy egy ZÉRÓOSZTÓ szövegét módosítom úgy, hogy megjelenítsem az adatok beolvasását jelző üzenetet. Ezután a window.setTimeout híváson keresztül ütemezem a getDataFromWS függvényt, és egy ezredmásodpercben beállítottuk a futását.
A webszolgáltatás válaszának feldolgozása
Ne feledje, hogy korábban az onreadystatechanged tulajdonsággal konfiguráltam egy visszahívási függvényt. Ne feledje azt is, hogy a visszahívási függvény tartalmaz egy kapcsoló utasítást, amely az Adatkészlet neve alapján hív meg egy adott függvényt. Ebben az esetben az Adatkészlet neve CategoriesDS. Ezért a processCategory függvényt a visszahívási függvény hívja meg. Vessünk egy pillantást erre a függvényre, és nézzük meg, hogyan elemezze a webszolgáltatás válaszát az XML DOM segítségével.
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";
}
}
Ne feledje, hogy a getDataFromWS függvény betöltötte az XML-t a válaszból az objXmlDoc objektumba. A processCategory függvényben az XML-t elemezve kitöltem a Kategória legördülő adatokat.
Az első dolog, amit tennem kell, hogy létrehozok egy IXMLDOMNodeList objektumot az XML-válasz egy részével. A webszolgáltatás-hívásból visszakapott Adatkészletet a rendszer diffgramként adja vissza, és a válasznak csak az a része érdekli, hogy a DataTable-ból származó adatokat szúrtam be a DataSetbe. Ezt úgy kaphatom meg, hogy létrehozok egy IXMLDOMNodeList objektumot a DataTable-t tartalmazó XML-blokkból.
Ha megnézi a webszolgáltatás kódját, láthatja, hogy létrehozok egy Kategóriák nevű adattáblát, és hozzáadom az Adatkészlethez. Amikor az XML-t visszaadja a webszolgáltatás, az adatkészlet egy <CategoriesDS> blokkban található, és az adattábla minden egyes sora külön <Kategóriák> blokkban található, az alábbi XML-fájlban látható módon.
A Microsoft letöltőközpontból a következő fájlok tölthetők le:
csomagot.
119591 A Microsoft támogatási fájljainak beszerzése az online szolgáltatásokból A Microsoft vírusokat keresve ellenőrizte a
fájlt. Ennek során a Microsoft a fájl közzétételének napján elérhető legfrissebb vírusvédelmi szoftvert használta. A fájlt fokozott biztonságú kiszolgálók tárolják, amelyek meggátolják a fájl bármilyen jogosulatlan módosítását.
A DataTable-t tartalmazó XML-blokk letöltéséhez a következő kódot használom:
objNodeList = objXmlDoc.getElementsByTagName("Categories");Ez egy IXMLDOMNodeList objektumot ad vissza, amely a <kategóriákat> csomópontot. Ezután a listában egy ismétlést használva iterálok.
// 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";
}
Már tudom, hogy minden <Kategóriák> csomópont két csomópontot fog tartalmazni, amelyekre szükségem van: a <ID> csomópontot és a <CategoryName> csomópontot. Ezért az első lépés, hogy létrehozok egy új IXMLDOMNodeList listát, és feltöltem az aktuális <Kategóriák és> csomópont gyermekcsomópontjaival.
dataNodeList = objNodeList[i].childNodes;
Ezután az elemmódszert használva mindkét csomóponthoz hozzáférhetek, amelyekre a legördülő lista feltöltéséhez szükségem van. Az első csomópont az adatbázis CategoryID mezőjét, a második pedig az adatbázis CategoryName mezőjét tartalmazza. Létrehozok egy új Option objektumot, a szöveget CategoryName értékre állítva a CategoryID értéket, majd hozzáadom a drpCategory legördülő gombra. A többi függvényben használt kód ugyanazt a módszert használja a szükséges adatok xml-válaszból való ki- és feltöltéséhez.
Fontos tudni, hogy mivel itt kevés adat áll rendelkezésre, a DOM használatával nagyszerűen ki lehet húzni a szükséges adatokat. Ha sok adattal volt dolga, ehelyett az XSLT-t használhatja.
Hogyan lehet mindent rendben csinálni?
Most, hogy részletesen átfedtem a részleteket arról, hogy mindez hogyan működik, át kell mennie, hogy miként használhatja a mellékelt mintafájlokat, hogy lássa, hogyan működik a saját maga számára.
A webszolgáltatás telepítése
A ASP.NET webszolgáltatás telepítéséhez egyszerűen kibontsa a csatolt webszolgáltatásmintát a webkiszolgáló gyökeréhez. Ezután meg kell nyitnia a DynaProducts.asmx kódját, és módosítania kell a kapcsolati karakterláncot. Legalább meg kell adnia a biztonsági társítás jelszavát. Miután ezt a változtatást tette, újrakompilissze a webszolgáltatást.
A HTML-fájl telepítése
A HTML-fájl tartalmaz egy szUrl nevű változót, amely a webszolgáltatás URL-címét tartalmazza. Ez a változó a getDataFromWS függvényben a függvény alján található. Ezt a fenti webszolgáltatás URL-címére kell módosítania.
A webszolgáltatás és a HTML-fájl telepítése után keresse meg a HTML-fájlt. Amikor betöltődik, a Kategória legördülő menüt kitölti a webszolgáltatáshoz tartozó első XMLHTTP-kérés. Miután ki lett töltve, válasszon ki egy kategóriát a következő XMLHTTP-kérést, amely kitölti a Termékek legördülő adatokat. Ha kiválaszt egy terméket a Termékek legördülő menüből, a rendszer feltölt egy táblát az adott termékre vonatkozó adatokkal.
Figyelje meg, hogy a lap nem kerül vissza a lapra ezen XMLHTTP-kérések egyikében sem. Ez az XMLHTTP-kérések szépsége. Ha ezt egy nagy lapon tenném meg, akkor a lap görgetési pozíciója is megmaradna anélkül, hogy a felhasználónál villogna. Ha megkérdezi, az igazán hatékony dolog!
Még egy dolog: ebben a cikkben az XMLHTTP használatával lekérdezést használtam egy webszolgáltatásban. Könnyedén használtam volna, ha egy ASPX-lapra vagy egy ASP-lapra vonatkozó kérést szeretnék kérni. A technológia használatának lehetőségei végtelenek. Reméljük, hogy az XMLHTTP hasznosnak fogja találni a jövőben a webalkalmazások fejlesztését.
Mint mindig, nyugodtan elküldheti ötleteit a jövőbeli oszlopokban vagy a Microsoft Tudásbázisban a Rá vonatkozó űrlap használatával.
