Обновления динамической страницы с помощью XMLHTTP

Переводы статьи Переводы статьи
Код статьи: 893659 - Vizualiza?i produsele pentru care se aplic? acest articol.
Поддержка августовский выпуск ASP.NET

Обновления динамической страницы с помощью XMLHTTP

Чтобы настроить этот столбец в соответствии с потребностями, мы хотим пригласить вас отправил идей тем, интересующих вас и проблемы, которые необходимо просмотреть направлено в будущих статьях базы знаний и поддержка голосовой связи столбцов. Вы можете отправить свои идеи и с помощью обратной связи Попросите его форма. Имеется также ссылка на форму в нижней части этого столбца.
Развернуть все | Свернуть все

В этой статье

ВВЕДЕНИЕ

Является одним из моих любимых способов изучения удобства работы приложения веб смотреть моя жена перемещаться по веб-узла. Она может сделать ее обойти Интернет довольно хорошо, но знает мало нижнего уровня о технических аспектов (то, что она вызывает "скучные" материалы"), сделать его работы.

На последний вечер, смотрел моя жена высматривать приложения электронной коммерции от одного из большой мальчики. Она детализация списка с помощью нескольких раскрывающиеся каждого из них подкормки от выбора, сделанного ранее продукции. При выборе элемента в каждом раскрывающемся списке она отправка страницы назад, чтобы получить данные для следующей раскрывающегося списка. Опыт был неприятно для нее, поскольку ее показалось, что он слишком много времени из-за обратной.

Уровень разочарование, она обработки может было легко исчезнут разработчиками приложения XMLHTTP только они используются для извлечения данных, а не обратной передаче. Это — об этом месяце. Будет показано, как использовать для обновления части веб-страницы с данными из ASP.NET веб-службы не выполняя обратный XMLHTTP. Это будет замечательно! Поверьте мне.

Общие сведения

XMLHTTP работает путем отправки запроса веб-сервера от клиента и возвращение острова данных XML. В зависимости от структуры полученного XML можно использовать XSLT или XML DOM манипулировать ими и привязки к данным частей страницы. Это очень мощная технология.

Примечание Корпорация Майкрософт предоставляет поведение веб-службы для Internet Explorer, делает асинхронные вызовы ASP.NET веб-службам быстро и легко. Однако такое поведение не поддерживается и не является лучшим способом асинхронно обновить страницу. Вместо него следует использовать XMLHTTP!

В примере, который будет работать через в этой статье я сделает трех вызовов веб-служб ASP.NET веб-службы через XMLHTTP. Веб-служба будет запрос к базе данных "Борей" на локальном SQL Server и возвращается клиенту в виде XML diffgram набора данных. Я затем использовать для анализа данных XML XML DOM и динамически обновлять части страницы. Все это будет сделано без обратная передача.

Веб-службы

Я буду использовать веб-служба имеет имя DynaProducts. Это основные ASP.NET веб-службы, написанного на C# и содержит следующие три метода.
  • GetCategories — возвращает объект DataSet, содержащий все категории в таблицу Categories.
  • GetProducts — возвращает объект DataSet, содержащий все продукты категории, которые передаются в метод.
  • GetProductDetails — возвращает объект DataSet, содержащий сведения о продукта ProductID которого передается в метод.

HTML-страницы

Первое, что может соблюсти об этом примере является то, что обновлении Хотя ASP.NET веб-службы страница не является страницей ASP.NET. Это просто обычный HTML-страницы. Однако я добавил значительное количество клиентского сценария JavaScript на странице, и это сценарий, обращающийся к веб-службе.

Давайте рассмотрим первый фрагмент кода из 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 это. Это функция, которая отвечает за вызов клиентского веб-службы. Выполняются следующие четыре аргумента, два из которых являются необязательными.
  • имя_метода — имя метода для вызова веб-службы.
  • dataSetName – имя набора данных, возвращаемых веб-службой.
  • wsParamValue – значение параметра, который передается веб-службе, если применимо. (Необязательно)
  • wsParamName — имя параметра, который передается веб-службе, если применимо. (Необязательно)
Давайте разбить на части функции getDataFromWS и обсуждать каждый слайд. Вот первый фрагмент:
// 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 в строковую переменную, чтобы его можно передать на веб-службы. Он достаточно прост для определения способа форматирования конверт SOAP веб-службы. Просто перейдите на веб-службу и выберите один из способов, чтобы увидеть конверт SOAP для метода. Например вот, которые отображаются при просмотре в метод GetCategories wsXMLHTTP веб-службы, который я создал для этой статьи:

Свернуть это изображениеРазвернуть это изображение
Envelope.PNG


ASP.NET о том, как следует форматировать конверт SOAP HTTP POST и HTTP GET. В примере представлены в этой статье я буду использовать HTTP POST.

Так что пока все неплохо. Теперь давайте взглянем на код в следующем разделе.
// 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;

				}
			}
При запросе через XMLHTTP объект XMLHTTP использует свойства readyState для отслеживания состояния запроса. Если все данные были получены от веб-службы, свойство readyState изменяется на значение 4. Свойство onreadystatechange объекта XMLHTTP позволяет настроить функцию обратного вызова, который вызывается при изменении свойства readyState . Убедитесь, что данные получены полностью, можно сохранить с обработкой данных пока я готов.

После получения всех данных я создаю острова данных XML с ответом, используя свойство responseText . Как вы вероятно знаете ответ от веб-службы имеет формат XML. В данном случае я возвращал объект DataSet ADO.NET Microsoft.

Этот блок кода в следующем разделе использует инструкцию switch для вызова соответствующей функции на основе имени набора данных, возвращаемых веб-службы. Я расскажу код для этих функций подробно чуть позже.

Теперь давайте взглянем на код, который фактически выполняет запрос 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-адрес, используемый для вызова веб-службы для простоты. Если после инструкции, tacks на любые параметры, передаваемые в качестве значения строки запроса . В среде необходимо добавить параметры конверта SOAP. В любом случае будет прекрасно работать.

Далее вызывается метод open объекта XMLHTTP. Я использовал первых трех аргументов для метода open; метод, URL-адрес и логическое значение, указывающее, является ли вызов асинхронным.
Важно Как я здесь, осуществляющим асинхронный вызов, необходимо настроить функцию обратного вызова через свойство onreadystatechanged .

После задания заголовка запроса для типа содержимого как конверт SOAP с помощью строковой переменной, которую я заполняется ранее отправить запрос.

Теперь мы решили выследить для всего кода, который выполняет запрос XMLHTTP. Теперь давайте посмотрим на код, обрабатывающий интерфейс в браузере и который обрабатывает ответ от вызова веб-службы.

Сначала мы рассмотрим функцию, которая вызывается при первой загрузке страницы.
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 . Цель этого подхода является разрешить состояние отображается для пользователя при ожидании вызова веб-службы для выполнения. Обратите внимание, что я изменение innerText элемента DIV, чтобы отобразить сообщение о том, что данные извлекаются. Затем я планирую через window.setTimeout вызов функции getDataFromWS и установить его на работу в одной миллисекунды.

Обработка ответ веб-службы

Ранее, следует помните, что я использовал свойство onreadystatechanged , чтобы настроить функцию обратного вызова. Также следует помните, что функция обратного вызова содержит инструкцию switch, которая вызывает определенные функции на основе имени набора данных. В этом случае наше имя набора данных — CategoriesDS. Таким образом функция processCategory будет вызываться из функции обратного вызова. Давайте посмотрим на эту функцию, чтобы узнать, как использовать XML DOM для синтаксического анализа ответа от веб-службы.
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 принимают XML и анализировать его для заполнения раскрывающегося списка Категория.

Первое, что я делаю это создание части ответа XML с помощью объекта IXMLDOMNodeList . Возвращаемый набор данных, я возвращал из вызова веб-службы в формате diffgram, а только часть этого ответа, который меня действительно интересует данные из объекта DataTable, вставленный в набор данных. Можно получить, создав объект IXMLDOMNodeList из блок XML, содержащий объект DataTable.

Если взглянуть на код веб-службы, вы увидите, что создается объект DataTable с именем категории и добавить его в набор данных. При возвращении из веб-службы XML, содержащийся в блоке <CategoriesDS>набора данных и каждой строки в DataTable содержится в отдельные блоки <Categories>как показано ниже XML-файла.

</Categories></CategoriesDS>Следующие файлы доступны для загрузки Майкрософт Центра загрузки Майкрософт:
Свернуть это изображениеРазвернуть это изображение
Загрузить
Загрузите пакет GetCategories.xml.
Свернуть это изображениеРазвернуть это изображение
Загрузить
Загрузите пакет WSXMLHTTP.exe.Дополнительные сведения о том, как загрузить файлы поддержки Майкрософт, см. в следующей статье базы знаний Майкрософт:
119591 Как загрузить файлы поддержки Microsoft через оперативные службы
Корпорация Майкрософт проверила этот файл на наличие вирусов. Корпорация Майкрософт использует последние антивирусные программы на дату, которая была учтена в файл. Файл хранится на защищенных серверах, что предотвращает внесение несанкционированных изменений в файл.

Чтобы получить блок XML, содержащий этот объект DataTable, я использую следующий код:
objNodeList = objXmlDoc.getElementsByTagName("Categories");
Возвращает объект IXMLDOMNodeList , содержащий каждый узел <Categories>. Затем прохода через этот список с помощью цикла for.</Categories>
// 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";
       
    }
Мы уже знаем, что каждый узел <Categories>будет иметь два узла, которые нужны: <ID>узел и узел <CategoryName>. Таким образом, первое, что я делаю является создание нового IXMLDOMNodeList и заполнить его дочерние узлы текущего <Categories>узла.</Categories> </CategoryName> </ID> </Categories>
dataNodeList = objNodeList[i].childNodes;
Затем я использую метод item для доступа к обоих узлов, которые необходимо заполнить Мой раскрывающегося списка. Первый узел содержит поле « КодКатегории» из базы данных, а второй узел содержит поле « Категория » из базы данных. Я создания нового объекта параметра , равным CategoryNameтекст, установите значение CategoryIDи добавить его в раскрывающемся списке drpCategory . Код, используемый в оставшиеся функции использует тот же метод для извлечения данных из XML-ответ и заполнения частей страницы.

Примечание Поскольку мы имеем дело с небольшими объемами данных здесь, является использование DOM отличный способ извлечь данные, которые нам нужны. Если вы дело с большим объемом данных, можно вместо этого использовать XSLT.

Как сделать его работы

Теперь, когда мы рассмотрели деталях Подробности того, как все это работает, пора перейти на использование включены образцы файлов для просмотра его работы для себя.

Развертывание веб-службы

Для развертывания ASP.NET веб-службе, просто Распакуйте вложенного образец службы Web в корневой каталог веб-сервера. Затем необходимо будет открыть для DynaProducts.asmx код и изменить строку подключения. По крайней мере необходимо будет ввести пароль SA. После внесения этого изменения, повторной компиляции веб-службы.

Развертывание файла HTML

Файл HTML содержит переменную с именем szUrl , содержащий URL-адрес веб-службы. Вы найдете эту переменную в функцию getDataFromWS в нижней части функции. Необходимо будет изменить, URL-адрес для веб-службы, которая развернута выше.

После развертывания веб-службы и HTML-файл, перейдите к файлу HTML. При загрузке, в раскрывающемся списке Категория заполняется первый запрос XMLHTTP веб-службы. После заполнения, выберите категорию для запуска следующего запроса XMLHTTP, который заполняет раскрывающийся список продуктов. Выбрав продукт из раскрывающегося списка продуктов будет заполнить таблицу с данными об этом продукте.

Обратите внимание, что страница не отправлять обратно во время всех этих запросов XMLHTTP. В этом заключается прелесть запросов XMLHTTP. Если это сделано на большой страницы, страницы будет также содержится ее позиции прокрутки без «мигающие» на пользователя. Лично я считаю это некоторые довольно мощная штука!

Еще одно: в этой статье я использовал XMLHTTP для запроса веб-службы. Я мог бы просто использовать его для создания запроса для страницы ASPX или страницу ASP. Как можно повысить эту технологию для использования возможности бесконечны. Надеюсь, вам пригодятся XMLHTTP в будущих веб-разработка приложений.
Всегда, не стесняйтесь идеи по разделам требуется отправить в будущем адресована столбцов или в Microsoft Knowledge Base, используя Попросите его форма.

Свойства

Код статьи: 893659 - Последний отзыв: 28 июня 2013 г. - Revision: 5.0
Информация в данной статье относится к следующим продуктам.
  • Microsoft ASP.NET 1.0
  • Microsoft ASP.NET 1.1
Ключевые слова: 
kbgraphic kbscript kbxml kbhowto kbmt KB893659 KbMtru
Переведено с помощью машинного перевода
ВНИМАНИЕ! Данная статья переведена с использованием программного обеспечения Майкрософт для машинного перевода и, возможно, отредактирована посредством технологии Community Translation Framework (CTF). Корпорация Майкрософт предлагает вам статьи, обработанные средствами машинного перевода, отредактированные членами сообщества Майкрософт и переведенные профессиональными переводчиками, чтобы вы могли ознакомиться со всеми статьями нашей базы знаний на нескольких языках. Статьи, переведенные с использованием средств машинного перевода и отредактированные сообществом, могут содержать смысловое, синтаксические и (или) грамматические ошибки. Корпорация Майкрософт не несет ответственности за любые неточности, ошибки или ущерб, вызванные неправильным переводом контента или его использованием нашими клиентами. Подробнее об CTF можно узнать по адресу http://support.microsoft.com/gp/machine-translation-corrections/ru.
Эта статья на английском языке: 893659

Отправить отзыв

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com