asp.net ajax (asynchronous java script and...

المحاضرة السادسة -تقنيات االنترنت المتقدمة

1

ASP.NET AJAX

)Asynchronous Java Script And Xml(

؟ ASP.NET AJAXما هي

باإلمكان , في الوقت المناسب بالتفاعل الغنية تطبيقات الويب توفير التقنيات التي تساعد على هو مجموعة من

. كاملة الصفحة إعادة تحميل دون الحاجة إلى تحديث جزء معين من صفحة الويب

Ajax لغة متوافقة مع معظم برامج تصفح الويب مثلIE , Firefox ,safari

ASP.NET Ajax هي مجموعة من ملحقاتASP.Net والتي طورتها شركة مايكروسوفت لتصميم

مواقع ويب أكثر كفاءة وأسرع استجابة

AJax :youtube - Facebook- Google maps- Gmailأمثلة على المواقع التي تستخدم

: على معايير اإلنترنت وتستخدم مزيج من AJAXتستند تقنية

كائنXMLHttpRequest لتبادل البيانات بشكل متزامن مع الخادم

JavaScript لتفاعل وعرض المعلومات

Css لتنسيق البيانات

XML لتنسيق نقل البيانات

ASP.NET AJAXأدوات

Script Manager

إذا , األخرى ويجب إضافتها قبل أي أداة أخرى ajaxاألداة األساسية المسئولة عن إدارة جميع أدوات

في صفحات المحتوى script Manager Proxyفعلينا إضافة masterأضيفت األداة في صفحة

enable partial rendering ------ >true: الخصائص

Update Panel

تستخدم لتحديث جزء معين من الصفحة دون تحديث كامل الصفحة

update panelإلضافة محتويات Content template: الخصائص المستخدمة

Update Progress

Update panelأداة تقدم معلومات حول حالة الصفحة أو الجزء من الصفحة التي يتم تحديثه باستخدام

Update progressإلضافة محتويات progress Template: الخصائص المستخدمة

Timer

أداة تستخدم لتنفيذ وظائف معينة بعد مدة من الوقت يحددها المبرمج

المحاضرة السادسة -تقنيات االنترنت المتقدمة

2

لنرى الفرق Ajaxسيتم إنشاء الموقع بدون استخدام تقنية :1تطبيق

: تصميم الصفحة

label1للصفحة نكتب الكود الخاص بطباعة تاريخ ووقت تحميل الصفحة وعرضه في loadفي حدث

Protected Sub Page_Load(ByVal sender As Object, ByVal e As

System.EventArgs) Handles Me.Load

Label1.Text = DateTime.Now.ToString

End Sub

label2الخاص بطباعة تاريخ ووقت الضغط على الزر وعرضه في نكتب الكود ( تحديث) في داخل الزر

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As

System.EventArgs) Handles Button1.Click

Label2.Text = DateTime.Now.ToString

End Sub

ن جديد وعرض بالضغط على زر تحديث يتم تحميل كامل الصفحة معند تشغل الصفحة سنالحظ أنه كلما قمنا

التاريخ والوقت

المحاضرة السادسة -تقنيات االنترنت المتقدمة

3

: 2تطبيق

عند الضغط على زر تحديث ) والغرض من ذالك Ajaxاآلن سنعيد التطبيق السابق ولكن باستخدام تقنيه

يتم تحديث التاريخ والوقت الثاني دون تحميل الصفحة بالكامل من جديد ودون تحديث التاريخ والوقت األول

( الذي تم طباعته عند تحميل الصفحة ألول مرة

منفصل عن باقي وهو الجزء الخاص بالمحتوى الذي سيتم تحديثه بشكل update panelسنستخدم أداه

: الصفحة تصميم الصفحة

وفي داخله update panelبعد ذالك نضيف script managerيتم في البداية إضافة : مالحظة

ندرج باقي األدوات

نفس االكواد المستخدمة في التطبيق السابق : اآلكواد البرمجية

:النتيجة

الحظي الفرق في التوقيت

المحاضرة السادسة -تقنيات االنترنت المتقدمة

4

update progressم استخدا : 3تطبيق

لعرض حالة تحديث المحتوى الموجود update panelمع أداة update progressتستخدم أداة

update panelبداخل

كالتالي update panelفي داخل update progressعلى نقس المثال السابق سنضيف أداة

سيتم التعديل على كود الزر فقط بإضافة السطر التالي قبل السطر الموجود سابقا يصبح : الكود البرمجي : الكود كالتالي

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As

System.EventArgs) Handles Button1.Click

System.Threading.Thread.Sleep(3000)

Label2.Text = DateTime.Now.ToString

End Sub

يتم تحديد المدة التي سيتم فيها عرض حاله التحديث

وبعد هذه المدة يتم ms (milisecond )باستخدام وحدة

بواسطة السطر update panelعرض المحتى الموجود في

:التالي

System.Threading.Thread.Sleep(3000)

المحاضرة السادسة -تقنيات االنترنت المتقدمة

5

تستخدم أداة المؤقت لتنفيذ وظيفة معينة أو أي جزء من الكود تلقائيا بعد Timerاستخدام : 4تطبيق

مدة معينه يتم تحديدها في البرنامج دون الحاجة إلى الضغط على زر أو دون تفاعل المستخدم

ثواني ويعرض نص أخر 4سنقوم بعرض نص في الصفحة ويتغير تلقائيا كل

: تصميم الصفحة

بنفس الترتيب update panelثم إضافة timerثم script managerيتم إدراج : مالحظة

المحاضرة السادسة -تقنيات االنترنت المتقدمة

6

: الكود البرمجي

timerيتم تعديل خاصيتين على .1

a. خاصيةinterval لتحديد الوقت الذي سيتم بعده عرض المحتوى الموجود في

update panel بشكل تلقائي سنستخدم وحدةms (millisecond )

b. ontick يتم تعريف اسم الحدث الخاص بالمؤقت والذي يحتوي على الكود الذي يعمل

بشكل تلقائي

:كالتالي sourceالمصدر سيتم تعديل الخصائص السابقة باستخدام كود

Timerلتحديد االسم البرمجي للمؤقت update panelبداخل وسم triggersإضافة وسم .2

:كالتالي update panelالذي سيستخدم على محتويات

يتم كتابة الكود في , كتابة الكود الخاص بالوظيفة التي سيتم تنفيذها تلقائيا اعتمادا على المؤقت .3

( المضافة في الصفحة timerمرتين على أداة الضغط ) داخل المؤقت

Protected Sub timer1_tick(ByVal sender As Object, ByVal e As

System.EventArgs) Handles Timer1.Tick

Dim a() As String = {" welcome 1", "welcome 2", "welcome 3"}

Dim n As Integer = New Random().Next(0, 3)

Label2.Text = a(n)

End Sub

المحاضرة السادسة -تقنيات االنترنت المتقدمة

7

Random() دالة الختيار رقم عشوائي من المصفوفة المعرفة وعرض النص المكتوب