النتائج 1 إلى 12 من 12

الموضوع: [درس استخدام jQuery] اعمل حركات اجاكسيه مع الPHP وJSON في اقل من 10 اسطر

  1. [درس استخدام jQuery] اعمل حركات اجاكسيه مع الPHP وJSON في اقل من 10 اسطر



    انا اريد ان اوضح للناس اننا في زمن التطور السريع؟ ولكن هل سئلتم انفسكم لماذا هذا التطور الهائل؟ الاجابه ليست في ان قوه الاجهزه اصبحت كبيره، بل هي الموضوع يكمن في ان المبرمجين اصبحوا كسالى، اي لا يريدون ان يكتبوا اكثر من سطر ولكن ذالك السطر يجب ان يفعل الكثير.

    فكيف نفعل ذالك؟
    نفعل ذالك باستخدام نطاقات الاعمال .. اي ان هناك شخص قد اختصر الطريق لعمل شيء ما، فما هو المطلوب منا سوى استعمال ذالك الطريق المختصر.

    اولا لنقم بتحميل الملف jQuery من الموقع الرسمي jQuery: The Write Less, Do More, JavaScript Library

    ولنصمم ملف اسمه index.html فيه اساسيات ملف الHTML ولنقم بتحميل ملف الjquery فيه

    كود HTML:
    <html>
    <head>
    	<script src="jquery-1.2.6.min.js"></script>
    </head>
    <body>
    </body>
    	<div id="content"></div>
    </html>
    الان .. مذا نريد ان نفعله؟
    لماذا لا نفعل ملف PHP يعطينا بعض المخرجات، ولكن لنأخد الدرس الى مستوى اعلى، لماذا لا تنستخدم الJSON؟ الJSON هو طريقه جديدة في نقل بيانات من مكان الى اخر، هو شبيه بالXML من ناحيه الاستخدامات ولكن بدوم الشحم الزائد.
    فمثلا ملف XML

    كود HTML:
    <document>
    	<user>
    		<name>Khalid</name>
    		<phone>01234567890</phone>
    	</user>
    </document>
    المرادف له بالJSON يكون
    كود HTML:
    {"user":{"name":"khalid","phone":"01234567890"}}
    فمن تلك المعلوما نستطيع استيعاب بيانات مقارنه بملف HTML، الان لنعمل ملف الPHP الذي سيعطينا الJSON

    كود PHP:
    <?php
    //ajax.php

    $user = array(user=>array('name'=>'khalid','phone'=>'01234567890'));
    echo 
    json_encode($user); // {"user":{"name":"khalid","phone":"01234567890"}}
    ?>
    الان.. كيف نجعل ملف الHTML يتخاطب مه الPHP ..
    كما نعلم ان ملف الHTML الان يحتوي على نطاق العمل jQuery اي يمكننا الاستفاده من قوه الjquey.
    نريد ايضا ان نضع رابط في ملف الHTML لكي ينفذ عمليه الAJAX بعد النقر عليها .. فنعدل ملف الHTML الى التالي.

    كود HTML:
    <html>
    <head>
    	<script src="jquery-1.2.6.min.js"></script>
    	<script src="javaScript.js"></script>
    </head>
    <body>
    </body>
    	<a href="#" id="clickHere">Click to Load Ajax</a>
    	<div id="content">
    		name: <span id="name"></span> <br />
    		phoone: <span id="phone"></span>
    	</div>
    </html>
    وايضا لاحضتم انني وضعت السطر
    كود HTML:
    <script src="javaScript.js"></script>
    في الملف لكي يحمل ايضا ملف الjavaScript المطوب، هذا الملف سيحتوي على كل السطور الازمه لكي ننفذ عمليه الAJAX

    لنقم بانشاء الملف javaScript.js. ونكتب فيه الشرط الاول .. وهو ان يعمل الشفره بعد الانتهاء من تحميل ملف الHTML وفعل ذالك هو بوضع الكود

    كود:
    $(funciton(){})
    هذا يقول للjquery ان ينفذ الfunciton بعد الانتهاء من تحميل ملف الHTML. في الjQuery عمليه اختيار الtag المناسب يكون اما بالID او بالCLASS ولكن نحن سنستخدم الID فالان نريد ان نعطي خاصيه للرابط المعرف بالID بالاسم clickHere, والخاصيه هي .. ان يتم عمليه اجاكسيه بعد الامر Click ويتم وضع الناتج في الDIV المعرف بالID تحت اسم content ووضع الناتج في الخانات المناسبه

    فسيكون ملف الjavaScript كالتالي
    كود:
    //javaScirpt.js
    $(function(){
    	$('#clickHere').click(function(){
    		$.getJSON('ajax.php',function(data){
    			$('#content #name').text(data.user.name);
    			$('#content #phone').text(data.user.phone);
    		});
    	});
    });
    جرب الكود بنفسك .. ستنبهر بما تستطيع فعله في اسطر قليله.
    للمزيد من المعلومات قم بزياره المستند الخاص بjQuery على العنوان
    Main Page - jQuery JavaScript Library

    =======

    الدرس القادم سيحتوي على دروس في الZendFramwork، اذا ضننت ان jQuery كانت سهله وتستطيع عمل الكثير في عده اسطر، انا اضمن لك انك ستقول ماهذا؟؟ هل 20 سطر تكفي لعمل اضافة و تعديل و ازاله سجلات من جدول، لا وفوق ذالك اعمل نظام تسجيل وخروج المستخدم كلها في 20 سطر او اقل!





    __________________
    هلابي افضل المواقع العربية تصميماً
    انصح باستخدام ابونتو


  2. #2
    عضو نشيط جدا
    تاريخ التسجيل
    Oct 2003
    المشاركات
    549


    شرح رائع

    ومن خلاله فهمت الـJSON

    الف شكر لك





    __________________
    صالح المطرفي (Mr.Saphpـ)
    مدونتــــــي
    الصندوق الماسي الخامس
    قوالب WordPress
    تم بحمد الله الإنتهاء من سكربت الدروس العربي 4.0
    http://www.saphplesson.org



  3. لا هنت اخوي hilaby

    وبالفعل النتائج مبهرة

    وبإنتظار القادم





    __________________
    -----------------------------------------------------------
    :: همـ المشاعر ــس :: عبد الله :: للتصميم و التطوير ::
    http://www.mr-sa.com
    -----------------------------------------------------------

  4. #4
    عضو فعال جدا
    تاريخ التسجيل
    Jun 2003
    المشاركات
    2,123


    بارك الله بكم وجزاك الله خير





    __________________
    htaccess بكل بساطة

    الشفرة الموحدة "يونِكود"

    (إن من مفاسد هذه الحضارة أنها تسمي الاحتيال ذكاءً، والانحلال حرية، و"الرذيلة فناً" والاستغلال معونة) - مصطفى السباعي

  5. #5
    عضو نشيط جدا
    تاريخ التسجيل
    Feb 2008
    المشاركات
    438


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





    __________________
    لا إله الا الله محمد رسول الله

    فضائية الأقصى :: عينك على الوطن
    نيلسات: 10872 عمودي 27500
    عربسات: 12054 عمودي 27500


    إعلامنا.. إسلامي.. هادف.. مقاوم.. لتعلو الراية..

  6. #6
    عضو نشيط جدا
    تاريخ التسجيل
    May 2007
    المشاركات
    509


    ما شاء الله عليك اخوي ... مشكور على المجهود الرائع وبالفعل مكتبة رائعة .





    __________________
    EbNCaNa اخوكم ابن قانا

    [درس] قائمة بريدية بأسهل الطرق بواسطة PHP

    [توقيعك يجب أن لا يكون أطول من 400 حرف يتضمن تجاوز كود المنتدى] - الى متى المعاناة يا حضرة الأدارة ؟

  7. #7
    عضو نشيط
    تاريخ التسجيل
    Feb 2008
    المشاركات
    281


    السلام عليكم ورحمة اللة وبركاتة

    هل يوجد طريقة بحيث عند فتح الزائر للمرة الأولى يتم عمل كاش فى الجهاز لفايل iquery وحجموا فى حدود 60 k

    أكبر من حجم صفحة الموقع + الصور

    لأن مع دخول أعداد الزوار الكبيرة على الموقع يقوم هذا الفايل بأهدار الباندويتث

    أو هل يوجد طريقة لضغط المكتبة يحث يصبح حجمها أقل من ذلك






  8. #8
    عضو نشيط
    تاريخ التسجيل
    May 2007
    المشاركات
    32


    اخوي hilaby أنت رآآآئع بما تعنيه الكلمة من معنى ..

    جزاك الله ألف خير ،،
    بإنتظار دروس الZendFramwork على أحر من الجمر :court:..






  9. #9
    عضو نشيط جدا
    تاريخ التسجيل
    Aug 2007
    المشاركات
    597


    السلام عليكم
    اخي الكريم .. أنا أريد ان اتعلم الجافا سكريبت والاجاكس .. فهل يوجد لديك مواقع تفيدني ؟؟ او كتب ؟؟
    وشكرا لك على المجهود
    بانتضارك








  10. شكرا لكم جميعا على ردودكم.

    الى الاخ tech، المتصفح دائما يحفظ الملف في الكاش، مادام لم تغير المسار. وايضا تستطيع ان تقول للApache او الISS بأن يجعل تاريخ انتهاء الملف كبير. وعندما تغطي ملف جديد، تغير المسار. ولكن هناك اشياء جديده في هذا المجال. الا وهو استضافه موقعك عن طريق google، وهو سهل للغايه .. اقرأ المزيد في هذا الرابط AJAX Libraries API - Google Code

    mostafa-962: ابحث في المستندات الرئيسيه من الموقع الرسمي لاي لغه او نطاق عمل. لان المواقع ستعطيك دروس غير منظنه، واذا مازلت مصر على موقع اذهب الى SitePoint : New Articles, Fresh Thinking for Web Developers and Designers





    __________________
    هلابي افضل المواقع العربية تصميماً
    انصح باستخدام ابونتو

  11. #11
    عضو نشيط
    تاريخ التسجيل
    Jan 2008
    المشاركات
    176


    شكرا





    __________________
    :1power::1power:

  12. #12
    عضو نشيط جدا
    تاريخ التسجيل
    Sep 2006
    المشاركات
    547


    شكرا على هذا الموضوع المفيد والهام










ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  

أضف موقعك هنا| اخبار السيارات | حراج | شقق للايجار في الكويت | بيوت للبيع في الكويت | دليل الكويت العقاري | مقروء | شركة كشف تسربات المياه | شركة عزل اسطح بالرياض | عزل فوم بالرياض| عزل اسطح بالرياض | كشف تسربات المياة بالرياض | شركة عزل اسطح بالرياض