استقبال البيانات في صفحة الويب بعد الاتصال عن طريق API وتحديث الصفحة

Mohammad Kiblawi · 8 أغسطس 2021

لقد تعلمنا كيفية صناعة api من خلال php و كيفية ارسال data الى واجهة المستخدم لكن حصرا من خلال php

و لكنني اعرف طريقة اخرى تعلمناها في الجامعة مؤخرا و هي كيفية استلام المعلومات من خلال ajax object بواسطة ال javascript

فهل من المحبذ معالجة المعلومات من خلال javascript or php؟؟

تم التعديل في 8 أغسطس 2021 بواسطة Wael Aljamal
توضيح السؤال

Wael Aljamal · 8 أغسطس 2021

إن فكرة API مختلفة عن فكرة AJAX.

API: هي مجموعة دوال ضمن متحكمات تعيد لنا بيانات خام بصيغة JSON مثلاً, بدون أي تنسيقات أو HTML ويمكن الاستفادة منها في تطبيقات الهواتف المحمولة مثلا حيث تكون الواجهة عبارة عن تصميم في التطبيق حسب لغة برمجة التطبيق أي مثل قالب HTML-CSS.. فيتم حشر البيانات ضمن تصميم موجود مسبقاً وعرضه.

برمجة ال API محصورة بالمخدم، أي يتم الاتصال بالمخدم عن طريق مسارات محددة وباستخدام HTTP methods محددة لنحصل على النتيجة المطلوبة.

AJAX: هي طريقة تقوم بها بإرسال طلبية ومن ثم استقبال البيانات في صفحة الويب باستخدام لغة جافاسكربت، وتقوم بتحديث الصفحة أو جزء منها بدون إعادة تحميلها مجدداً.

بتاريخ 1 ساعة قال Mohammad Kiblawi:

كيفية ارسال data الى واجهة المستخدم لكن حصرا من خلال php

دوماً لغة المخدم هي من ترسل البيانات.

بتاريخ 1 ساعة قال Mohammad Kiblawi:

فهل من المحبذ معالجة المعلومات من خلال javascript or php؟؟

معالجة المعلومات في المخدم تكون عن طريق PHP (ربما تعيد عناصر HTML أو بيانات على شكل JSON) أما في صفحة العرض في المتصفح يمكن أن تكون جافاسكربت هي من تولد عناصر HTML حسب قالب معين و تضيف عليها البيانات القادمة من المخدم الذي يرسل في هذه الحالة فقط البيانات.

********

إن لم تستعمل AJAX عليك تعبئة استمارة HTML form وله زر submit وترسل الطلبية، أما من خلال AJAX تقوم بتهئية http request وترسلها للمخدم وبعد النتيجة تحدّث الصفحة لديك..

مثال لاستعمال AJAX:

ليكن لدينا صفحة HTML بسيطة:

<!DOCTYPE html>
<html>
<body>

<div id="demo">
  <h2>Let AJAX change this text</h2>
  <button type="button" onclick="loadDoc()">Change Content</button>
</div>

</body>
</html>

وشيفرة جافاسكربت وأجاكس كالتالي:

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

لاحظ أن الاتصال يتم على ملف نصي، بالطريقة GET، ولدينا الدالة التي تستقبل رد المخدم وإذا كان 200 أي وصل رد صحيح، سنقوم بحشر البيانات التي عاد بها المخدم( افتراضيا يعيد ملف نصي) وحشرها في العنصر demo لتحديث العرض

مثال عن محتوى الملف:

ajax_info.txt
=>

<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a technique for accessing web servers from a web page.</p>
<p>AJAX stands for Asynchronous JavaScript And XML.</p>

المثال الذي ذكرته يعتمد على أجاكس مباشرة باستخدام جافاسكربت، ويمكن الاستفادة من جيكويري jQuery لتسهيل العمل.

مقالة من أكاديمية حسوب:

توثيق حسوب:

wiki.hsoub / jQuery - Ajax

أسئلة و أجوبة تتعلق بالموضوع:

صورة تبسط دورة حياة الطلبية:

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

استقبال البيانات في صفحة الويب بعد الاتصال عن طريق API وتحديث الصفحة

السؤال

Mohammad Kiblawi

1 جواب على هذا السؤال

Recommended Posts

Wael Aljamal

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية