هكذا أجاكس AJAX، وأجاكس، وهذا ما نقوم به على نطاق واسع في هذه الأيام. أنه يوفر الوقت، ويضيف دينامية ويمنحك شعورا من استخدام نوع تطبيق البرنامج من الشعور. كنت هناك العديد من الطرق لاستخدام أجاكس مع العديد من المكتبات. ولكن كما ترون هذا الموقع هي لمسج، سوف نبحث في بعض الأساسية أو ربما الأعراف AJAX المتقدمة.
ماذا نحتاج؟
مسج مكتبة (طبعا)
PHP السيناريو صغيرة
دعونا بدأ يتحدث. في مسج، وهناك في الأساس 6 أنواع من طريقة للقيام بعمليات أجاكس. وهذه هي
- $. اياكس (خيارات)
- $. الحصول على (رابط والبيانات والاستدعاء)
- $. getJSON (URL والبيانات والاستدعاء)
- $. getScript (رابط، رد)
- تحميل (رابط والبيانات والاستدعاء)
- $. آخر (رابط والبيانات والاستدعاء،
وبصرف النظر عن عدد 1، وجميع الطرق الأخرى استخدام $. اياكس داخليا. وذلك يعني ان $. اياكس () هو وظيفة لدينا والدة لعمليات أجاكس مسج. دعونا ننظر في كيفية $. اياكس () يبدو وكأنه
$. اياكس ({ , نوع: "POST"، , URL: "some.php"، , البيانات: "اسم = بيتر والموقع = NY"، ( msg ) { نجاح: وظيفة (MSG) { "Server Response " + msg ) ; تنبيه ("استجابة الملقم" + جي اس)؛ } })؛
هذا هو جميل فيه. المعلمة نوع يأخذ "GET" أو "POST" مما يعني أنه يمكنك إرسال أجاكس طلب الحصول على منصب أو الحصول على (فما استقاموا لكم فاستقيموا يفضلون دائما ما بعد). بقية المعلمات هي جميلة النفس التفسيرية إذا كنت نلقي نظرة على الرمز مرة أخرى.
الآن ونحن في طريقنا لجعل برنامج نصي صغير أجاكس أن يقرأ من وصلة به الارتباط التشعبي (<A>)، ويحمل على طلب بشأن بعض عناصر DIV في الوثيقة.
أولا نحن نلقي HTML عادية من وثيقة PHP التي ستبدو هذه
<DOCTYPE HTML PUBLIC "! - / / W3C / / DTD XHTML 1.0 الصارم / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <HEAD> <TITLE> اختبار رابط اياكس </ عنوان> <meta http-equiv="content-type" content="text/html؛ charset=iso-8859-1" /> <script type="text/javascript" src="jquery-1.2.6.min.js"> </ SCRIPT> </ HEAD> <BODY> </ BODY> </ HTML>
الآن دعونا نضيف بعض وصلات لهذه الوثيقة. للحصول على أفضل نوع من القائمة نظرة سنستخدم أ> UL لى وصله. والتي تبدو مثل هذا
<ul id="nav"> <li> <a class="ajax_link" rel="div1" href="response.php؟user=john"> الحمولة في الدرجة 1 </ أ> </ لى> <li> <a class="ajax_link" rel="div2" href="response.php؟user=nash"> الحمولة في الدرجة 2 </ أ> </ لى> <li> <a class="ajax_link" rel="div3" href="response.php؟user=stella"> الحمولة في الدرجة 3 </ أ> </ لى> <li> <a class="ajax_link" rel="div4" href="response.php؟user=jason"> الحمولة في الدرجة 4 </ أ> </ لى> </ UL>
وكما ترون وضعنا الروابط في قائمة العناصر داخل كائن قائمة غير مرتبة. القاء نظرة فاحصة على خصائص العلامة <A> ل. لدينا HREF، والطبقة، ويختلط السمة التي تبدو شيئا مختلفا عن وجود صلة عادية. إذا كنت ترى، لأننا قدمنا للالصفة rel على بعض الأسماء DIV div1 وهي div2 .. هلم جرا. وهذا يعني أننا نريد استجابة HREF إلى أن يتم تحميل في تلك divs. كيف نفعل ذلك؟ دعونا نضيف تلك divs 1
<SPAN> DIV -1 </ SPAN> <div id="div1" class="content_loader"> </ div> المصدر: <SPAN> DIV -2 </ SPAN> <div id="div2" class="content_loader"> </ div> المصدر: <SPAN> DIV -3 </ SPAN> <div id="div3" class="content_loader"> </ div> المصدر: <SPAN> DIV -4 </ SPAN> <div id="div4" class="content_loader"> </ div> المصدر:
والجزء الحقيقي الآن - لدينا نظرا للروابط فئة "ajax_link". سنقوم فقط إضافة حيوي الإجراءات اياكس الروابط فقط وجود اسم فئة تدعى "ajax_link". الجحيم، ونحن لا جميع الروابط من صفحة لديها إجراءات اياكس، نفعل؟
لذلك، على تحميل وثيقة كنا نفعل هذا.
. ready ( function ( ) { $ (وثيقة). استعداد (وظيفة () { ) . click ( function ( ) { $ ("a.ajax_link"). فوق (وظيفة () { this ) ; $ current_link = $ (هذا)؛ $. اياكس ({ , اكتب: "آخر"، ( "href" ) , URL: $ current_link attr ("HREF")، ( e ) { نجاح: وظيفة (ه) { + $current_link. attr ( "rel" ) ) . html ( e ) ; . $ ("#" + $ current_link attr ("يختلط")) HTML (ه)؛ } })؛ ; عودة كاذبة؛ })؛ })؛
اسمحوا لي أن أشرح السيناريو قليلا. هذا الحدث هو حدث document.ready التي يتم تشغيلها عند تحميل الصفحة. ومن ثم نقوم بتعيين نوع من الرموز في الحدث Click للروابط الذين لديهم فئة "ajax_link". فعل هذا $ current_link = $ (هذا)؛ يسمح أن يكون الكائن الارتباط الحالي ستكون متاحة ضمن وظيفة رد الاتصال. ونحن لدينا
$ ("#" + $ current_link.attr ("يختلط")). أتش تي أم أل (ه)
وهو ما يعني $ ("div_id") HTML (server_response) والتي وضعناها في المعلمة URL من وظيفة أياكس $ حيوي مع URL: $ current_link.attr ("HREF"). حتى الآن كل تلك الوسائل "كل هؤلاء الذين لديهم صلات فئة" ajax_link "- إضافة معالج الحدث انقر فوق - ثم تنفيذ وأجاكس طلب اتخاذ خيارات HREF poperty وتحميل استجابة إلى DIV الذي يطابق رقم" يختلط "سمة لل ربط ". وعودة كاذبة يمنع عمل رابط مثل رابط عادي 
أريد أن نرى ذلك إجراء؟ هنا تذهب.
ويمكنك تحميل المصدر كذلك.
في المقطع التالي من هذا البرنامج التعليمي قليلا سنقوم باستخدام نفس الشيء ولكن مع قليل من الراحة.
تطبيق أسهل طريقة
كل شيء يبقى نفسه تقريبا. سنقوم فقط تغيير أسلوب اياكس هنا. لذلك بدلا من كتابة كل كتلة اياكس $. يمكن أن نحقق نفس الشيء مع ما يلي.
. ready ( function ( ) { $ (وثيقة). استعداد (وظيفة () { ) . click ( function ( ) { $ ("a.ajax_link"). فوق (وظيفة () { + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ ("#" + $ (هذا) attr ("يختلط")) حمولة ($ (هذا) attr ("HREF"))؛ ; عودة كاذبة؛ })؛ })؛
انها أقل تعقيدا بكثير الآن، أليس كذلك؟ طريقة تحميل تحميل محتوى اياكس ضمن العنصر إرفاقه. إذا $ ("# somediv_id"). الحمل ("mypage.php")، وأنها سوف تحاول تحميل mypage.php ومضمون فيها. بسيطة جدا، أليس كذلك؟ ولكنني أقترح أن تعتاد على الطريقة الرئيسية (كما هو موضح في الجزء الأول).
في ملف مضغوط وهناك ملف آخر دعا ajax2.php والذي يدل على هذا methos التي لها نفس النتيجة.
لذلك، أجاكس ليس من الصعب كما يبدو، أليس كذلك؟ عندما تصبح بطلاقة جدا مع عمليات أجاكس، سوف تقوم بإنشاء magics.
شكرا للقراءة راجع للشغل.
التعليقات الأخيرة