القائمة الرئيسية

الصفحات

jQuery - Ajax




AJAX هو اختصار لـ Asynchronous JavaScript و XML ، وتساعدنا هذه التقنية في تحميل البيانات من الخادم دون تحديث صفحة المتصفح. إذا كنت جديدًا مع AJAX ، فإنني أوصيك بالاطلاع على برنامج Ajax التعليمي قبل المضي قدمًا. JQuery هي أداة رائعة توفر مجموعة غنية من أساليب AJAX لتطوير تطبيقات الويب من الجيل التالي. تحميل بيانات بسيطة من السهل جدًا تحميل أي بيانات ثابتة أو ديناميكية باستخدام JQuery AJAX. يوفر JQuery طريقة load () للقيام بالمهمة - بناء الجملة هنا هو بناء الجملة البسيط لطريقة load () -

[selector].load( URL, [data], [callback] );
فيما يلي وصف لجميع المعلمات - URL - عنوان URL لمورد جانب الخادم الذي تم إرسال الطلب إليه. يمكن أن يكون برنامج نصي CGI أو ASP أو JSP أو PHP يقوم بإنشاء البيانات ديناميكيًا أو خارج قاعدة البيانات. البيانات - تمثل هذه المعلمة الاختيارية كائنًا يتم تسلسل خصائصه إلى معلمات مشفرة بشكل صحيح ليتم تمريرها إلى الطلب. إذا تم تحديد ذلك ، يتم إجراء الطلب باستخدام طريقة POST. إذا تم حذفها ، يتم استخدام طريقة GET. رد الاتصال - يتم استدعاء وظيفة رد الاتصال بعد تحميل بيانات الاستجابة في عناصر المجموعة المتطابقة. المعلمة الأولى التي تم تمريرها إلى هذه الوظيفة هي نص الاستجابة المستلم من الخادم والمعلمة الثانية هي رمز الحالة. مثال: ضع في اعتبارك ملف HTML التالي مع ترميز JQuery صغير -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               $('#stage').load('/jquery/result.html');
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load /jquery/result.html file −</p>
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

هنا يبدأ تحميل () طلب Ajax إلى عنوان URL المحدد

<h1>THIS IS RESULT...</h1>

الحصول على بيانات JSON قد يكون هناك موقف يقوم فيه الخادم بإرجاع سلسلة JSON بناءً على طلبك. تقوم وظيفة الأداة المساعدة JQuery getJSON () بتوزيع سلسلة JSON التي تم إرجاعها وتجعل السلسلة الناتجة متاحة لوظيفة رد الاتصال كمعامل أول لاتخاذ مزيد من الإجراءات. بناء الجملة هنا هو بناء الجملة البسيط لطريقة getJSON () -

[selector].getJSON( URL, [data], [callback] );

فيما يلي وصف لجميع المعلمات - URL - عنوان URL لمورد جانب الخادم الذي تم الاتصال به عبر طريقة GET. البيانات - كائن تستخدم خصائصه كاسم/قيمة أزواج القيم لإنشاء سلسلة استعلام ليتم إلحاقها بعنوان URL ، أو سلسلة استعلام مُنسَّقة مسبقًا ومُرمَّزة. رد الاتصال - وظيفة يتم استدعاؤها عند اكتمال الطلب. يتم تمرير قيمة البيانات الناتجة عن استيعاب نص الاستجابة كسلسلة JSON كمعامل أول إلى رد النداء هذا ، والحالة على أنها الثانية. مثال: ضع في اعتبارك ملف HTML التالي مع ترميز JQuery صغير -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
				
               $.getJSON('/jquery/result.json', function(jd) {
                  $('#stage').html('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Age : ' + jd.age+ '</p>');
                  $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
               });
					
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load result.json file −</p>
		
      <div id = "stage" style = "background-color:#eee;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

هنا تبدأ طريقة الأداة المساعدة JQuery getJSON () طلب Ajax إلى ملف URL المحدد result.json. بعد تحميل هذا الملف ، سيتم تمرير كل المحتوى إلى وظيفة رد الاتصال التي سيتم ملؤها أخيرًا داخل <div> بعلامة ID stage. بافتراض أن ملف result.json الخاص بنا يحتوي على محتوى بتنسيق json يتبع -

{
   "name": "Zara Ali",
   "age" : "67",
   "sex": "female"
}

تمرير البيانات إلى الخادم في كثير من الأحيان تقوم بجمع المدخلات من المستخدم وتمرير هذا الإدخال إلى الخادم لمزيد من المعالجة. جعل JQuery AJAX الأمر سهلاً بدرجة كافية لتمرير البيانات المجمعة إلى الخادم باستخدام معلمة البيانات لأي طريقة Ajax متاحة. مثال يوضح هذا المثال كيف يمكن تمرير مدخلات المستخدم إلى برنامج نصي لخادم الويب يرسل نفس النتيجة مرة أخرى وسنطبعها -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               var name = $("#name").val();
               $("#stage").load('/jquery/result.php', {"name":name} );
            });
         });
      </script>
   </head>
	
   <body>
      <p>Enter your name and click on the button:</p>
      <input type = "input" id = "name" size = "40" /><br />
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Show Result" />
   </body>
</html>

Here is the code written in result.php script −

<?php
   if( $_REQUEST["name"] ){
      $name = $_REQUEST['name'];
      echo "Welcome ". $name;
   }
?> 

طرق JQuery AJAX لقد رأيت المفهوم الأساسي لـ AJAX باستخدام JQuery. يسرد الجدول التالي جميع طرق JQuery AJAX المهمة التي يمكنك استخدامها بناءً على احتياجاتك البرمجية -

تابع الموقع سوف نسرد كل استخدام على حدى مع ذكر التفصيل للاستخدام على حسب احنياجك

هل اعجبك الموضوع :

تعليقات