Lesson 10 / الدرس 10

GET and POST / GET وPOST

Two methods cover almost everything you will build. The choice between them decides where the data travels, whether the address can be shared, and whether a refresh is safe.

أسلوبان يغطيان كل ما ستبنيه تقريبًا. والاختيار بينهما يقرر أين تسافر البيانات، وهل يمكن مشاركة العنوان، وهل إعادة التحميل آمنة.

The method is the verb of the request, and the distinction behind it is simple: GET asks to see something, POST asks to change something. Everything else about the two follows from that one sentence.

الأسلوب فعل الطلب، والتمييز خلفه بسيط: GET يطلب أن يرى شيئًا، وPOST يطلب أن يغيّر شيئًا. وكل ما عدا ذلك بينهما ينبني على هذه الجملة.

<form method="get" action="/search">
    <label>Search <input name="q"></label>
    <button>Go</button>
</form>

Run it to see the two forms side by side. Then do the interesting part in a real tab: type something into the search box of any site you use and look at the address bar afterwards. Your words are in the address, as ?q=…. That is a GET — the whole request is the address, which is why a search result can be bookmarked and sent to a friend.

شغّله لترى النموذجين جنبًا إلى جنب. ثم افعل الجزء المثير في لسان حقيقي: اكتب شيئًا في مربع بحث أي موقع تستخدمه وانظر إلى شريط العنوان بعدها. فكلماتك في العنوان، بصورة ?q=…. وهذا GET — فالطلب كله هو العنوان، ولهذا يمكن حفظ نتيجة بحث في المفضلة وإرسالها إلى صديق.

Where the data rides

GET /search?q=dates HTTP/1.1
Host: example.com

----------------------------------------

POST /login HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 29

user=ahmed&password=secret123

The same two requests you have been reading about since lesson 7, now with the difference visible. The GET puts its data in the path. The POST puts its data after the blank line, in the body — the part of the message you met but had no use for yet.

الطلبان نفساهما اللذان تقرأ عنهما منذ الدرس 7، والفرق الآن ظاهر. فـGET يضع بياناته في المسار. وPOST يضعها بعد السطر الفارغ، في المتن — وهو جزء الرسالة الذي قابلته ولم تكن له فائدة عندك بعد.

	GET	POST
Data travels in	The address	The body
Visible in the address bar	Yes	No
Kept in browser history	Yes	No
Can be bookmarked or shared	Yes	No
Safe to repeat	Yes	No — it may act twice
Use it for	Searching, filtering, paging	Logging in, buying, deleting

The row that decides most arguments is the last but one. A GET can be repeated freely — that is what makes reloading harmless.

والسطر الذي يحسم معظم الخلافات هو ما قبل الأخير. فـGET يمكن تكراره بحرية — وهذا ما يجعل إعادة التحميل غير مؤذية.

ولا ترسل أبدًا كلمة مرور أو رقم بطاقة أو أي شيء خاص بـGET. فقد بيّن الدرس 3 أين ينتهي الاستعلام — شريط العنوان، وسجل التصفح، وسجل الخادم، وترويسة Referer المسلَّمة إلى الموقع التالي. وHTTPS لا تنفع هنا: فهي تحمي الرحلة، والقيمة مكتوبة عند طرفيها.

Why the browser warns you about resending

You have seen the dialogue: reload a page after paying and the browser asks whether you really want to resend. It is asking because the last request was a POST, and a POST is allowed to change something — repeating it might charge you twice. Reloading after a search never asks, because repeating a GET is by definition harmless.

وقد رأيت الرسالة: أعد تحميل صفحة بعد الدفع فيسألك المتصفح هل تريد إعادة الإرسال حقًا. وهو يسأل لأن الطلب الأخير كان POST، وPOST مسموح له أن يغيّر شيئًا — فقد يخصم منك تكراره مرتين. أما إعادة التحميل بعد بحث فلا تسأل أبدًا، لأن تكرار GET غير مؤذٍ بالتعريف.

والحل الذي تستخدمه المواقع يستحق أن تعرفه باسمه: بعد POST ناجح، أجب بـ303 يشير إلى صفحة عادية. فيتبعه المتصفح بـGET، ويصير العنوان في الشريط آمنًا لإعادة التحميل ولا يبقى شيء يُعاد إرساله. ولهذا يكون لصفحة التأكيد عنوانها الخاص عادةً.

Two more methods appear when you build data services: PUT replaces something and DELETE removes it. They say more precisely what POST could also do, and lesson 20 uses them. Browsers only ever send GET and POST from a form.

وثمة أسلوبان آخران يظهران حين تبني خدمات بيانات: PUT يستبدل شيئًا، وDELETE يحذفه. وهما يقولان بدقة أكبر ما يستطيع POST فعله أيضًا، ويستخدمهما الدرس 20. أما المتصفحات فلا ترسل من نموذج إلا GET وPOST.

Try it live / جرّب بنفسك

<h1>Two methods</h1>

<h2>Search — GET</h2>
<form method="get" action="/search">
    <label>Find <input name="q"></label>
    <button>Search</button>
</form>
<p>After submitting, the address showed: …</p>

<h2>Sign up — POST</h2>
<form method="post" action="/signup">
    <label>Email <input name="email" type="email"></label>
    <button>Join</button>
</form>
<p>After submitting, the address showed: …</p>

<h2>Which one can I reload?</h2>
<p>…</p>

Preview / المعاينة

Check yourself / اختبر نفسك

1. Which form should a login use, and why?

2. Why does reloading after a search never warn you, but reloading after a payment does?

3. Where does a POST put the values from a form?

Your task / مهمتك

Build one page with two working forms — a search that uses GET and a sign-up that uses POST. Save it and open it in a real browser tab, not the preview here, because you need an address bar to watch. Submit each form and write down what the address became. Then add a short paragraph saying which one you could safely reload, and why.

ابنِ صفحة واحدة فيها نموذجان يعملان — بحث يستخدم GET، وتسجيل يستخدم POST. واحفظها وافتحها في لسان متصفح حقيقي، لا في المعاينة هنا، لأنك تحتاج شريط عنوان تراقبه. وأرسل كل نموذج واكتب ما صار إليه العنوان. ثم أضف فقرة قصيرة تقول أيهما تستطيع إعادة تحميله بأمان، ولماذا.

Both forms work and each names its method النموذجان يعملان وكل منهما يسمّي أسلوبه
A note on what the address bar showed after each ملاحظة عمّا أظهره شريط العنوان بعد كل واحد
A paragraph on which is safe to reload, and why فقرة عن أيهما آمن لإعادة التحميل، ولماذا