ASP.NET la colonne Voix du support technique
Mises à jour de page dynamiques à l’aide de XMLHTTP
Pour personnaliser cette colonne selon vos besoins, nous souhaitons vous inviter à soumettre vos idées sur des sujets qui vous intéressent et des problèmes que vous souhaitez consulter dans les prochains articles de la Base de connaissances et dans les colonnes Voix du support technique. Vous pouvez envoyer vos idées et commentaires à l’aide du formulaire Demander le formulaire. Il existe également un lien vers le formulaire au bas de cette colonne.
INTRODUCTION
L’une de mes méthodes favorites de recherche sur l’utilisation des applications Web consiste à regarder ma femme naviguer dans un site web. Elle peut se déplacer très bien sur Internet, mais elle ne sait pas grand chose des aspects techniques de faible niveau (qu’elle appelle « les choses peu pratiques ») qui font que tout fonctionne.
Un soir, je regarde ma femme se faire une application de commerce électronique avec l’un des grands garçons. Elle était en cours d’exploration dans une liste de produits à l’aide de plusieurs listes drop-downs, chacune alimentant la sélection précédemment. Quand elle a cliqué sur un élément dans chaque liste drop-down, la page publiée de nouveau pour obtenir des données pour la liste suivante. L’expérience était frustrante pour elle, car son impression était que cela prenait beaucoup de temps en raison des précédents billets.
Le niveau de frustration qu’elle traversait aurait pu être facilement atténuer par les développeurs de l’application s’ils utilisaient uniquement XMLHTTP pour récupérer les données au lieu de les publier de nouveau. C’est l’objectif de la colonne de ce mois- ci. Je vais vous montrer comment utiliser XMLHTTP pour mettre à jour une partie d’une page web avec des données d’un service web Microsoft ASP.NET sans avoir à revenir en arrière. Cela va être vraiment cool ! Fais-moi confiance.
Vue d’ensemble générale
XMLHTTP fonctionne en envoyant une demande au serveur web à partir du client et en renvoyant une île de données XML. Selon la structure du XML reçu, vous pouvez utiliser XSLT ou la gestion des dom XML pour le manipuler et lier des parties de la page à ces données. Il s’agit d’une technique extrêmement puissante.
NoteMicrosoft offre un comportement de service Web pour Internet Explorer qui rend les appels asynchrones vers les services ASP.NET web de façon simple et rapide. Toutefois, ce comportement n’est pas pris en charge et n’est pas la meilleure façon de mettre à jour une page de façon asynchrone. Nous vous préférons utiliser XMLHTTP.
Dans l’exemple que je vais passer dans cette colonne, je passerai trois appels de service web à un service web ASP.NET via XMLHTTP. Le service web interroge la base de données Northwind sur le SQL Server local et retourne un jeu de données au client sous la forme d’un diffgram XML. J’utilise ensuite le dom XML pour analyser ces données XML et mettre à jour dynamiquement des parties de ma page. Tout cela sera effectué sans publication de retour.
Le service web
Le service web que j’utilise s’appelle DynaProducts. Il s’agit d ASP.NET service web de base écrit en C# et contenant les trois méthodes suivantes.
-
GetCategories – Renvoie un dataset qui contient toutes les catégories de la table Categories.
-
GetProducts – renvoie un dataset qui contient tous les produits de la catégorie qui sont transmis à la méthode.
-
GetProductDetails – Renvoie un dataset qui contient des détails sur le produit dont ProductID est transmis à la méthode.
Page HTML
La première chose qui peut vous sembler difficile à trouver dans cet exemple est la page que je met à jour même si le service web ASP.NET n’est pas une ASP.NET page. Il s’agit simplement d’une page HTML classique. Toutefois, j’ai ajouté une quantité importante de JavaScript côté client à la page, et c’est ce script qui permet d’appeler le service web.
Examinons le premier extrait de code de la page 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);
}
}
Il s’agit de la plus grande partie de code de la page. Je souhaite l’analyse plus en détail pour vous aider à comprendre ce qui se passe.
En haut de ce bloc de script, j’ai créé deux variables : objHttp et objXmlDoc. Voici les variables que je vais utiliser pour mon objet XMLHTTP et mon objet DOM XML. Immédiatement après cela se trouve la définition de la fonction getDataFromWS. Il s’agit de la fonction qui est responsable de l’appel côté client au service web. Il prend les quatre arguments suivants, dont deux sont facultatifs :
-
methodName – Nom de la méthode d’appel sur le service web.
-
dataSetName – Nom du dataset renvoyé par le service web.
-
wsParamValue – Valeur du paramètre transmis au service web, le cas échéant. (Facultatif)
-
wsParamName – Nom du paramètre transmis au service web, le cas échéant. (Facultatif)
Nous allons décomposer la fonction getDataFromWS en plusieurs parties et discuter de chacune d’elles. Voici le premier extrait :
// 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");
Ce bloc de code crée l’objet XMLHTTP et l’objet Document XML. Je commence ensuite à créer l’enveloppe 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>";
Dans ce code, j’affecte l’enveloppe SOAP à une variable de chaîne afin de pouvoir la transmettre au service web. Il est en réalité très facile de découvrir comment mettre en forme l’enveloppe SOAP pour votre service web. Accédez simplement au service web, puis cliquez sur l’une des méthodes pour voir une enveloppe SOAP pour cette méthode. Par exemple, voici ce que je vois lorsque je navigue vers la méthode GetCategories du service web wsXMLHTTP que j’ai créé pour cet article :
HTTP GET. Dans l’exemple présenté dans cet article, j’utilise LA PUBLICATION HTTP.
Pour l'instant ça va. Examinons maintenant la section suivante du code.
// 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;
}
}
Lorsqu’une demande est faite via XMLHTTP, l’objet XMLHTTP utilise une propriété readyState pour suivre l’état de la demande. Lorsque toutes les données ont été reçues à partir du service web, la propriété ReadyState s’advenir à la valeur 4. La propriété onreadystatechange pour l’objet XMLHTTP vous permet de configurer une fonction de rappel qui sera appelée lorsque la propriété ReadyState change. En veillant à ce que les données soient entièrement reçues, je peux continuer à agir sur ces données jusqu’à ce que je soit prêt.
Une fois toutes les données reçues, je crée une île de données XML avec la réponse à l’aide de la propriété ResponseText. Comme vous le savez probablement, la réponse d’un service web est au format XML. Dans ce cas, je retourne un jeu de données Microsoft ADO.NET DataSet.
La section suivante de ce bloc de code utilise une instruction de commutateur pour appeler la fonction appropriée en fonction du nom du dataset renvoyé par le service web. J’entrerai dans le code de ces fonctions plus en détail un peu plus tard.
Examinons maintenant le code qui effectue la demande 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);
La variable szUrl contient l’URL utilisée pour appeler le service web à des fins de clarté. J’ai ensuite une instruction si qui s’attaque à des paramètres transmis comme valeur QueryString. Dans votre environnement, vous souhaitez peut-être ajouter les paramètres à l’enveloppe SOAP. Dans les deux cas, tout va bien.
La méthode ouverte de l’objet XMLHTTP est appelée suivante. J’ai utilisé les trois premiers arguments pour la méthode ouverte. la méthode, l’URL et une valeur boolénaire qui spécifie si l’appel est asynchrone ou non.
Important Si vous faites un appel asynchrone en l’état, vous devez configurer une fonction de rappel par le biais de la propriété onreadystatechanged.
Une fois que l’en-tête de demande du type de contenu est prêt, j’envoie la demande sous forme d’enveloppe SOAP à l’aide de la variable de chaîne que j’ai déjà remplie.
Nous avons à présent fait le reste du code à l’aide de la demande XMLHTTP. Examinons à présent le code qui gère l’interface dans le navigateur et qui gère la réponse d’un appel de service web.
Tout d’abord, nous allons examiner la fonction appelée lors du premier chargement de la page.
function getCategories()
{
var func = "getDataFromWS('GetCategories', 'CategoriesDS')";
document.all.lblCategoryDropdown.innerText =
"Please wait while data is retrieved...";
window.setTimeout(func, 1);
}
La première chose que je fais dans cette fonction est de créer une variable pour stocker la signature de la fonction pour getDataFromWS. Je le fais parce que je vais appeler window.setTimeout à la fin de cette fonction pour appeler la fonction getDataFromWS. L’objectif de cette approche est de me permettre d’afficher l’état à l’utilisateur en attendant la fin de l’appel de service web. Remarquez que je modifie le texte interne d’une DIV pour afficher un message indiquant que les données sont récupérées. Je programme ensuite la fonction getDataFromWS via l’appel window.setTimeout, que je définisse comme s’exécuter en une milliseconde.
Traitement de la réponse au service Web
N’oubliez pas que j’ai déjà utilisé la propriété onreadystatechanged pour configurer une fonction de rappel. Souvenez-vous également que la fonction de rappel contient une instruction de commutateur qui appelle une fonction particulière basée sur le nom DataSet. Dans ce cas, notre nom DataSet est CategoriesDS. Par conséquent, la fonction processCategory sera appelée à partir de la fonction de rappel. Examinons cette fonction pour voir comment utiliser la base de données XML pour examiner la réponse du service 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";
}
}
N’oubliez pas que la fonction getDataFromWS chargée XML de la réponse dans l’objet objXmlDoc. Dans la fonction processCategory, j’entre ce XML et l’ensemble de celui-ci pour remplir la zone de dépôt Catégorie.
La première chose à faire est de créer un objet IXMLDOMNodeList à l’aide d’une partie de la réponse XML. Le dataset renvoyé à partir de l’appel de service web est renvoyé sous la mesure d’un diffgram, et la seule partie de cette réponse qui m’intéresse est les données du datatable que j’ai inséré dans DataSet. Je peux y arriver en créant un objet IXMLDOMNodeList à partir du bloc XML qui contient le datatable.
Si vous consultez le code du service web, vous verrez que je crée un datatable nommé Categories et que je l’ajoute au DataSet. Lorsque le fichier XML est renvoyé à partir du service web, DataSet est contenu dans un bloc> <CategoriesDS, et chaque ligne du tableau de données est contenue dans des blocs> catégories de <distincts, comme illustré dans le fichier XML ci-dessous.
Les fichiers suivants peuvent être téléchargés à partir du Centre de téléchargement Microsoft :
119591 Comment obtenir des fichiers de support Microsoft auprès des services en ligne. Microsoft a analysé ce fichier à la recherche
de virus. Microsoft a utilisé les logiciels de détection de virus les plus récents disponibles à la date de publication de ce fichier. Le fichier est conservé sur des serveurs sécurisés, ce qui empêche toute modification non autorisée du fichier.
Pour obtenir le bloc XML qui contient ce tableau de données, j’utilise le code suivant :
objNodeList = objXmlDoc.getElementsByTagName("Categories");Ceci renvoie un objet IXMLDOMNodeList qui contient chaque <catégories> nœud. J’itérer ensuite cette liste à l’aide d’un for loop.
// 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";
}
Je sais que chaque nœud <Categories> aura deux nœuds dont j’ai besoin : le nœud d’ID <> et le nœud <CategoryName>. Par conséquent, la première chose que je dois faire est de créer une nouvelle liste IXMLDOMNodeList et de la remplir avec les nœuds enfants du nœud de <catégories> niveaux.
dataNodeList = objNodeList[i].childNodes;
J’utilise ensuite la méthode de l’élément pour accéder aux deux nodes que j’ai besoin de remplir dans ma liste drop-down. Le premier nœud contient le champ CategoryID de la base de données, et le deuxième nœud le champ CategoryName de la base de données. Je crée un objet Option, je définisse le texte sur CategoryName, je définisse la valeur CategoryID et je l’ajoute à la zone de texte DrpCategory. Le code utilisé dans les fonctions restantes utilise la même méthode pour retirer les données nécessaires à partir de la réponse XML et remplir des parties de la page.
Remarque : nous traitons ici de petites quantités de données, l’utilisation de la gestion des biens et des opérations est un excellent moyen d’en retirer les données dont nous avons besoin. Si vous avez affaire à une grande quantité de données, vous pouvez choisir d’utiliser XSLT à la place.
Comment tout faire pour que tout fonctionne
À présent que j’ai couvert des détails précis concernant son fonctionnement, il est temps de voir comment vous pouvez utiliser les exemples de fichiers inclus pour le consulter.
Déploiement du service Web
Pour déployer le service ASP.NET Web, il vous suffit de désipiper l’échantillon de service web joint à la racine de votre serveur web. Vous devrez ensuite ouvrir le code pour DynaProducts.asmx et modifier la chaîne de connexion. Au moins, vous devez entrer le mot de passe SA. Une fois ces changements effectués, recompilez le service web.
Déploiement du fichier HTML
Le fichier HTML contient une variable nommée szUrl qui contient une URL vers le service web. Vous trouverez cette variable dans la fonction getDataFromWS près du bas de la fonction. Vous devrez changer cela en l’URL du service web que vous avez déployé ci-dessus.
Après avoir déployé le service web et le fichier HTML, accédez au fichier HTML. Lors du chargement, la zone de chargement de la catégorie est remplie par la première demande XMLHTTP vers le service web. Une fois que cette catégorie a été remplie, sélectionnez une catégorie pour lancer la prochaine demande XMLHTTP qui remplit la zone de la zone de chute Produits. La sélection d’un produit dans la zone de la zone de la zone Produits remplit une table avec des données relatives à ce produit.
Notez que la page ne se publie pas pendant l’une de ces demandes XMLHTTP. C’est la beauté des demandes XMLHTTP. Si je l’avais fait sur une grande page, la page aurait également conservé sa position de défilement sans « clignotement » sur l’utilisateur. Si vous me le demandez, vous pouvez y voir des choses assez puissantes !
Une autre chose : dans cet article, j’ai utilisé XMLHTTP pour interroger un service web. J’aurais pu l’utiliser aussi facilement pour faire une demande de page ASPX ou ASP. Les possibilités d’utilisation de cette technologie sont illimitées. J’espère que XMLHTTP vous sera utile dans le prochain développement de vos applications web.
Comme toujours, n’hésitez pas à soumettre des idées sur des sujets que vous souhaitez aborder dans des colonnes futures ou dans la Base de connaissances Microsoft à l’aide du formulaire Demander.
