اذهب إلى المحتوى
  • 0

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

Mohammad Kiblawi

السؤال

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

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

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

تم التعديل في بواسطة Wael Aljamal
توضيح السؤال
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1

إن فكرة 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

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

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

ajax.gif

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...