كيفية سحب البيانات من واجهة برمجة تطبيقات JSON مع JQuery و AJAX (عندما لا تكون لديك أية أقسام)

المقصود من هذه المقالة هو دليل لمطوري الويب المبتدئين الذين يريدون التفاف أدمغتهم حول استهلاك JSON الأول الذي يعتمد على API. أنا أعرف ما الذي تفكر فيه: "ماذا؟". ما أتحدث عنه هو عندما تريد الحصول على بيانات من موقع ويب / خدمة ويب نشطة لتغذية حل الويب الرائع الخاص بك.

ما هو مدرج في هذه المقالة
* تجول أساسي حول كيفية استخدام واجهة برمجة التطبيقات (API) لأخذ البيانات من قاعدة بيانات الواجهة الخلفية لأحد مواقع الويب وتقديمها إلى صفحة الويب الخاصة بك (والأساسية جدًا) للقيام بأشياء على شبكة الإنترنت.
* تحقيق ذلك عن طريق * استعارة * JSON (تدوين كائن Javascript) من Reddit باستخدام JavaScript و AJAX (Javascript و XML غير المتزامن) و HTML الأساسي وبعض أعمال التصميم المحرجة للغاية مع CSS.

ما هو غير المدرجة
* حل كامل ومفيد
* موقع جيد المظهر
* المعجزات
* ضمان أن محتوى Reddit الذي تراه أثناء القيام بذلك لن يكون مبتذلاً ... بل هو آخر خلاصات منشورات Reddit. o.0

دعنا نبدأ مع بعض الرموز:

// تخدم بعض الحقيقة الصعبة الباردة
 الدالة doSomeTruth (TheTruthAboutAPIs) {
إذا .. (أنت تسأل عن كيفية استخدام API && لم تقم بذلك بعد)
{
console.log ("سيكون لديك وقت سيء! ولكن .. هذه المقالة ستساعد.") ؛
TheTruthAboutAPIs = TrueThat؛
}
 آخر..
{console.log ("هنا رابط لخريطة google map api ، تستمتع بذلك .. https://enterprise.google.com/maps/products/mapsapi.html.") ؛
 }

بما فيه الكفاية مع بلدي الغريبة المبتدئين المطور ، دعونا نذهب إلى الخطوات:

الجزء 1) البحث في وثائق API

لا يوجد اثنان على حد سواء. لماذا ا؟ لأن الحياة صعبة ومعقدة ، تمامًا مثل أي بيانات سيكون لها أي استخدام للعالم الحقيقي لك. لهذا السبب ، يعد البحث عن حل فريد من نوعه والذي قدمه مطورو الويب لمصدر البيانات الهدف الخاص بك في واجهة برمجة التطبيقات (API) الخاصة بهم أمرًا في غاية الأهمية.

فيما يلي بعض الخطوات التي يجب اتباعها لمساعدتك على معرفة ما ستحتاج إلى التركيز عليه للمساعدة في إنجاح مهمتك.

اذا، عن ماذا تبحث؟ سألخص هذا الأمر في أربعة أجزاء.
 أ) أين؟
 ب) مفتاح؟
ج) سلاسل الاستعلام؟
د) ما عنوان URL الذي يحصل على JSON؟

A) أين هو API؟ (والأهم من ذلك: أين هي الوثائق وهل أحتاج إلى حساب)؟ الإجابة الواضحة هنا هي البحث في google عن اسم المورد ، متبوعًا بـ "api". في مثالنا ، سأكون سهلاً علينا وأستخدم Reddit كمثال. اختصار الوثائق هنا: https://www.reddit.com/dev/api/

ب) مفتاح؟ هل أحتاج إلى مفتاح api للوصول إلى البيانات؟ لا يتم إعطاء جميع البيانات بحرية ولسبب وجيه. قبل أن أسأل كيف يمكنني الوصول إلى بيانات واجهة برمجة التطبيقات ، يجب عليك أن تسأل كيف يمكنني منح إذن بذلك؟ تريد العديد من المواقع التي تحتوي على معلومات مثالية مثل Twitter أو api على Facebook أن تعرف من أنت قبل أن تقدم لك بياناتها بحرية. بمجرد التسجيل للحصول على حساب مطور مع هذه الخدمات ، فإنها توفر لك مفتاح. غالبًا ما يشبه المفتاح jibberish المشفر ويتوافق مع عنوان URL معظم الوقت ، مثل:

http://api.IAmNotARealSiteAsFarAsJesseKnows.com/json-for-you/؟API_KEY=1239571325012351035135091735

لحسن الحظ بالنسبة لنا ، لا تهتم Reddit وتقدّم بحرية بيانات JSON عن خلاصاتها Reddit ، لذلك لن نكون بحاجة إلى مفتاح اليوم.

ج) سلاسل QUERY؟ (هذا هو نوع من ، مهمة للغاية)
ما سلاسل الاستعلام التي يتطلبها api لإرجاع نتيجة JSON؟ ما هي المعلمة؟ مقبول بدرجة كافية .. دعنا نتحقق من عنوان url من مثال تطبيق الطقس المفتوح:

api.openweathermap.org/data/2.5/weather؟q=London

يمكن أن أستمر لأيام حول عناوين url ، دعنا نتحدث فقط عن جزأين هنا:
1) كل هذه الأشياء: api.openweathermap.org/data/2.5/weather.
2) سلسلة الاستعلام: تظهر بعد علامة "؟" ، في هذه الحالة:؟ q = London.

"q = London" ، وفقًا لوثيقة API Open Map Map ، هي معلمة الاستعلام التي تبحث عنها خدمة البيانات لمعرفة المعلومات حول المدينة التي ستعود إليك. بناءً على ما تحاول القيام به ، ستصبح سلاسل الاستعلام هذه ضرورية لتمشيط الخدمة واستعادة المعلومات التي تحتاجها. سيقوم كل api بإعداد بياناته بشكل مختلف ، لذا اقرأ الوثائق الخاصة بهم.

د) URL الخاص بك JSON
في حالتنا ، Reddit's API ، لذلك نحن لسنا بحاجة إلى العديد من المعلمات للحصول على أحدث البيانات ، نحتاج فقط إلى معرفة أين يمكن الحصول عليها - وفقًا لوثائقهم ، يمكننا القيام بذلك ببساطة باستخدام عنوان url هذا:

https://www.reddit.com/new/.json

الجزء 2) البناء: دعونا في الواقع بناء شيء الآن ، نعم؟

تذكر عندما أخبرتك أن هذا المقال لن يساعدك في بناء شيء جميل أو مفيد؟ لم أكن أمزح. هذا ما تبنيه: صفحة ويب تعيد تصميم فظيعة خلاصة مشاركات جديدة. https://repl.it/MHkm/1

https://repl.it/MHkm/1

كيف بنيت هذا القبيح بشكل فظيع "Shreddit API Parser"

أ) قرأت وثائق API
وتجميع عنوان URL للتقرير الذي أردت ، والذي يعد أساسيًا بشكل لا يصدق ويحصل على آخر منشورات صفحة reddit التي يتم إرجاعها كملف JSON. https://www.reddit.com/new/.json

ب) لقد قمت بإنشاء صفحة ويب html أساسية لدفع بيانات واجهة برمجة التطبيقات إلى. (انظر هذا على الرابط مثال الرد المبين أعلاه). تحتوي صفحة html هذه على HTML Boilerplate الأساسي (google it) ، والأهم من ذلك ، أنها تتضمن إشارة إلى JQuery CDN (تعرف أيضًا باسم مكتبة JQuery المستضافة). لن أغطي السبب ، ولكن يجب أن يكون CDN هذا في HTML الخاص بك لكي يعمل هذا الحل ، ستلاحظ أنني وضعت نفسي في أسفل HTML الخاص بي:

أضفت أيضًا قطعة واحدة أكثر أهمية إلى صفحة html هذه: div مع معرف فئة رئيسي. لماذا ا؟ لأننا سنكتب Javascript التي تقوم بإخراج بيانات JSON الخاصة بنا إلى هذا div.

للمتابعة ، نوصيك بإنشاء صفحة / ملف html أساسي وإضافة الأمرين أعلاه إليه قبل خطوتنا التالية.

ج) لقد كتبت javascript التي تجعل هذا العمل في ملف js. هذا هو قلب هذا المقال. (إذا كنت لا تستخدم repl.it أو jsbin.com للمتابعة ، فتأكد من إنشاء ملف main.js وربط ملف html به في .)

اقرأ التعليقات أدناه لفهم كل جزء من حل Javascript هذا. لا تقم بنسخ / لصق الشفرة التالية في هذه الصفحة ، ما عليك سوى استخدام رابط repl.it لذلك: https://repl.it/MHkm/1

فهم ملف Javascript الخاص بي

دعنا نستخدم وظيفة JQuery لإيقاف تشغيل الشفرة عند تحميل الصفحة.
`` `$ (الوثيقة) .ready (وظيفة () {` ``
داخل حدث تحميل صفحتنا ، اتصل بوظيفة AJAX
 getRedditJson ()؛
})؛
دعنا نجعل وظيفة للحصول على بيانات JSON مع AJAX ، يطلق عليها وظيفة تحميل صفحة JQuery أعلاه.
وظيفة getRedditJson () {
/ / من getRedditJson () ، قم بإنشاء كائن Jquery AJAX
.ajax $ ({
الطريقة: "GET" ، / / استخدم GET لأننا نقرأ البيانات.
 
عنوان url: ‘https://www.reddit.com/r/popular/new/.json '،
 أخبر أجاكس بما يحتويه عنوان url من JSON الذي نريده
نوع البيانات: ‘json’ ، // أخبر AJAX أن تنسيق JSON الذي نريده
نجاح: onSuccess ، // إذا نجحت AJAX ، فافتح وظيفة تسمى onSuccess
error: onError // إذا لم تنجح ، فافتح وظيفة تسمى onError ، حتى نتمكن من التأكيد على تناول ملفات تعريف الارتباط الخاصة بشرائح الشوكولاتة ثم المحاولة مرة أخرى.
}) // إغلاق وظيفة AJAX التي يطلق عليها JQuery
} // close the getRedditJson ()؛ وظيفة
نفذ وظيفة onSuccess التالية إذا حصلت AJAX على البيانات بنجاح وتضمنت البيانات التي تُرجعها JSON كمعلمة في الأقواس ، وأنا أسميها jsonReturn ، إنها جميع بياناتي حرفيًا بناءً على طلب أياكس الخاص بي.
وظيفة onSuccess (jsonReturn) {
في وظيفة onSuccess الخاصة بنا ، قم بإنشاء حلقة لدمج الكائن الذي تم إرجاعه لكل سجل محدد وحقل مطلوب في إرجاع بيانات JSON.
لـ (var i = 0؛ i

أريد الكثير من البيانات المحددة في هذا الحلقة ، وسوف أحصل عليها عن طريق صنع
المتغيرات التي تم تعيينها إلى مجموعات فرعية مختلفة من كائن JSON (jsonReturn).

لمعرفة ما يجب الحصول عليه ، قمت بسحب بيانات JSON عن طريق استخدام نفس عنوان url في وظيفة AJAX الخاصة بي تمامًا مثل عنوان url العادي واستخدمت المتصفح لمعاينة البيانات التي حصلت عليها ، لمعرفة ما يجب القيام به لتطبيقي لاسترداد كل قطعة من البيانات.

لهذا العنوان على reddit ، كنت بحاجة إلى كائن jsonReturn الخاص بي (المجموعة الكاملة من البيانات). بالنظر إلى البيانات ، هناك تأثير شلال يغطيه المتغير الخاص بي (يُطلق عليه أيضًا "البيانات"). لاحظ عدد المستويات المتداخلة في الصورة أدناه التي أحتاج إليها للذهاب إلى العديد من حقول البيانات المكررة لجميع السجلات التي عدتها للتو. يبدأ من الجذر أو jsonReturn ثم تشاهد "البيانات:" في الجزء العلوي الأيسر ، تحتها شيء يسمى "- الأطفال" حيث توجد جميع سجلات الأطفال (تلميح أريد أن أعبر عن متغير حلقة [i] على الأطفال بحيث يحصل كل سجل على أنه نقطة مرجعية ، وبمجرد الانتهاء من أن يتبع الأطفال قطعة أخرى متداخلة تحت ذلك تسمى أيضًا "البيانات".

لذلك فإن كل جزء من البيانات أحضره سيحتاج إلى متغير. أحتاج إلى تحديد مستوى كائن JSON الذي أقوم بتحليله من هذه البيانات ، يمكنني القيام بذلك باستخدام متغير آخر ، دعنا نسميها "البيانات".
var data = jsonReturn.data.children [i] .data؛
رائع ، لذلك نحن ما زلنا في حلقة لإرجاع كل سجل نريد على حدة. الآن ، دعنا نحدد البيانات التي نتعقبها.
var datalink = ‘http://www.reddit.com/'+data.permalink؛
// datalink = احصل على رابط المنشور
var dataimg = data.thumbnail؛ / / احصل على عنوان الصورة المصغرة
var title = data.title؛ // الحصول على عنوان المنشور
var subreddit = data.subreddit؛ // الحصول على المجموعة subreddit
var author = data.author؛ // الحصول على مؤلف المنشور
var hoursince = parseInt (Date.now () - data.created)؛
 // الحصول على تاريخ الإنشاء
var Hoursago = Math.round (hourssince / 1000/60/60)؛
 / / قم ببعض الرياضيات غير الصحيحة في تاريخ الإنشاء الذي ستقوم بإصلاحه لاحقًا ،
/ / لأنه محرج في هذا المنشور. ؛)
var subtext = "مقدم" + hoursago + "قبل ساعات بواسطة" + مؤلف + "على " + subreddit + ""؛ / / بناء سلسلة النص الفرعي لتمرير إلى HTML
/ / بعد ذلك ، قم ببناء سلسلة لجميع المتغيرات المذكورة أعلاه لتسلسلها إلى سلسلة منشورات ضخمة من html جذابة للغاية.
var loadthis = " ".
أخيرًا ، استخدم JQuery لتصوير كل هذه السلسلة الضخمة ، إلى هذا div الرئيسي في html (هل تتذكر هذا الشيء؟) ... وإضافة JQuery snazzy تتلاشى في الرسوم المتحركة إليها ، لأنه يمكنك وأنت غاضب من القوة!
 $ (loadthis) .hide () appendTo ($ ( '# الرئيسية')) fadeIn (1000)؛.
 } // هذا مجموعة كبيرة من الإجراءات للحلقات ، دعنا نغلقها هنا.
} / / وهذا أيضًا ، الكثير من إجراءات onSuccess ، دعنا نغلق ذلك هنا.
إذا فشلت بيانات JSON ، أو تحدثت بدلاً من ذلك ... اتركت لنفسك رسالة فشل لطيفة ، ثم تناول بعض ملفات تعريف الارتباط ، لقد ربحتها!
وظيفة onError () {
 $ (main # main '). html (' لقد فشلت. ') ؛
}

D) أخيرًا: قمت بتصميم صفحة ويب أتش تي أم أل أساسية جديدة بشكل فظيع مع CSS فظيعة بشكل رهيب بحيث لا ينبغي إجبار أي شخص على النظر إليها ، ثم ابتعدت عني وشربت بعض ملفات تعريف الارتباط ، كانت لذيذة.