تحديثات الصفحة الديناميكية باستخدام XMLHTTP

عمود "الصوت دعم" ASP.NET

تحديثات الصفحة الديناميكية باستخدام XMLHTTP

لتخصيص هذا العمود إلى احتياجاتك، نحن نريد دعوة منك إرسال الأفكار حول مواضيع تهم لك والمسائل التي تحتاج إلى مشاهدة الموجهة في المستقبل مقالات قاعدة المعارف والأعمدة "الصوتية دعم". يمكنك إرسال أفكارك وملاحظات باستخدام نموذج طلب لذلك . يوجد أيضا ارتباط إلى النموذج في أسفل هذا العمود.

مقدمة

أحد الطرق المفضلة لدراسة قابلية استخدام تطبيق ويب لمشاهدة زوجتي التنقل إلى موقع ويب. أنها تجعل طريقها حول الإنترنت شكل جيد، ولكن تعرف القليل عن انخفاض مستوى الجوانب التقنية (ما هي تسمية "مملة الأشياء") التي تجعل من كل عمل.



مساء الأخيرة كنت أشاهد زوجتي الاطلاع على تطبيق تجارة الإلكترونية من أحد الكبار. أنها تم التصفح لأسفل إلى منتج سرد باستخدام عدة المنسدلة كل منها التغذية من التحديد الذي تم مسبقاً. كما قامت بالنقر فوق عنصر في كل القائمة المنسدلة، يتم نشر الصفحة مرة أخرى للحصول على البيانات التالية القائمة المنسدلة. التجربة كان محبطاً بالنسبة لها لأن انطباعها أنها تتخذ وقتاً طويلاً نظراً لظهور وظيفة.



أنها كانت تعاني من مستوى الإحباط يمكن بسهولة خفت مطورو التطبيق استخدام 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. سوف تستخدم XML DOM ثم تحليل تلك البيانات XML وتحديث أجزاء من الصفحة الخاصة بي بشكل حيوي. سيتم إجراء كل هذا دون بعد الظهر.

خدمة ويب

تتضمن خدمة ويب التي سوف تستخدم يسمى دينابرودوكتس. وخدمة ويب ASP.NET أساسية التي يتم كتابتها في C# والذي يحتوي على الأساليب الثلاثة التالية.

  • GetCategories – بإرجاع مجموعة بيانات الذي يحتوي على كافة الفئات في جدول "الفئات".
  • جيتبرودوكتس – بإرجاع مجموعة بيانات الذي يحتوي على كافة المنتجات من الفئة التي تم تمريرها إلى الأسلوب.
  • جيتبرودوكتديتايلس – بإرجاع مجموعة بيانات الذي يحتوي على تفاصيل حول المنتج "معرف المنتج" الذي يتم تمريره إلى الأسلوب.

صفحة 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);
}
}
هذا هو الجزء الأكبر من التعليمات البرمجية من الصفحة، ويذهب أكثر من ذلك بالتفصيل حيث عليك فهم ما يجري.



أعلى كتلة البرنامج النصي هذا أنا خلقت متغيرين: أوبجهتب و أوبجكسملدوك. هذه هي المتغيرات التي سوف تستخدم لكائن XMLHTTP الخاص بي ولدى كائن XML DOM. مباشرة بعد ذلك هو تعريف الدالة الدالة جيتداتافروموس . وهذه هي الدالة المسؤولة عن إجراء استدعاء العميل إلى خدمة ويب. يأخذ الوسيطات الأربعة التالية، اثنتان منها اختيارية:
  • methodName – اسم الأسلوب للاتصال بخدمة ويب.
  • داتاسيتنامي -اسم قاعدة البيانات التي يتم إرجاعها بواسطة خدمة ويب.
  • وسبارامفالوي – قيمة المعلمة التي يتم تمريرها إلى خدمة ويب إذا كان ذلك ممكناً. (اختياري)
  • وسبارامنامي -اسم المعلمة التي يتم تمريرها إلى خدمة ويب إذا كان ذلك ممكناً. (اختياري)
دعونا قطع الدالة جيتداتافروموس إلى أجزاء ومناقشة كل منها. إليك القصاصة الأولى:
// 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 EnvelopestrEnvelope = "<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 وسكسملهتب خدمة ويب التي تم إنشاؤها لهذه المقالة:

envelope.png

ASP.NET يوضح لك كيفية تنسيق مغلف SOAP HTTP POST و HTTP GET. في المثال المعروضة في هذه المقالة، سوف تستخدم HTTP POST.



كل شيء على ما يُرام حتى الآن. الآن دعنا ننظر إلى الجزء التالي من التعليمات البرمجية.
// Set up the postobjHttp.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;

}
}

عندما يتم طلب عن طريق XMLHTTP، تستخدم كائن XMLHTTP خاصية readyState لتعقب حالة الطلب. عندما يتم تلقي كافة البيانات من خدمة ويب مرة أخرى، تتغير الخاصية readyState إلى قيمة 4. الخاصية onreadystatechange لكائن XMLHTTP يمكنك إعداد وظيفة رد اتصال الذي سيتم استدعاؤه عند تغيير الخاصية readyState . من خلال ضمان تلقي البيانات بأكمله، أنا الاحتفاظ من اتخاذ إجراءات بشأن تلك البيانات حتى أنني مستعد.



وبمجرد تلقي كافة البيانات، يمكنني إنشاء جزيرة بيانات XML بالاستجابة باستخدام الخاصية ريسبونسيتيكست . كما من المحتمل أن تعرف، كانت الاستجابة من خدمة ويب بتنسيق XML. في هذه الحالة، إرجاع Microsoft ADO.NET DataSet.



يستخدم الجزء التالي من هذه الكتلة من التعليمات البرمجية عبارة تبديل لاستدعاء الدالة المناسبة استناداً إلى اسم قاعدة البيانات التي يتم إرجاعها من خدمة ويب. سأذهب إلى التعليمات البرمجية لهذه المهام بالتفصيل قليلاً في وقت لاحق.


الآن دعونا ننظر في التعليمات البرمجية يقوم بتنفيذ طلب 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);

متغير سزورل يحتوي على URL الذي يتم استخدامه لاستدعاء خدمة ويب من أجل الوضوح. ثم يكون if عبارة المسامير على أي من المعلمات التي تم تمريرها كقيمة سلسلة استعلام مواقع المعلومات . في البيئة الخاصة بك، قد تحتاج لإضافة المعلمات إلى مغلف SOAP. وفي كلتا الحالتين ستعمل على ما يرام.



يتم استدعاء الأسلوب فتح كائن XMLHTTP بعد ذلك. لقد استعملت الوسائط الثلاث الأولى للأسلوب المفتوح؛ الأسلوب URL وقيمة منطقية تحدد ما إذا كان الاستدعاء غير المتزامن.
هام: إذا تم إجراء استدعاء غير متزامن وأنا هنا، يجب إعداد وظيفة رد اتصال من خلال الخاصية أونريديستاتيتشانجيد .

بعد أن يتم تعيين عنوان الطلب لنوع المحتوى، أرسل الطلب كمغلف SOAP استخدام متغير سلسلة تعبئة سابقا.



لقد انتقلنا الآن عبر كافة التعليمات البرمجية التي يقوم بإجراء الطلب XMLHTTP. الآن دعنا إلقاء نظرة على التعليمات البرمجية التي تعالج هذه الواجهة في المستعرض والذي يعالج استجابة استدعاء خدمة ويب.

أولاً سنلقي نظرة على الدالة التي يتم استدعائها عند تحميل الصفحة.
function getCategories(){

var func = "getDataFromWS('GetCategories', 'CategoriesDS')";
document.all.lblCategoryDropdown.innerText =
"Please wait while data is retrieved...";
window.setTimeout(func, 1);

}

الشيء الأول الذي يمكنني القيام به في هذه المهمة إنشاء متغير لتخزين توقيع الدالة جيتداتافروموس. أفعل ذلك لأنني ذاهب لاستدعاء window.setTimeout في نهاية هذه الدالة لاستدعاء الدالة جيتداتافروموس . الغرض من هذا الأسلوب هو السماح لي بعرض الحالة للمستخدم أثناء انتظار استدعاء خدمة ويب لإكمال. ولاحظ أن أنا على تغيير innerText للشعبة لعرض رسالة تشير إلى استرداد البيانات. ثم جدولة الوظيفة جيتداتافروموس من خلال استدعاء window.setTimeout ، ومجموعة ليتم تشغيله في ميلي ثانية واحدة.

معالجة استجابة خدمة ويب

تذكر قبل استخدام الخاصية أونريديستاتيتشانجيد لتكوين وظيفة رد اتصال. تذكر أن دالة رد الاتصال يحتوي على عبارة تبديل استدعاء دالة معينة استناداً إلى اسم DataSet. في هذه الحالة، اسم مجموعة البيانات الخاص بنا هو كاتيجوريسدس. ولذلك، سيتم استدعاء دالة بروسيسكاتيجوري من دالة رد الاتصال. إلقاء نظرة على هذه الدالة لمعرفة كيفية استخدام 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";

}

}

تذكر أن الدالة جيتداتافروموس تحميل XML من الاستجابة إلى الكائن أوبجكسملدوك . في دالة بروسيسكاتيجوري ، أغتنم هذا XML وتحليل عبره لملء القائمة المنسدلة الفئة.



أول شيء فعله إنشاء كائن إيكسملدومنوديليست باستخدام جزء من استجابة XML. Diffgram إرجاع DataSet سأعود من استدعاء خدمة ويب وجزء فقط من هذه الاستجابة أنا مهتم حقاً في البيانات من DataTable لقد تم إدراج في مجموعة البيانات. يمكن أن احصل على ذلك عن طريق إنشاء كائن إيكسملدومنوديليست من كتلة XML يحتوي DataTable.



إذا نظرت في التعليمات البرمجية الخاصة بخدمة ويب، سترى أن إنشاء DataTable التي تسمى فئات وإضافتها إلى مجموعة البيانات. فصل عند إرجاع من خدمة ويب XML ويتم تضمين مجموعة البيانات داخل كتلة < كاتيجوريسدس > كل صف من DataTable موجود ضمن كتل < فئات > كما هو موضح في ملف XML.

الملفات التالية متوفرة للتنزيل من مركز تنزيل Microsoft:
Download قم بتنزيل الحزمة GetCategories.xml الآن.
Download الآن بتنزيل حزمة WSXMLHTTP.exe. لمزيد من المعلومات حول كيفية تنزيل ملفات "دعم microsoft"، انقر فوق رقم المقالة التالي لعرضها في "قاعدة المعارف ل Microsoft":
119591 كيفية الحصول على ملفات دعم Microsoft من الخدمات عبر الإنترنت
قامت Microsoft بفحص هذا الملف بحثًا عن الفيروسات. استخدمت Microsoft أحدث برامج الكشف عن الفيروسات التي كانت متوفرة في التاريخ الذي تم نشر الملف فيه. يتم تخزين الملف على خوادم محسنة الأمان تساعد على منع إجراء أية تغييرات غير مصرح بها على الملف.


للحصول على كتلة XML يحتوي DataTable هذا، يمكنني استخدام التعليمات البرمجية التالية:
objNodeList = objXmlDoc.getElementsByTagName("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";

}

أنا أعرف بالفعل كل عقده < فئات > سيكون عقدتين أحتاج: عقده < معرف > و < اسم الفئة > العقدة. لذلك، هو أول شيء فعله إنشاء جديد إيكسملدومنوديليست وملئه بالعقد التابعة لعقدة < فئات > الحالي.
dataNodeList = objNodeList[i].childNodes;
أنا ثم استخدم الأسلوب عنصر للوصول إلى كل من العقد التي تحتاج إلى تعبئة بلدي القائمة المنسدلة. العقدة الأولى يحتوي على حقل "معرف الفئة" من قاعدة البيانات، والعقدة الثانية يحتوي على الحقل اسم الفئة من قاعدة البيانات. أنا إنشاء كائن جديد الخيار تعيين النص ل اسم الفئة، تعيين القيمة إلى "معرف الفئة"وإضافته إلى دربكاتيجوري القائمة المنسدلة. تستخدم التعليمة البرمجية المستخدمة في الوظائف المتبقية نفس أسلوب سحب البيانات المطلوبة من استجابة XML ولملء أجزاء من الصفحة.

ملاحظة: نظراً لأننا نتعامل مع كميات صغيرة من البيانات هنا، استخدام DOM تعتبر هذه طريقة رائعة لسحب البيانات التي نحتاجها. إذا تم التعامل مع كمية كبيرة من البيانات، يمكنك اختيار استخدام XSLT بدلاً من ذلك.

كيفية التأكد من كل عمل

الآن بعد أن لقد غطت شجاع تفاصيل كيفية عمل هذا كله، حان الوقت للانتقال على كيفية استخدام ملفات النماذج المضمنة لمشاهدته في العمل بنفسك.

نشر خدمة ويب

لنشر خدمة ويب ASP.NET، قم ببساطة فك نموذج خدمة ويب المرفقة إلى الجذر لخادم الويب الخاص بك. ستحتاج إلى فتح التعليمات البرمجية ل DynaProducts.asmx وتغيير سلسلة الاتصال. على الأقل، فستحتاج إلى إدخال كلمة مرور SA. بعد إجراء هذا التغيير، ثم إعادة ترجمة خدمة ويب.

نشر ملف HTML

يحتوي ملف HTML على متغير يسمى سزورل الذي يحتوي على عنوان URL لخدمة ويب. ستجد هذا المتغير في الدالة جيتداتافروموس بالقرب من أسفل للدالة. سوف تحتاج إلى تغيير ذلك إلى عنوان URL الخاص بخدمة ويب التي قمت بنشر أعلاه.


بعد منشورة كل خدمة ويب وملف HTML، استعرض إلى ملف HTML. عند تحميله، سيتم ملء القائمة المنسدلة الفئة بأول طلب xmlhttp الخاص بخدمة ويب. بمجرد أن يتم نشر، حدد فئة في مستهل الطلب XMLHTTP التالي الموجود في القائمة المنسدلة المنتجات. تحديد منتج من منتجات المنسدلة سيتم ملء جدول ببيانات حول هذا المنتج.



لاحظ أن عدم نشر الصفحة أثناء أي من هذه الطلبات XMLHTTP. هذا هو جمال طلبات XMLHTTP. إذا كنت قد فعلت ذلك على صفحة كبيرة، الصفحة سوف يحافظان أيضا موضع التمرير الخاصة به دون "الوميض" على المستخدم. إذا كان السؤال، وهذا بعض الأشياء قوية جداً!



أكثر شيء واحد: في هذه المقالة استخدام XMLHTTP لاستعلام خدمة ويب. لقد يمكن بسهولة استخدمت للتقدم بطلب لصفحة ASPX أو صفحة ASP. كيف يمكن وضع هذه التقنية لاستخدام الإمكانيات لا حصر لها. أرجو أن تجد XMLHTTP مفيدة في تطوير تطبيق الويب الخاص بك المستقبلية.
كما هو الحال دائماً، لا تتردد في إرسال أفكار بشأن المواضيع التي تريدها التصدي لها في المستقبل من الأعمدة أو نموذج في قاعدة المعارف ل Microsoft باستخدام طلب لذلك .
خصائص

رقم الموضوع: 893659 - آخر مراجعة: 15‏/01‏/2017 - المراجعة: 1

Microsoft ASP.NET 1.0, Microsoft ASP.NET 1.1

تعليقات