ضع الويب تحت سيطرتك مع ajax

[محمد ناشد]

روعة التقنيات والعظمة بأكملها مع ajax
http://www.seamler.com/
http://wiki.script.aculo.us/scriptaculous/show/Demos

[M.Alhamdoosh]

السلام عليكم

شو هل النشاط أبو عبدو ما شاء الله
مشكور على الروابط

[يوسف الصطم]

بسم الله الرحمن الرحيم
مبروك عودة المنتدى ...

تقنية AJAX :
لقد سنحت لي الفرصة و الحمد لله تعلم هذه التقنية التي تعتبر ثورة في عالم الويب وسأتحدث بشكل مختصر عنها :
إن هذه التقنية تعتمد على الـ JavaScript و الـ XML والـ PHP حيث يتم الحصول على معلومات من المخدم دون ارسال كامل بيانات الصفحة .... و عند طلب صفحة معينة فإن المخدم يرسل المحتوى فقط دون الحاجة الى إعادة تحميل الصور والى ما هنالك .... وبالتالي سرعة كبيرة في التصفح .... إضافة الى المزايا الأخرى ...

[زاهر الحاج حسين]

شكرا أبو اليوس على هذه المعلومات الهامة.

بس سؤالي هو هل تعمل تكنولوجيا AJAX مع ASP.NET, أي هل هي تقنية عامة أم مرتبطة مع PHP.؟؟؟؟:thi2: :thi2: :thi2:

[يوسف الصطم]

أبو الزوز التقنية عامة واعتمادها الأساسي على الـ JavaScript والـ XML ..... أي بالتأكيد يمكن استخدامها مع الـ ASP.net وأوأكد ثانية أن الـ AJAX ثورة حقيقية في عالم الويب والآن أغلب الشركات الضخمة أصبحت تستخدم هذه التقنية ..... وأذا أردتم أمثلة حقيقة على الـ AJAX تأملوا موقع الـ GMAIL الذي يعتمد اعتماد كلي على هذه التقنية ومنذ فترة ليست بعيدة أصبحت شركة Hotmail تعتمد على هذه التقنية وهذا واضح في الأصدار الأخير Hotmail Live
أما إذا أردتم تعلم هذه التقنية فغليكم الرابط التالي (http://www.w3schools.com/ajax/default.asp).

[فادي عمروش]

سؤال هل تقنية Ajax هي تقنية برمجية أم مفهوم منطقي لسرعة الاتصفح

[وسيم أومري]

السلام عليكم ...
الله يعطيكن العافية ....وخاصة لكل من ساهم في عودة المنتدى ..


المهم ajax +asp.net هو ما يحلم به اي مبرمج ويب ...
طبعا متل ما قال يوسف تقنية الajax بتعتمد على JavaScript+ XML+ Dhtml +CSS

كدعم كامل لل ajax ضمن بيئة asp.net غير متوفرة حالي بالشكل النهائي والخالي من الثغرات .... لكن مازالت الاصدارات تتوالى ...

لكن اللي بأكدلك ياه ..انو تعامل asp.net 2.0 مع ال AJAX اسهل بكتير من تعامل PHP مع ال AJAX ..

[يوسف الصطم]

سؤال هل تقنية Ajax هي تقنية برمجية أم مفهوم منطقي لسرعة الاتصفح

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

[آلاء]

أحدث اصدار لمايكروسوفت لاستخدام ajax مع asp.net 2.0 هو:
ASP.NET AJAX 1.0 Beta 2
هناك اصدار قبله هو:ASP.NET codename Atlas

والتعامل معهما رائع جدا ...

[محمد ناشد]

هذا الكتاب يساعد للتفاعل مع Ajax و PHP
Ajax.And.Php.Building.Responsive.Web.Applications. Mar.2006

أكثر من رابط

http://www.33367.com/download.asp?id=1363&book=book1 (http://www.33367.com/download.asp?id=1363&book=book1)
http://www.33367.com/download.asp?id=1363&book=book2 (http://www.33367.com/download.asp?id=1363&book=book2)
http://www.33367.com/download.asp?id=1363&book=book3 (http://www.33367.com/download.asp?id=1363&book=book3)


وهذا الكتاب يساعد للتفاعل مع Ajax و ASP.NET أيضا
Beginning.Ajax.with.ASP.NET.Sep.2006

أكثر من رابط

http://www.33367.com/download.asp?id=1729&book=book1 (http://www.33367.com/download.asp?id=1729&book=book1)
http://www.33367.com/download.asp?id=1729&book=book2 (http://www.33367.com/download.asp?id=1729&book=book2)
http://www.33367.com/download.asp?id=1729&book=book3 (http://www.33367.com/download.asp?id=1729&book=book3)


كتب اخرى للـ Ajax

هذا الكتاب ايضا
Ajax.Design.Patterns.Jun.2006

روابط
http://www.33367.com/download.asp?id=1190&book=book1 (http://www.33367.com/download.asp?id=1190&book=book1)
http://www.33367.com/download.asp?id=1190&book=book2 (http://www.33367.com/download.asp?id=1190&book=book2)
http://www.33367.com/download.asp?id=1190&book=book3 (http://www.33367.com/download.asp?id=1190&book=book3)

وهذا الكتاب تمارين على Ajax
Ajax.Patterns.and.Best.Practices.Feb.2006
روابط
http://www.33367.com/download.asp?id=1170&book=book1 (http://www.33367.com/download.asp?id=1170&book=book1)
http://www.33367.com/download.asp?id=1170&book=book2 (http://www.33367.com/download.asp?id=1170&book=book2)
http://www.33367.com/download.asp?id=1170&book=book3 (http://www.33367.com/download.asp?id=1170&book=book3)

وهذا ايضا Ajax - JSF
Pro.JSF.and.Ajax.Building.Rich.Internet.Components .Feb.2006

روابط
http://www.33367.com/download.asp?id=1171&book=book1 (http://www.33367.com/download.asp?id=1171&book=book1)
http://www.33367.com/download.asp?id=1171&book=book2 (http://www.33367.com/download.asp?id=1171&book=book2)
http://www.33367.com/download.asp?id=1171&book=book3 (http://www.33367.com/download.asp?id=1171&book=book3)

وهذا ايضا
Ajax.For.Dummies.Feb.2006
روابط
http://www.33367.com/download.asp?id=524&book=book1 (http://www.33367.com/download.asp?id=524&book=book1)
http://www.33367.com/download.asp?id=524&book=book2 (http://www.33367.com/download.asp?id=524&book=book2)
http://www.33367.com/download.asp?id=524&book=book3 (http://www.33367.com/download.asp?id=524&book=book3)



نقل من
من موقع سوالف

[وسيم أومري]

أحدث اصدار لمايكروسوفت لاستخدام ajax مع asp.net 2.0 هو:
ASP.NET AJAX 1.0 Beta 2
هناك اصدار قبله هو:ASP.NET codename Atlas

والتعامل معهما رائع جدا ...




:hap2::hap2::hap2::hap2:

[وسيم أومري]

هون بتلاقو بعض دروس الفيديو عن الAJAX
http://asp.net/learn/videos/default.aspx?tabid=63#ajax


وهاد رابط ل ASP.NET AJAX 1.0 Beta 2

http://ajax.asp.net/default.aspx?tabid=47&subtabid=471



بالتوفيق للجميع ...

[محمد ناشد]

الأجاكس تقنية جديدة والتي أخذت الويب إلى مرحلة جديدة كليا والتي تسمى في الوقت الحالي بالويب 2.0، فما هي الأجاكس؟
الأجاكس AJAX وهي بالعادة تكتب كاملة بالحروف اللاتينية الكبيرة لانها تعتبر اختصار لكلمة (Asynchronous java script And XML).

والأجاكس كانت موجودة من زمان ولكن لم يعرف أحد أهميتها أو كيفية استخدامها بالشكل الصحيح حتى قامت شركة Google بتوظيفها في برامجها الجديدة كالGmail وGoogle maps، وتتيح الأجاكس لمطوري الويب بإضافة حيوية وديناميكية للموقع كإضافة معلومات حية كأسعار البورصة من دون الحاجة لإعادة تحميل الصفحات كلما أراد المستخدم أن يطلب معلومة من الServer-Side أوعن طريق الخادم، فلغات برمجة الويب تنقسم إلى قسمان Client-Side وهي كالجافاسكربت والvb سكربت وقسم يسمى بالServer-Side وهي كالphp و الasp، و تقنية الأجاكس في الأساس هي استخدام للغة الجافاسكربت وهي لغة Client-Side لطلب أي معلومة موجودة على الServer-Side من دون الحاجة لطلب كامل الصفحة.

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

ستجد تحت الكود الكامل بالجافاسكربت لعمل بسيط بالأجاكس والXMLHttpRequest وسأشرح كل جزء منه على حده.

كود:

function createRequestObject() {var req;if(window.XMLHttpRequest){// لمتصفحات الفايرفروكس والأوبرا والسفاريreq = new XMLHttpRequest();} else if(window.ActiveXObject) {// للإنترنت اكسبلورر النسخة الخامسة فما فوقreq = new ActiveXObject("Microsoft.XMLHTTP");} else {// نستخدم دالة ال alert لكي نظهر حصول خطأ وغالبا يكون الخطأ لمستخدمي نسخ قديمة من المتصفحاتalert('حصل خطأ في طلب الصفحة...الرجاء المحاولة مرة أخرى وإذا لم تنفع جرب أن تنزل نسخة جديدة من المتصفح');}return req;}// نطلب الدالة createRequestObject() ونعطي الناتج للمتغير httpvar http = createRequestObject();function sendRequestGet(act) {// نطلب صفحة ال phphttp.open('get', 'myphpscript.php?act='+act, true);// عندما ننتهي من طلب الصفحة نطلب دالة handleResponsehttp.onreadystatechange = handleResponse;// الانتهاء من الطلبhttp.send(null);}function handleResponse() {if(http.readyState == 4 && http.status == 200){// نعطي المتغير response النص اللذي رجع من طلبنا لصفحة ال phpvar response = http.responseText;if(response) {// نحدث محتوى ال div والتي اسمها ajaxTestdocument.getElementById("ajaxTest").innerHTML = response;}}}




البداية...

كود:

function createRequestObject() {var req;if(window.XMLHttpRequest){// لمتصفحات الفايرفروكس والأوبرا والسفاريreq = new XMLHttpRequest();} else if(window.ActiveXObject) {// للإنترنت اكسبلورر النسخة الخامسة فما فوقreq = new ActiveXObject("Microsoft.XMLHTTP");} else {// نستخدم دالة ال alert لكي نظهر حصول خطأ وغالبا يكون الخطأ لمستخدمي نسخ قديمة من المتصفحاتalert('حصل خطأ في طلب الصفحة...الرجاء المحاولة مرة أخرى وإذا لم تنفع جرب أن تنزل نسخة جديدة من المتصفح');}return req;}




هذا الكود سهل وهي عبارة عن دالة اسمها createRequestObject وهي تتحق من نوع المتصفح لديك وأذا ماكن يدعم ال XMLHttpRequestأو لا.أولا عرفنا متغير جديد اسمه req وهو خالي ومن ثم نتحقق دالة window.XMLHttpRequest إذا أرجع لنا True فإن المتصفح سيكون فايرفوكس أو أوبرا أو سفاري، لذلك سنعطي المتغير req اللذي عرفناه في البداية بداية جديدة ل XMLHttpRequest()وهي دالة متعرفة سابقا في هذه المتصفحات للتعامل مع الأجاكس والXMLHttpRequest، أما إذا كان التحقق الأول فشل ونجح التحقق الثاني وهو window.ActiveXObject فسيكون المتصفح انترنت اكسبلورر وسنتخدم دالة متعرفة في هذا المتصفح اسمها ActiveXObject("Microsoft.XMLHTTP") وسنعطيها للمتغير req.

إذا فشلت كل المحاولات اذا المتصفح إما يكون قديما أو أنه لايدعم الXMLHttpRequest، وفي آخر الدالة نرجع مايحتويه المتغير req.

وبعد ذلك نعرف متغير جديد ونسميه http ونعطيه نسخه من الدالة createRequestObject وسيحتوي جميع الخصائص للXMLHttpRequest.

كود:

var http = createRequestObject();




وكما تعرفون هناك طريقتان لطلب المعلومات من الServer-Side وهما باستخدام طريقة GET وطريقة POST وطلب المعلومات باستخدام الأجاكس يختلف قليلا باختلاف طريقة الطلب وسأشرح هنا الطريقتين:
طلب المعلومات باستخدام طريقة GET
انتهينا من تعريف المتغير الجديد والذي سميناه http واعطيناه خصائص الXMLHttpRequest، الآن سنطلب المعلومات بطريقة GET من صفحة الphp:

كود:

function sendRequestGet(act) {// نطلب صفحة ال phphttp.open('get', 'myphpscript.php?act='+act, true);// عندما ننتهي من طلب الصفحة نطلب دالة handleResponsehttp.onreadystatechange = handleResponse;// الانتهاء من الطلبhttp.send(null);}



ولايهم اللغة المستخدمة للServer-Side يمكن أن تكون php أو asp لايهم لانهما تعتبران لغات Server-Side كما أسلفنا.

هنا ترى دالتان يجب عليك فهمها وهما من خصائص الXMLHttpRequest هما open() و send()، في أول سطر نطلب الصفحة باستخدام طريقة get وهي تكون أول متغير في الدالة open() وأول متغير يكون نوع طلب الصفحة كما سنرى في القسم التالي والمتغير الثاني في الدالة يكون الصفحة المطلوبة وفي حالتنا هذه نطلب صفحة اسمها myphpscript.php وتأخذ متغير اسمه act ومتغير act نأخذه بالجافاسكربت ونضعه عندما نطلب الصفحة. ولأننا نستخدم طريقة GET فهي تأخذ المتغيرات عن طريق شريط التصفح لذلك نطلب دالة send() ونعطيها الأمر null، ولكن طريقة POST لاتأخذ متغيراتها عن طريق شريط التصفح لذلك تتغير قليلا عندما نطلب المعلومات، أما المتغير الثالث للداله فهو لاستخدام الطلب الغير تزامني أو الasynchronous للأجاكس ونعطيه true، والسطر:

كود:

http.onreadystatechange = handleResponse;



هي تقول للXMLHttpRequest انه عندما تنتهي من طلب المعلومة وعند الاستعداد اطلب الدالة handleResponse() وهي دالة سنأتي لذكرها لاحقا

طلب المعلومات باستخدام طريقة POST

كود:

function sendRequestPost(act) {// نطلب صفحة ال phphttp.open('post', 'myphpscript.php', true);http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');// عندما ننتهي من طلب الصفحة نطلب دالة handleResponsehttp.onreadystatechange = handleResponse;// الانتهاء من الطلبhttp.send('act='+act);}



ستلاحظ التشابه إلى حد كبير بين الطريقتين POST و GET، ولكن الاختلاف ستلاحظه في الدالة send() وهي أننا نرسل المتغيرات التي نريدها عن طريقها بدلا من إطفائها عن طريق null وهذه هي أهم خطوة، وفي السطر:

كود:
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');



وهذا السطر مهم اذا كنت تستخدم طريقة POST في طلب المعلومات عن طريق forms

اللمسات الأخيرة..

كود:
function handleResponse() {if(http.readyState == 4 && http.status == 200){// نعطي المتغير response النص اللذي رجع من طلبنا لصفحة ال phpvar response = http.responseText;if(response) {// نحدث محتوى ال div والتي اسمها ajaxTestdocument.getElementById("ajaxTest").innerHTML = response;}}}




أول ما نتحقق عندما تطلب هذه الدالة هي http.readyState و http.status وسأشرح الحالات المختلفة لكل منهما

هناك 5 أنواع من حالات الأستعداد للXMLHttpRequest وللعلم أن الحالة الأخيرة هي الأهم بينهم
0: لم يتم البدء
1: بدء عملية الاتصال
2: تم استلام الطلب
3: جاري تحليل الطلب والرد عليه
4: تم الانتهاء

أما http.status فكما تعرفون هناك حالات كثيرة عندما تطلب المعلومات ولعل من أشهرها حالة 404 وهي خطأ عدم وجود الصفحة على الخادم، أما 200 فأن الصفحة موجودة وتم استلامها بنجاح ولمعرفة الحالات المتنوعة عند طلب الصفحة الرجاء زيارة الرابط التالي:
http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html (http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html)

وعندما بتم التأكد من كل شيء بحالة سليمة نسمي متغير جديد باسم response ونعطيه http.responseText وهذا هو الرد من طلبنا لصفحة الphp أي أنه أي نص يتم طبعه على الصفحة عن الانتهاء من طلبها، ويجب التنويه هنا انه هناك نوعان من الردود، responseText و respon***ML ولكننا هنا نأخذ فقط النص الذي رجع إلينا من طلب صفحة الphp في السابق، وربما سأشرح كيفية التعامل مع الردود بالXML لاحقا.

وبعد هذا وعندما يتم التأكد أن المتغير response يحمل نصا وليس فارغا يتم أخذ هذا النص ووضعه في الDiv التي اسمها ajaxTest.
نهاية الدرس
وقد حملت بعض الأمثلة لرؤية كيفية عمل الأجاكس وللإستفادة المطلقة من هذا الدرس
المثال الأول: استخدام طريقة GET
http://www.devpedia.org/articles/ex...es/demoGet.html (http://www.devpedia.org/articles/examples/files/ajaxexamples/demoGet.html)
المثال الثاني: استخدام طريقة POST
http://www.devpedia.org/articles/ex...s/demoPost.html (http://www.devpedia.org/articles/examples/files/ajaxexamples/demoPost.html)

وبهذا تم الانتهاء من أول درس في الأجاكس والXMLHttpRequest وأتمنى من الله أن أكون قد وفقت في هذا الدرس وتكونوا قد استفدتم منه.

-------------------------------------------------------

:: كتبه Bo3oof
:: المصدر: http://www.devpedia.org/articles/index.php?p=17 (http://www.devpedia.org/articles/index.php?p=17)


======================

ومن أراد المناقشة فبإمكانه ذلك هنا أيضاً لأن كاتب المقال معنا في سوالف

وبالتوفيق للجميع ومبروك عليكم القسم ومبروك عليكم رمضان الكريم


المبدع العربي ^_^
http://www.DevPedia.org

[محمد ناشد]

With ASP.NET AJAX, developers can quickly create pages with rich, responsive UI and more efficient client-server communication by simply adding a few server controls to their pages. This new Web development technology from Microsoft integrates cross-browser client script libraries with the ASP.NET 2.0 development framework. ASP.NET AJAX provides developers building client-based Web experiences with a familiar development process and programming model that they already know from using server-side ASP.NET development.

http://download.microsoft.com/download/0/1/2/012ddbc3-5511-4751-b761-454fe98fc187/ASPAJAXExtSetup.msi

[محمد ناشد]

للتبحر والتعلم بشكل صحيح

http://ajax.asp.net/Default.aspx

[زاهر الحاج حسين]

شكرا لكم شباب جميعا على هذه المعلومات

خلص....معناتا لنتوكل على الله ونبلش نتعلم أجاكس. :hap5:

[M.Alhamdoosh]

الله يعطيكم العافية جميعا على هذا التفاعل وأخص بالذكر محمد ناشد على تفاعله مع الموضوع

[الخوارزمي]

ما شاء الله عليك أبو عبدو ماتركت موقع ويب إلا وحطيته كمرجع لهذه التقنية الجديدة

وأنا أيضاً رح أساهم بمثال صغير يوضح تقنية الAJAX وهو يعمل بدون local server

:thi3: