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

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

try {
                // url هنا قمنا بإرسال طلب إلى الرابط الموجود في
                // POST مع تحديد طريقة إرسال الطلب على أنها
                // JSON و أن البيانات المرسلة في الطلب موضوعة بأسلوب
                let response = await fetch(url, {
                    method: 'POST',
                    body: JSON.stringify({
                        title: 'This is the title',
                        body: 'This is is the content',
                        userId: 1
                    }),
                    headers: {
                        'Content-type': 'application/json; charset=UTF-8'
                    }
                });

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

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

// بعد أن تم تحويل رد السيرفر إلى كائن، سيتم عرض القيم الموجودة فيه
                document.write(`
                    <p>The newely created post data:</p>
                    <ul>
                        <li>userId: ${data.userId}</li>
                        <li>id: ${data.id}</li>
                        <li>title: ${data.title}</li>
                        <li>body: ${data.body}</li>
                    </ul>`);
            }
            catch(error) {
                // إذا حصل أي خطأ أثناء جلب البيانات سيتم عرضه
                alert(error);
            }
		}

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