آموزش شئ XMLHttpRequest در آجاکس جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش شئ XMLHttpRequest در آجاکس جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
شئ XMLHttpRequest در آجاکس جاوااسکریپت
با استفاده از شئ XMLHttpRequest در آجاکس میتونیم یک درخواست به سمت سرور ایجاد و ارسال کنیم، یعنی بطور کلی بخوام بگم ما برای ارسال یک درخواست به سرور باید از شئ XMLHttpRequest استفاده نماییم.
ساختار کلی نحوه ارسال یک درخواست بسمت سرور به شرح زیر می باشد :
- ایجاد شئ XMLHttpRequest
- ایجاد یک تابع برای فرخوانی نتیجه درخواست
- باز کردن درخواست
- ارسال درخواست بسمت سرور
Free-Learn
نحوه ایجاد شئ XMLHttpRequest
نحوه نوشتاری یا نحوه ایجاد کردن یک شئ XMLHttpRequest برای ایجاد درخواست، بصورت زیر می باشد :
|
1 |
Your_Variable = new XMLHttpRequest(); |
- Your_Variable : یک متغیر دلخواه
Free-Learn
نحوه تعریف تابع Callback
به اون چیزی که از طرف سرور آماده و برای ما ارسال میشه میگیم Callback ، پس ما با استفاده از تابع onload میتونیم نتیجه بازگشتی از سمت سرور رو کنترل کنیم.
|
1 2 3 |
MyRequest.onload = function() { // کار با داده های دریافت شده } |
Free-Learn
باز کردن و ارسال درخواست
ما برای ارسال درخواست به سمت سرور باید از متدهای ()open و ()send استفاده نماییم.
|
1 2 |
MyRequest.open("GET", "test.php"); MyRequest.send(); |
Free-Learn
مثال از شئ XMLHttpRequest
در ادامه میتوانید یک مثال کامل از این شئ را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : دریافت محتویات فایل myfile-1.html و نمایش آن در صفحه
|
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_2.php که بروی سرور قرار داره.
|
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
نکات و توضیحات
- برای بحث امنیت حواستون باشه که هر ۲ فایل ( یعنی اون فایلی که درخواست رو ارسال میکنه و اون فایلی که درخواست رو دریافت و پردازش روش انجام میشه ) باید حتما هر۲تاش روی یک سرور قرار داشته باشند، وگرنه عمل نمیکنه.
