آموزش متدهای GET و POST در آجاکس جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متدهای GET و POST در آجاکس جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متدهای GET و POST در آجاکس جاوااسکریپت
اگه آموزش زبان HTML رو دنبال کرده باشید میدونید که تگ Form یک صفت داره به اسم method و این صفت مشخص میکنه که نحوه ارسال داده بسمت سرور چگونه باشه!؟
متد GET خیلی سریعتر از POST هست و معمولا از GET بیشتر استفاده میکنن ، ولی خب همیشه برای بحث امنیت سعی کنید از POST استفاده کنید.
متد GET در ارسال داده ها دارای محدودیت هستش، یعنی یه اندازه محدودی داره ( تقریبا تا ۳۰۰۰ کاراکتر ) و از اون اندازه بیشتر نمیشه داده از طریق GET ارسال کرد.
ولی خب متد POST محدودیتی نداره و علاوه بر این، امنیت خیلی بیشتری نسبت به GET داره، پس برای ارسال داده های حساس و مهم بسمت سرور حتما از POST استفاده کنید.
Free-Learn
استفاده از متد GET
مثال شماره ۱ : استفاده عادی و ساده از متد GET
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> function Load(){ const MyRequest = new XMLHttpRequest(); MyRequest.onload = function(){ document.getElementById("Result").innerHTML = this.responseText; } MyRequest.open("GET", "files/myfile-1.html"); MyRequest.send(); } </script> |
مثال شماره ۲ : ارسال داده های فرم با استفاده از متد GET
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> function MyLoad(){ const xhttp = new XMLHttpRequest(); var MyInput = document.getElementById("UserName").value; var result = document.getElementById("Result"); if(MyInput == ""){ result.innerHTML = "دیگه اومدی و نسازی، بی زحمت یه چیزی وارد کن"; }else{ xhttp.onload = function(){ result.innerHTML = this.responseText; } xhttp.open("GET", "files/get_2.php?UserName="+MyInput+""); xhttp.send(); } } </script> |
Free-Learn
استفاده از متد POST
مثال شماره ۱ : استفاده عادی و ساده از متد POST
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> function Load(){ const MyRequest = new XMLHttpRequest(); MyRequest.onload = function(){ document.getElementById("Result").innerHTML = this.responseText; } MyRequest.open("POST", "files/myfile-1.html"); MyRequest.send(); } </script> |
مثال شماره ۲ : ارسال داده های فرم با استفاده از متد POST
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> function MyLoad(){ const xhttp = new XMLHttpRequest(); var MyInput = document.getElementById("UserName").value; var result = document.getElementById("Result"); if(MyInput == ""){ result.innerHTML = "دیگه اومدی و نسازی، بی زحمت یه چیزی وارد کن"; }else{ xhttp.onload = function(){ result.innerHTML = this.responseText; } xhttp.open("POST", "files/get_3.php"); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send("UserName="+MyInput+""); } } </script> |
Free-Learn
نکات و توضیحات
- برای ارسال داده های فرم با استفاده از متد POST ( همانند مثال شماره ۲ ) باید حتما از setRequestHeader استفاده شه در غیراینصورت داده ها ارسال نخواهند شد.
