HTTP

ما هو HTTP؟

HTTP اختصار لـ:

HyperText Transfer Protocol
بروتوكول نقل النص الفائق

ببساطة:

هو القواعد/اللغة اللي يتفاهم بها المتصفح أو الفرونت إند (العميل) مع السيرفر عبر الإنترنت.

كل مرة:

• تفتح موقع
• أو React ترسل axios.get("http://localhost:8000/posts")
  أنت تستخدم HTTP.

1️⃣ من يتكلم مع من؟

في HTTP عندنا طرفين:

• Client (العميل): مثل المتصفح، تطبيق React، تطبيق موبايل…
• Server (السيرفر): مثل json-server، Laravel، Node، Django…

العميل يرسل HTTP Request
السيرفر يرد بـ HTTP Response

2️⃣ شكل طلب HTTP (Request)

الطلب (Request) فيه 3 أشياء رئيسية:

1. Request Line → السطر الأول
2. Headers → معلومات إضافية
3. Body → بيانات (اختياري، غالباً مع POST/PUT/PATCH)

مثال (مبسّط) لطلب GET:

GET /posts HTTP/1.1
Host: localhost:8000
User-Agent: Mozilla/5.0
Accept: application/json

GET /posts HTTP/1.1
Host: localhost:8000
User-Agent: Mozilla/5.0
Accept: application/json

هنا:

• GET → الميثود (نوع الطلب: جلب بيانات)
• /posts → المسار (المورد اللي نبغاه)
• HTTP/1.1 → نسخة البروتوكول
• Host و User-Agent و Accept → رؤوس (Headers)

مثال لطلب POST (مع Body):

POST /posts HTTP/1.1
Host: localhost:8000
Content-Type: application/json

{
  "title": "Hello",
  "body": "World"
}

POST /posts HTTP/1.1
Host: localhost:8000
Content-Type: application/json

{
  "title": "Hello",
  "body": "World"
}

هذا تقريبًا اللي Axios يرسله لما تعمل:

axios.post("http://localhost:8000/posts", {
  title: "Hello",
  body: "World"
});

axios.post("http://localhost:8000/posts", {
  title: "Hello",
  body: "World"
});

3️⃣ شكل الرد (Response)

الرد (Response) فيه برضه 3 أشياء:

1. Status Line → أول سطر (فيه كود الحالة)
2. Headers → معلومات إضافية
3. Body → البيانات اللي رجعت

مثال:

HTTP/1.1 200 OK
Content-Type: application/json

[
  { "id": 1, "title": "Post 1", "body": "Body 1" },
  { "id": 2, "title": "Post 2", "body": "Body 2" }
]

HTTP/1.1 200 OK
Content-Type: application/json

[
  { "id": 1, "title": "Post 1", "body": "Body 1" },
  { "id": 2, "title": "Post 2", "body": "Body 2" }
]

أنت في Axios تشوف هذا على شكل:

const { data, status } = await axios.get("http://localhost:8000/posts");

console.log(status); // 200
console.log(data);   // المصفوفة

const { data, status } = await axios.get("http://localhost:8000/posts");

console.log(status); // 200
console.log(data);   // المصفوفة

4️⃣ أكواد الحالة (Status Codes) في HTTP

هذه أرقام ترجع من السيرفر تقول لك وش صار:

• 200 → OK (كل شيء تمام)
• 201 → Created (تم إنشاء مورد جديد – مثلاً بعد POST ناجح)
• 400 → Bad Request (الطلب نفسه فيه مشكلة)
• 401 → Unauthorized (لازم تسجّل دخول/توكن)
• 403 → Forbidden (ممنوع)
• 404 → Not Found (المسار/المورد غير موجود، زي /posts/1 لو السيرفر ما يعرفه)
• 500 → Server Error (مشكلة في السيرفر)

Axios يسهّل عليك:

• لو الكود 200–299 يعتبره نجاح
• لو خارج هذا النطاق → يرمي error وتروح للـ catch.

5️⃣ أشهر الـ Methods في HTTP

هذه اللي أنت تستعملها مع Axios:

• GET → جلب بيانات (ما يغيّر شيء في السيرفر)
• POST → إنشاء جديد (إرسال بيانات)
• PUT → تحديث كامل لمورد
• PATCH → تحديث جزئي
• DELETE → حذف مورد

كلها جزء من بروتوكول HTTP نفسه، وREST API تستغلها بطريقة منظّمة.

6️⃣ HTTP vs HTTPS

• HTTP → عادي، البيانات تمشي بدون تشفير.
• HTTPS = HTTP + TLS/SSL → البيانات بينك وبين السيرفر مشفّرة.

الفرق اللي تشوفه في المتصفح:

• http://example.com → غير مشفّر
• https://example.com → مشفّر (قفل 🔒)

في الكود:

axios.get("http://localhost:8000/posts");   // عادي، على المحلية
axios.get("https://api.example.com/posts"); // غالباً في السيرفرات الحقيقية

axios.get("http://localhost:8000/posts");   // عادي، على المحلية
axios.get("https://api.example.com/posts"); // غالباً في السيرفرات الحقيقية

7️⃣ علاقتها مع REST و API

• HTTP = البروتوكول (اللغة والقواعد بين العميل والسيرفر).
• API = واجهة للتعامل مع نظام/برنامج (مفهوم عام).
• REST API = نوع من Web APIs مبني فوق HTTP ويستخدمه بطريقة معيّنة (REST style).

يعني:

• Axios يرسل HTTP Requests إلى REST API مبني على HTTP.
• json-server يعطيك REST API جاهز فوق HTTP على localhost:8000.

8️⃣ وين يدخل HTTP في شغلك حاليًا؟

في مشروعك:

• لما تكتب: axios.get("http://localhost:8000/posts") ففعليًا يصير:
  • HTTP Request من React → إلى json-server.
  • json-server يردّ بـ HTTP Response فيه:
    • status code (200, 201, 404…)
    • headers
    • body (JSON) ← اللي تظهر في res.data.
• لما يطلع لك 404 في /posts/1:
  • هذا HTTP Status Code يقول: “المورد اللي طلبته غير موجود”.