بروتوكول HTTP: "لغة التواصل" بين الواجهة الأمامية والخلفية
🎯 السؤال الأساسي
كيف يعمل HTTP؟ هذا مثل السؤال: كيف يتحاور شخصان؟ يحتاجان إلى اتفاق على اللغة وقواعد اللغة وقواعد الحوار. HTTP هو "بروتوكول الحوار" بين الواجهة الأمامية والخلفية.
0. جوهر HTTP
HTTP (HyperText Transfer Protocol، بروتوكول نقل النص الفائق) هو البروتوكول الأساسي للتواصل بين الواجهة الأمامية والخلفية.
0.1 التشبيه بالحوار
| عنصر الحوار | مقابل HTTP | الوصف |
|---|---|---|
| اللغة | بروتوكول HTTP | لغة يفهمها الطرفان |
| القواعد | تنسيق الطلب/الاستجابة | كيف "نتحدث" |
| التدفق | نمط طلب-استجابة | سؤال وجواب |
| النهاية | إنهاء المكالمة | إغلاق اتصال TCP |
1. تاريخ تطور HTTP
منذ ولادته عام 1991، مر HTTP بترقيات رئيسية متعددة.
HTTP Protocol Demo
HTTP request
GET/api/users/123HTTP/1.1
Host:api.example.com
User-Agent:Mozilla/5.0
Accept:application/json
Authorization:Bearer xxx
TCP connection
HTTP response
HTTP/1.1200OK
Content-Type:application/json
Content-Length:156
Cache-Control:max-age=3600
{
"id": 123,
"name": "Alice",
"email": "alice@example.com"
}
1.1 مقارنة الإصدارات
| الإصدار | السنة | التحسين الأساسي | السمات النموذجية |
|---|---|---|---|
| HTTP/0.9 | 1991 | يدعم GET فقط | نص خالص، طلب فقط، بدون رؤوس استجابة |
| HTTP/1.0 | 1996 | إضافة POST/HEAD | اتصال TCP واحد لكل طلب |
| HTTP/1.1 | 1997 | اتصال دائم | Keep-Alive، اتصال واحد لعدة طلبات |
| HTTP/2 | 2015 | تعدد الإرسال | إطارات ثنائية، ضغط الرؤوس |
| HTTP/3 | 2022 | مبني على QUIC | نقل UDP، حل حظر رأس الخط |
💡 لماذا نحتاج HTTP/2؟
HTTP/1.1 رغم دعمه للاتصال الدائم، إلا أن الطلبات يجب أن ترسل تسلسليًا (يجب أن تعود استجابة الطلب السابق قبل إرسال الطلب التالي). HTTP/2 حل هذه المشكلة من خلال تعدد الإرسال، مما يسمح بإرسال عدة طلبات في نفس الوقت.
2. هيكل طلب HTTP
2.1 سطر الطلب
http
GET /api/users/123 HTTP/1.1يحتوي على ثلاثة أجزاء:
- الطريقة: GET، POST، PUT، DELETE إلخ
- URL: مسار المورد المطلوب
- الإصدار: HTTP/1.1 أو HTTP/2
2.2 رؤوس الطلب
http
Host: api.example.com
User-Agent: Mozilla/5.0
Accept: application/json
Authorization: Bearer xxx
Content-Type: application/json
Content-Length: 45رؤوس الطلب الشائعة:
| الرأس | الوصف | مثال |
|---|---|---|
| Host | نطاق الخادم | api.example.com |
| User-Agent | معلومات العميل | Mozilla/5.0 |
| Accept | نوع الاستجابة المقبول | application/json |
| Authorization | معلومات المصادقة | Bearer token |
| Content-Type | نوع جسم الطلب | application/json |
2.3 جسم الطلب
json
{
"name": "张三",
"email": "zhangsan@example.com"
}فقط الطرق POST، PUT، PATCH لها جسم طلب.
3. هيكل استجابة HTTP
3.1 سطر الحالة
http
HTTP/1.1 200 OKيحتوي على ثلاثة أجزاء:
- الإصدار: HTTP/1.1
- رمز الحالة: 200، 404، 500 إلخ
- نص الحالة: OK، Not Found إلخ
3.2 رؤوس الاستجابة
http
Content-Type: application/json
Content-Length: 156
Cache-Control: max-age=3600
Set-Cookie: session=xxx; HttpOnlyرؤوس الاستجابة الشائعة:
| الرأس | الوصف | مثال |
|---|---|---|
| Content-Type | نوع جسم الاستجابة | application/json |
| Content-Length | حجم جسم الاستجابة | 156 |
| Cache-Control | استراتيجية التخزين المؤقت | max-age=3600 |
| Set-Cookie | تعيين Cookie | session=xxx |
3.3 جسم الاستجابة
json
{
"code": 0,
"data": {
"id": 123,
"name": "张三"
}
}4. طرق HTTP بالتفصيل
| الطريقة | الاستخدام | جسم الطلب | اللامتغيرية | الأمان |
|---|---|---|---|---|
| GET | الحصول على مورد | لا يوجد | نعم | نعم |
| POST | إنشاء مورد | يوجد | لا | لا |
| PUT | تحديث كامل | يوجد | نعم | لا |
| PATCH | تحديث جزئي | يوجد | لا | لا |
| DELETE | حذف مورد | لا يوجد | نعم | لا |
| HEAD | الحصول على الرؤوس | لا يوجد | نعم | نعم |
| OPTIONS | استعلام الطرق المدعومة | لا يوجد | نعم | نعم |
4.1 GET مقابل POST
| الخاصية | GET | POST |
|---|---|---|
| موقع المعاملات | معاملات استعلام URL | جسم الطلب |
| التخزين المؤقت | قابل للتخزين المؤقت | غير قابل للتخزين المؤقت افتراضيًا |
| الإشارة المرجعية | يمكن إضافتها كإشارة مرجعية | لا يمكن |
| سجل التاريخ | يحفظ في سجل المتصفح | لا يحفظ |
| طول البيانات | محدود (طول URL) | غير محدود |
| الأمان | المعاملات مرئية في URL | المعاملات في جسم الطلب |
💡 متى نستخدم GET/POST؟
- GET: استعلام، الحصول على البيانات
- POST: إنشاء، تقديم البيانات
- PUT: تحديث كامل (استبدال المورد بالكامل)
- PATCH: تحديث جزئي (تعديل حقول محددة فقط)
- DELETE: حذف مورد
5. رموز حالة HTTP
5.1 تصنيف رموز الحالة
| التصنيف | الوصف | رموز الحالة النموذجية |
|---|---|---|
| 2xx | نجاح | 200 OK، 201 Created، 204 No Content |
| 3xx | إعادة توجيه | 301 دائم، 302 مؤقت، 304 غير معدل |
| 4xx | خطأ من العميل | 400 معاملات خاطئة، 401 غير مصرح، 404 غير موجود |
| 5xx | خطأ من الخادم | 500 خطأ داخلي، 503 غير متاح |
5.2 رموز الحالة الشائعة
| رمز الحالة | الوصف | سيناريو الاستخدام |
|---|---|---|
| 200 OK | الطلب ناجح | GET، PUT طلب ناجح |
| 201 Created | تم الإنشاء بنجاح | POST إنشاء مورد بنجاح |
| 204 No Content | لا يوجد محتوى | DELETE حذف بنجاح |
| 301 Moved Permanently | إعادة توجيه دائم | تغيير URL دائم |
| 302 Found | إعادة توجيه مؤقت | تغيير URL مؤقت |
| 304 Not Modified | غير معدل | التخزين المؤقت صالح |
| 400 Bad Request | معاملات خاطئة | تنسيق معاملات الطلب خاطئ |
| 401 Unauthorized | غير مصرح | يحتاج تسجيل دخول |
| 403 Forbidden | لا صلاحية | مسجل دخول لكن صلاحية غير كافية |
| 404 Not Found | غير موجود | المورد غير موجود |
| 500 Internal Server Error | خطأ داخلي | استثناء في الخادم |
| 503 Service Unavailable | غير متاح | الخادم في صيانة أو محمّل زيادة |
6. HTTPS: HTTP الآمن
6.1 HTTP مقابل HTTPS
| الخاصية | HTTP | HTTPS |
|---|---|---|
| البروتوكول | TCP | TCP + SSL/TLS |
| المنفذ | 80 | 443 |
| البيانات | نقل نص واضح | نقل مشفر |
| الشهادة | لا حاجة | تحتاج شهادة SSL |
| الأداء | أسرع قليلاً | أبطأ قليلاً (تكلفة المصافحة) |
| SEO | لا تأثير | محركات البحث تفضل الفهرسة |
6.2 سير عمل HTTPS
- Client Hello: العميل يرسل مجموعات التشفير المدعومة
- Server Hello: الخادم يعيد الشهادة ومجموعة التشفير المختارة
- التحقق من الشهادة: العميل يتحقق من صلاحية شهادة الخادم
- تبادل المفاتيح: استخدام التشفير غير المتماثل لتبادل مفتاح الجلسة
- الاتصال المشفر: استخدام مفتاح الجلسة للاتصال المشفر المتماثل
💡 مزايا HTTPS
- منع التنصت: البيانات مشفرة، لا يمكن للطرف الثالث قراءتها
- منع التلاعب: التحقق من سلامة البيانات
- منع انتحال الهوية: شهادة SSL تتحقق من هوية الخادم
7. آلية التخزين المؤقت في HTTP
7.1 رؤوس التخزين المؤقت
| الرأس | الوصف | مثال |
|---|---|---|
| Cache-Control | استراتيجية التخزين المؤقت | max-age=3600 |
| ETag | رقم إصدار المورد | "33a64df551425fcc" |
| Last-Modified | وقت آخر تعديل | Wed, 21 Oct 2015 07:28:00 GMT |
7.2 استراتيجيات التخزين المؤقت
التخزين المؤقت القوي:
http
Cache-Control: max-age=3600خلال 3600 ثانية، يستخدم المتصفح التخزين المؤقت مباشرة، دون إرسال طلب.
التخزين المؤقت التفاوضي:
http
ETag: "33a64df551425fcc"المتصفح يرسل If-None-Match، الخادم يعيد 304 (غير معدل) أو 200 (معدل).
8. الأسئلة الشائعة
8.1 الفرق الجوهري بين GET و POST
الاعتقاد الخاطئ: الفرق بين GET و POST هو فقط موقع المعاملات.
الحقيقة:
- GET لامتغير، الطلبات المتعددة تعطي نفس النتيجة
- POST غير لامتغير، الطلبات المتعددة قد تنشئ موارد متعددة
- GET قابل للتخزين المؤقت، POST غير قابل للتخزين المؤقت افتراضيًا
- GET يمكن حفظه كإشارة مرجعية، POST لا يمكن
8.2 حظر رأس الخط في HTTP/1.1
المشكلة: HTTP/1.1 رغم دعمه للاتصال الدائم، إلا أن الطلبات يجب أن ترسل تسلسليًا. إذا كانت استجابة الطلب السابق بطيئة، تنتظر الطلبات اللاحقة جميعها.
الحلول:
- HTTP/2 تعدد الإرسال
- تجزئة النطاق (نطاقات متعددة لإنشاء اتصالات متعددة)
- تجمع الاتصالات (تحديد عدد التزامن)
8.3 مزايا HTTP/2
| الخاصية | HTTP/1.1 | HTTP/2 |
|---|---|---|
| تنسيق النقل | نصي | إطارات ثنائية |
| تعدد الإرسال | غير مدعوم | مدعوم |
| ضغط الرؤوس | لا يوجد | خوارزمية HPACK |
| دفع الخادم | غير مدعوم | مدعوم |
جدول المصطلحات
| المصطلح | الإنجليزية | الشرح |
|---|---|---|
| HTTP | HyperText Transfer Protocol | بروتوكول نقل النص الفائق |
| HTTPS | HTTP Secure | HTTP + SSL/TLS |
| TCP | Transmission Control Protocol | بروتوكول التحكم في النقل |
| SSL/TLS | Secure Sockets Layer | طبقة المقابس الآمنة |
| اللامتغيرية | Idempotent | الطلبات المتعددة تعطي نفس النتيجة |
| الاتصال الدائم | Keep-Alive | اتصال TCP واحد لإرسال عدة طلبات |
| تعدد الإرسال | Multiplexing | إرسال عدة طلبات في نفس الوقت |
| حظر رأس الخط | Head-of-Line Blocking | الطلب الأمامي يحظر الطلبات الخلفية |