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

الصفحات

تعديل المشاركة

تعلم jQuery وAjax والفرق بينهم وبين JavaScript

(0)

 

AJAX jQuery javascript

ما هي jQuery ؟

jQuery هي جافاسكريبت نفسها فقط جي كويري تجعلك تكتب كود javascript بطريقة سهلة بدل الكتابة الكلاسيكية المعروفة ، ومن الأفضل عند تعلم جافاسكريبت تتعلم كتابة الاكواد بطريقة jQuery لانه قادر على فعل الكثير من الأشياء وسهل التعامل مع elements html .

لكن إنتظر ، من المعروف أن جافاسكريبت تعمل وتنفد أوامرهاعلى متصفح الويب مثل فيرفوكس او جوجل كروم إلخ ، لكن في حالة كنت تكتب ملف يتم تنفيده بدون انترنت ستعمل معك جافاسكريبت العادية ، أما jQuery و ajax فلن تعمل معك أوامرها إلا في حالة وجود انترنت ، لأن ذلك يتطلب استدعاء أحد المكتبات من خلال أحد الأومر داخل الكود .


مثال لمعرفة أوامرjQuery  

هذا كود تجريبي للغة برمجة jQuery  من خلال جافاسكريبت بالطريقة المعروفة ، الأمر سينفد ظهور رسالة منبثقة على المتصفح .


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<button onclick="myFunction()">Click 1</button>
<button id="btn">Click 2</button>

<script>

// JavaScript Classic
   function myFunction() {
      alert("I am an alert box 1 !");
   }

// jQuery
    $('#btn').click(function(error){
        alert("I am an alert box 2 !");
     });
   
</script>


الأمر 

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

هنا يتم استدعاء مكتبات jQuery و Ajax في نفس الوقت

ولو شاهدت بالكود فقد وضحت أمر إظهار الرسالة المنبثقة من بجافاسكريبت الكلاسيكية وأمر إظها نفس الرسالة من خلال أمر jQuery .


ما هي Ajax ؟

أجاكس (ajax) هي مكتبة خاصة بجافاسكريبت تنفذ أحد المهام المطلوبة والضرورية داخل ملف يحتوي على html ، حيث تقوم ajax بإرسال بيانات واستقبال بيانات بدون تحديث صفحة الويب الظاهرة لديك بالمتصفح ، وهذا جيد جدا لانه لا يستهلك بيانات كبيرة الحجم ولا يقوم بإعادة تحميل الصفحة كاملة والذي يأخد وقت أطول ، وتقينة ajax تتعامل مع asp وphp و xml وعدة انواع أخرى لبيانات الانترنت .

تقنية ajax تعتمد كثيرا على request ، وهي من أسهل المكتبات التي يجب أن تتعرف عليها بعد جافاسكريبت فهي ليست صعبة كما تظن بل هي عبارة عن أكواد وأسطر قليلة ، ويمكن من خلال Ajax عمل صفحات ويب شبيهة ببرامج الحاسوب .


كود إرسال واستقبال بيانات من AJAX إلى PHP

code ajax and php

أروع ما يوجد في برمجة صفحات الويب هو مكتبة أجاكس حيث ان قادرة على جلب بيانات من قواعد البيانات أو بدون تحديث صفحة الانترنت كأنك تعمل على تطبيق أو برنامج حاسوب ويمكنك استخدام بيانات api داخل صفحتك .

الآن سأعطيك كود جافاسكريبت باستخدام ajax ستكون قادر على إرسال بيانات إلى php من خلال POST وعرض الرد لصفتك بدون تحديثها .

كود AJAX مدمج مع HTML


<!DOCTYPE html>
<html>
<head>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<input type="text"  id="usr" value="Mohamed Hirech"> <br><br>
<input type="text"  id="age" value="30"> <br><br>
<button type="button" id="btn" >Send</button> <br><br>

<div id=box> </div>

<script>


$('#btn').click(function(error){

     var name = document.getElementById('usr').value ;
     var age = document.getElementById('age').value ;

     $.ajax({
          url:"data.php",
          type:"POST",
          data:{name:name , age:age } ,
          success:function(text){
                document.getElementById("box").innerHTML = text;
          }
      });

 });

</script>


شرح الكود :

أولا يتم استدعاء مكتبة ajax من خلال الأمر :

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

ثم نقوم بجل البيانات التي يدخها المستخدم من خلال الأمر التالي :

     var name = document.getElementById('usr').value ;
     var age = document.getElementById('age').value ;

هذه الأوامر تقوم بجلب البيانات المدخلة في input text html .

ومن خلال ajax نرسل البيانات عن طريق POST إلى ملف data.php .

data.php

<?php
   $name = $_POST["name"] ;
   $age = $_POST["age"] ;

   echo "Name : " . $name ;  
   echo "<br>"   ;
   echo "Age : " .  $age ;
?>

والملف هذا يستقبل البيانات من خلال هذه الكود ويطبعها بأمر echo ويتم عرضعها كما هي داخل ajax من خلال الأمر :

document.getElementById("box").innerHTML = text;

هنا تم الرد وتخزين البيانات داخل text وتم عرضها على dev الذي له id يسمى box في html .


ajax تقنية عليك إتقانهها وتجربتها فقد ينفعك هذا الكود كثيرا وسيسهل عليك إنشاء موقع إلكتروني كثيرا .

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

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

تعليقات

إرسال تعليق



التنقل السريع