محرر ويب أونلاين

<!DOCTYPE html>
<html>
<body>
	<script>
		// هنا قمنا بتعريف دالة تقوم بإرسال طلب إلى السيرفر بشكل متزامن و من ثم تعرض نتيجته
		async function fetchData() {
            // وضعنا فيه مسار الموقع الذي سنقوم بإرسال الطلب إليه url المتغير
            let url = 'https://jsonplaceholder.typicode.com/posts';

try {
                // url هنا قمنا بإرسال طلب إلى الرابط الموجود في
                let response = await fetch(url);

// هنا قمنا بفحص الرد الذي أتى من السيرفر لمعرفة ما إن كان قد تم العثور على المقالات بنجاح أم لا
				if (!response.ok) {
					// إذا كان رد السيرفر يفيد بأن قد فشل في جلبهم فسيتم
					// عرض النص التالي للإشارة إلى وقوع خطأ عند التنفيذ
					throw new Error('Network response was not ok');
				}

// إلى مصفوفات كائنات جافاسكربت JSON إذا كان الرد مقبولاً فسيتم تحويله من صيغة
                let data = await response.json();

// بعد أن تم تحويل الرد إلى مصفوفة كائنات، سيتم المرور عليهم جميعاً و عرض بعض قيمهم
                for(x of data) {
                    document.write(`
                        <h3>${x.title}</h3>
                        <p>${x.body}</p>
                        <hr>`);
                }
            }
            catch(error) {
                // إذا حصل أي خطأ أثناء جلب البيانات سيتم عرضه
                alert(error);
            }
		}

// حتى تتنفذ fetchData() هنا قمنا باستدعاء الدالة
		fetchData();
	</script>
</body>
</html>