asp.net ajax (asynchronous java script and...
TRANSCRIPT
المحاضرة السادسة -تقنيات االنترنت المتقدمة
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() دالة الختيار رقم عشوائي من المصفوفة المعرفة وعرض النص المكتوب