ปรับปรุงเพจแบบไดนามิกใช้ XMLHTTP

การแปลบทความ การแปลบทความ
หมายเลขบทความ (Article ID): 893659 - ผลิตภัณฑ์ที่เกี่ยวข้องในบทความนี้
คอลัมน์เสียงสนับสนุน ASP.NET

ปรับปรุงเพจแบบไดนามิกใช้ XMLHTTP

เมื่อต้องกำหนดคอลัมน์นี้ให้ตรงกับความต้องการของคุณ เราขอให้คุณส่งแนวคิดของคุณเกี่ยวกับหัวข้อที่สนใจและปัญหาที่คุณต้องการดูในบทความฐานความรู้และคอลัมน์เสียงสนับสนุนในอนาคต คุณสามารถส่งของแนวคิดและการใช้ผลป้อนกลับ ขอดังกล่าว แบบฟอร์ม นอกจากนี้ยังมีการเชื่อมโยงไปยังแบบฟอร์มที่ด้านล่างของคอลัมน์นี้
ขยายทั้งหมด | ยุบทั้งหมด

เนื้อหาบนหน้านี้

คำแนะนำ

หนึ่งในวิธีที่รายการโปรดของฉันของการศึกษาจากแอพลิเคชันเว็บจะดูภรรยานำทางไปรอบ ๆ เว็บไซต์ เธอสามารถทำแนวทางอินเทอร์เน็ตของเธอค่อนข้างดี แต่เธอรู้เล็กน้อยเกี่ยวกับระดับต่ำเทคนิค (สิ่งที่เธอเรียก "อวด boring") ที่ทำทั้งหมดทำงาน

ในช่วงเย็นที่ล่าสุด ฉันถูกเฝ้าดูภรรยา peruse โปรแกรมประยุกต์อีคอมเมิร์ซจาก boys ใหญ่อย่างใดอย่างหนึ่ง เธอถูกลึกเข้าไปในผลิตภัณฑ์แสดงรายการ โดยใช้หลายหล่นลง แต่ละหนึ่งป้อนออกจากส่วนที่เลือกไว้ก่อนหน้านี้ เป็นรายการแบบหล่นลงแต่ละคลิเธอ เพลงรายการบัญชีกลับไปรับข้อมูลสำหรับรายการถัดไปแบบหล่นลง ประสบการณ์ใช้งานมีความลำบากให้กับเธอเนื่องจากเธอเข้าใจ ว่า จะถูกใช้เวลานานเนื่องจาก backs ลงรายการบัญชี

ระดับเสียงเธอถูกพบไม่สามารถมีได้ได้อย่างง่ายดาย alleviated โดยนักพัฒนาของแอพลิเคชันถ้าพวกเขาใช้ XMLHTTP เพื่อดึงข้อมูลแทนที่จะย้อนกลับการลงรายการบัญชีเท่านั้น นั่นคือคอลัมน์ของเดือนนี้คืออะไรเกี่ยวกับ ฉันจะแสดงวิธีการใช้ XMLHTTP เพื่อการปรับปรุงเป็นส่วนหนึ่งของเว็บเพจโดยไม่ต้องทำการลงรายการบัญชีการกลับมาใช้กับข้อมูลจากการบริการเว็บ ASP.NET Microsoft ซึ่งกำลังจะถูกน่าสนใจจริง ๆ ฉันที่เชื่อถือ

ภาพรวมทั่วไป

XMLHTTP ทำงาน โดยการส่งคำร้องขอไปยังเว็บเซิร์ฟเวอร์จากไคลเอนต์ และเกาะมีข้อมูลของ XML ที่ส่งคืนนี้ ขึ้นอยู่กับโครงสร้างของ XML ที่ได้รับ คุณสามารถใช้ XSLT หรือ XML DOM ที่เพื่อควบคุม และผูกบางส่วนของหน้ากับข้อมูลนั้น นี่คือเทคนิคมีประสิทธิภาพมากขึ้น

หมายเหตุ Microsoft มีลักษณะการทำงานการบริการเว็บสำหรับ Internet Explorer ที่ทำให้การเรียกแบบอะซิงโครนัสกับบริการเว็บ ASP.NET ได้อย่างง่ายดาย และรวดเร็ว อย่างไรก็ตาม การทำงานนี้ไม่ได้รับการสนับสนุน และไม่ใช่วิธีดีที่สุดในการปรับปรุงหน้าแบบอะซิงโครนัส คุณควรใช้ XMLHTTP แทน

ในตัวอย่างที่ฉันจะทำงานตลอดในคอลัมน์นี้ ฉันจะทำการเรียกการบริการเว็บสามเพื่อการบริการเว็บ ASP.NET ผ่าน XMLHTTP การบริการเว็บจะสอบถามฐานข้อมูล Northwind ใน SQL Server ท้องถิ่น และจะส่งกลับการชุดข้อมูลไปยังไคลเอนต์ในรูปแบบของการ diffgram XML ฉันจะใช้ DOM XML ที่สามารถแยกข้อมูล XML ที่ และแบบไดนามิกปรับปรุงส่วนต่าง ๆ ของเพจของฉัน ทั้งหมดนี้จะสามารถทำได้โดยไม่ต้องส่งกลับ

การบริการเว็บ

การบริการเว็บที่ฉันจะใช้ชื่อ DynaProducts เป็นบริการเว็บ ASP.NET พื้นฐานที่ถูกเขียนใน C# และประกอบด้วยวิธีการสามวิธีดังต่อไปนี้
  • GetCategories – ส่งกลับค่าเป็นชุดข้อมูลที่ประกอบด้วยประเภททั้งหมดในตารางประเภท
  • GetProducts – ส่งกลับค่าเป็นชุดข้อมูลที่ประกอบด้วยผลิตภัณฑ์ทั้งหมดของประเภทที่จะส่งผ่านไปยังวิธีการ
  • GetProductDetails – ส่งกลับค่าเป็นชุดข้อมูลที่ประกอบด้วยรายละเอียดเกี่ยวกับผลิตภัณฑ์ 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ทันที นี่เป็นฟังก์ชันที่รับผิดชอบในการทำให้การเรียกฝั่งไคลเอ็นต์ไปยังบริการเว็บ ใช้ต่อไปนี้สี่อาร์กิวเมนต์ สองซึ่งไม่จำเป็น:
  • methodName – ชื่อของวิธีการที่จะเรียกบนบริการเว็บ
  • 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 และ HTTP ได้รับ ในตัวอย่างที่แสดงในบทความนี้ ฉันจะใช้ 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 ในกรณีนี้ ฉันกำลังที่ส่งกลับค่าเป็นชุดข้อมูล ADO.NET Microsoft

ส่วนถัดไปของบล็อกรหัสนี้ใช้คำสั่งสวิตช์เมื่อต้องการเรียกใช้ฟังก์ชันที่เหมาะสมโดยยึดตามชื่อของชุดข้อมูลที่ถูกส่งกลับจากการบริการเว็บ ฉันจะเข้ารหัสสำหรับฟังก์ชันเหล่านั้นในรายละเอียดเล็กน้อยในภายหลัง

ตอนนี้ลองดูที่รหัสที่ทำการร้องขอการ 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 ซองจดหมาย ด้วยวิธีใดที่จะทำงานเพียงแค่ไม่มีปัญหา

วิธีเปิดการ XMLHTTP วัตถุเรียกว่าถัดไป ฉันเคยใช้อาร์กิวเมนต์สำหรับวิธีการเปิด สามอันดับแรก วิธีการ 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 เพื่อแสดงข้อความระบุว่า ข้อมูลจะถูกดึงมา ฉันกำหนดฟังก์ชันgetDataFromWSผ่านโทรwindow.setTimeoutและฉันตั้งค่าให้ทำงานในมิลลิวินาทีหนึ่ง

การประมวลผลตอบสนองการบริการเว็บ

โปรดจำไว้ก่อนหน้านี้ว่า ฉันใช้คุณสมบัติonreadystatechangedเพื่อตั้งค่าคอนฟิกฟังก์ชันการเรียกกลับ นอกจากนี้ โปรดจำไว้ว่า ฟังก์ชันการเรียกกลับที่ประกอบด้วยคำสั่งสวิตช์ที่เรียกใช้ฟังก์ชันเฉพาะที่โดยยึดตามชื่อชุดข้อมูล ในกรณีนี้ ชื่อชุดข้อมูลของเราคือ CategoriesDS ดังนั้น ฟังก์ชันprocessCategoryจะถูกเรียกจากฟังก์ชันการเรียกกลับ เราได้ดูที่ที่ทำงานเมื่อต้องการดูวิธีการใช้ DOM XML ในการแยกวิเคราะห์หาคำตอบจากการบริการเว็บ
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 นั้น และแยกวิเคราะห์ โดยการเติมข้อมูลในประเภทหล่นลง

สิ่งแรกที่ฉันทำคือ สร้างวัตถุIXMLDOMNodeListที่ใช้ส่วนหนึ่งของการตอบสนอง XML ในชุดที่ฉันกำลังส่งคืนจากการเรียกบริการเว็บจะถูกส่งกลับเป็นแบบ diffgram และเฉพาะส่วนของผลตอบรับที่ผม/ดิฉันสนใจจริง ๆ ใน ข้อมูลจากคำ DataTable ที่ฉันได้แทรกเข้าไปในชุดข้อมูลนั้น ฉันสามารถเข้าถึงที่ โดยการสร้างวัตถุIXMLDOMNodeListจากบล็อกของ XML ที่ประกอบด้วย DataTable

ถ้าคุณดูรหัสสำหรับบริการเว็บ คุณจะเห็นว่า ฉันสร้างเป็น DataTable ที่ชื่อประเภท และเพิ่มลงในชุด งาน เมื่อ XML ถูกส่งคืนจากบริการเว็บ ชุดข้อมูลมีอยู่ในช่วง<CategoriesDS>และแต่ละแถวจาก DataTable มีอยู่ในบล็อก<Categories>ที่แยกจากกันตามที่แสดงไว้ในแฟ้ม XML ด้านล่าง

</Categories></CategoriesDS>แฟ้มต่อไปนี้จะพร้อมใช้งานสำหรับการดาวน์โหลดจาก Microsoft ศูนย์ดาวน์โหลด:
ยุบรูปภาพนี้ขยายรูปภาพนี้
ดาวน์โหลด
ดาวน์โหลดแพคเกจ GetCategories.xml ตอนนี้
ยุบรูปภาพนี้ขยายรูปภาพนี้
ดาวน์โหลด
ดาวน์โหลดแพคเกจ WSXMLHTTP.exe ตอนนี้สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการดาวน์โหลดแฟ้มสนับสนุนของ Microsoft ให้คลิกหมายเลขบทความต่อไปนี้เพื่อดูบทความในฐานความรู้ของ Microsoft:
119591 วิธีการขอรับแฟ้มสนับสนุนของ Microsoft จากบริการออนไลน์
Microsoft สแกนแฟ้มนี้เพื่อหาไวรัส Microsoft ใช้ซอฟต์แวร์ตรวจสอบไวรัสล่าสุด ณวันที่แฟ้มถูกโพสต์ แฟ้มถูกจัดเก็บในเซิร์ฟเวอร์เพิ่มการรักษาความปลอดภัยซึ่งช่วยป้องกันการเปลี่ยนแปลงใด ๆ ที่ไม่ได้รับอนุญาตไปยังแฟ้ม

เมื่อต้องการรับบล็อกของ XML ที่ประกอบด้วยนั้น DataTable ฉันใช้รหัสดังต่อไปนี้:
objNodeList = objXmlDoc.getElementsByTagName("Categories");
ซึ่งส่งกลับวัตถุIXMLDOMNodeListที่ประกอบด้วยแต่ละโหน<Categories> ทำซ้ำฉันแล้วในผ่านรายการนั้นโดยใช้คำสำหรับการวนรอบ</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;
นอกจากนี้ฉันแล้วใช้วิธีการสินค้าในการเข้าถึงโหนดที่ฉันจำเป็นต้องเติมข้อมูลแบบหล่นลงของฉันทั้งสอง โหนแรกประกอบด้วยเขตข้อมูล CategoryID ได้จากฐานข้อมูล และโหนที่สองประกอบด้วยฟิลด์CategoryNameจากฐานข้อมูล ฉันสร้างวัตถุตัวเลือกใหม่ การตั้งค่าข้อความที่เป็นCategoryNameตั้งค่าเป็นCategoryIDและเพิ่มลงในdrpCategoryแบบหล่นลง รหัสที่ใช้ในฟังก์ชันที่เหลือใช้วิธีการเดียวกันเมื่อ ต้องดึงข้อมูลจำเป็นจากการตอบสนอง XML และ การเติมข้อมูลบางส่วนของหน้านี้

หมายเหตุ เนื่องจากเรากำลังเกี่ยวข้องกับจำนวนข้อมูลที่นี่ขนาดเล็ก ใช้ DOM เป็นวิธียอดเยี่ยมเมื่อต้องดึงข้อมูลเราต้องการ ถ้าคุณกำลังเกี่ยวข้องกับข้อมูลจำนวนมาก คุณอาจเลือกที่จะใช้ XSLT แทน

วิธีทำให้ทั้งหมด

หลังจากที่ฉันได้ครอบคลุมรายละเอียดของวิธีการทั้งหมดนี้ทำงาน gritty เวลาที่จะไปผ่านวิธีการที่คุณสามารถใช้แฟ้มตัวอย่างรวมเพื่อดูการทำงานด้วยตัวคุณเอง

การปรับใช้การบริการเว็บ

เมื่อต้องการปรับใช้การบริการเว็บ ASP.NET เพียงแค่ unzip ตัวอย่างการบริการเว็บที่แนบไปยังรากของเว็บเซิร์ฟเวอร์ของคุณ จากนั้นคุณจะจำเป็นต้องเปิดรหัสสำหรับ DynaProducts.asmx และการเปลี่ยนแปลงสายอักขระการเชื่อมต่อ ที่น้อยที่สุด คุณจะต้องป้อนรหัสผ่าน SA หลังจากที่คุณได้ทำการเปลี่ยนแปลง คอมไพล์ใหม่การบริการเว็บ

การปรับใช้แฟ้ม HTML

แฟ้ม HTML ที่ประกอบด้วยตัวแปรที่ชื่อว่าszUrlที่ประกอบด้วย URL ไปยังบริการเว็บ คุณจะพบตัวแปรนี้ในฟังก์ชันgetDataFromWSที่ด้านล่างของฟังก์ชัน คุณจะต้องเปลี่ยนที่ไปยัง URL สำหรับบริการเว็บที่คุณจัดวางไว้ข้างบน

หลังจากที่คุณได้จัดวางทั้งการบริการเว็บและแฟ้ม HTML เรียกดูไปยังแฟ้ม HTML ขณะที่โหลด จะมีเติมที่ประเภทหล่นลงตามคำขอ XMLHTTP แรกไปยังบริการเว็บ เมื่อมีการใส่ข้อมูลที่ เลือกประเภทเพื่อ kick ออกจากคำขอ XMLHTTP ถัดไปที่นำใส่เข้าในผลิตภัณฑ์หล่นลง เลือกผลิตภัณฑ์จากผลิตภัณฑ์หล่นลงจะสร้างตารางที่ มีข้อมูลเกี่ยวกับผลิตภัณฑ์นั้น

ขอให้สังเกตว่าหน้าไม่มีการลงรายการในคำขอ XMLHTTP เหล่านี้กลับ ที่อยู่ที่ beauty ขอ XMLHTTP ถ้าฉันได้ดำเนินการนี้บนหน้าใหญ่ หน้าจะได้นอกจากนี้ยังรักษาตำแหน่งเลื่อน โดยไม่มี "กะพริบ" ที่ผู้ใช้ ถ้าคุณถามฉัน ที่จะอวดบางอย่างมีประสิทธิภาพมาก

สิ่งหนึ่งที่เพิ่มเติม: ในบทความนี้ ฉันใช้ XMLHTTP เพื่อสอบถามบริการเว็บ ฉันไม่สามารถเป็นใช้ดังกล่าวเพื่อทำการร้องขอสำหรับเพจที่มี ASPX หรือเพจที่มี ASP มีที่สิ้นสุดที่เป็นไปได้สำหรับวิธีการที่คุณสามารถย้ายเทคโนโลยีนี้ไปใช้ ฉันหวังว่า คุณค้นหา XMLHTTP มีประโยชน์ในการพัฒนาแอพลิเคชันการเว็บของคุณในอนาคต
ตามที่ได้รับการเสมอ ความรู้สึกที่สามารถส่งความคิดเห็นในหัวข้อที่คุณต้องจัดการในอนาคตคอลัมน์ หรือใน Microsoft Knowledge Base โดยใช้การ ขอดังกล่าว แบบฟอร์ม

คุณสมบัติ

หมายเลขบทความ (Article ID): 893659 - รีวิวครั้งสุดท้าย: 28 มิถุนายน 2556 - Revision: 4.0
ใช้กับ
  • Microsoft ASP.NET 1.0
  • Microsoft ASP.NET 1.1
Keywords: 
kbgraphic kbscript kbxml kbhowto kbmt KB893659 KbMtth
แปลโดยคอมพิวเตอร์
ข้อมูลสำคัญ: บทความนี้แปลโดยซอฟต์แวร์การแปลด้วยคอมพิวเตอร์ของ Microsoft แทนที่จะเป็นนักแปลที่เป็นบุคคล Microsoft มีบทความที่แปลโดยนักแปลและบทความที่แปลด้วยคอมพิวเตอร์ เพื่อให้คุณสามารถเข้าถึงบทความทั้งหมดในฐานความรู้ของเรา ในภาษาของคุณเอง อย่างไรก็ตาม บทความที่แปลด้วยคอมพิวเตอร์นั้นอาจมีข้อบกพร่อง โดยอาจมีข้อผิดพลาดในคำศัพท์ รูปแบบการใช้ภาษาและไวยากรณ์ เช่นเดียวกับกรณีที่ชาวต่างชาติพูดผิดเมื่อพูดภาษาของคุณ Microsoft ไม่มีส่วนรับผิดชอบต่อความคลาดเคลื่อน ความผิดพลาดหรือความเสียหายที่เกิดจากการแปลเนื้อหาผิดพลาด หรือการใช้บทแปลของลูกค้า และ Microsoft มีการปรับปรุงซอฟต์แวร์การแปลด้วยคอมพิวเตอร์อยู่เป็นประจำ
ต่อไปนี้เป็นฉบับภาษาอังกฤษของบทความนี้: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