این آموزش در تاریخ ۱۴۰۰/۰۷/۰۷ آپدیت شده است.
مثال های کاربردی آجاکس در جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با مثال های کاربردی آجاکس در جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
مثال های کاربردی آجاکس در جاوااسکریپت
دوستان عزیز خب همونطور که خودتونم میدونید و در جلسات قبلی باید متوجه شده باشید ، آجاکس در جاوااسکریپت چیز خیلی پیچیده و گسترده ای نیست، کلا چنتا متد و ویژگی داره که اونارم باهاش آشنا شدیم.
حال در این جلسه میخوام چندین مثال کاربردی با آجاکس باهمدیگه کار کنیم و دیگه بطور کامل پرونده آجاکس در جاوااسکریپت رو ببندیم.
Free-Learn
دریافت محتوا
مثال شماره ۱ : دریافت محتوای یک فایل text ( فایل متنی )
|
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/my-text-file.txt"); MyRequest.send(); } </script> |
مثال شماره ۲ : دریافت محتوای یک فایل 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> |
Free-Learn
ارسال داده های فرم
مثال شماره ۱ : ارسال داده های فرم ( نام و ایمیل ) به سرور با استفاده از متد GET
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script> function MyLoad(){ const xhttp = new XMLHttpRequest(); var userName = document.getElementById("UserName").value; var userEmail = document.getElementById("UserEmail").value; var result = document.getElementById("Result"); if( userName == "" && userEmail == "" ){ result.innerHTML = "دیگه اومدی و نسازی، بی زحمت یه چیزی وارد کن"; }else if( userName == "" || userEmail == "" ){ result.innerHTML = "لطفا موارد ضروری را تکمیل نمایید"; }else{ xhttp.onload = function(){ result.innerHTML = this.responseText; } xhttp.open("GET", "files/get_4.php?UserName="+userName+"&UserEmail="+userEmail+""); xhttp.send(); } } </script> |
مثال شماره ۲ : ارسال داده های فرم ( نام و ایمیل ) به سرور با استفاده از متد POST
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script> function MyLoad(){ const xhttp = new XMLHttpRequest(); var userName = document.getElementById("UserName").value; var userEmail = document.getElementById("UserEmail").value; var result = document.getElementById("Result"); if( userName == "" && userEmail == "" ){ result.innerHTML = "دیگه اومدی و نسازی، بی زحمت یه چیزی وارد کن"; }else if( userName == "" || userEmail == "" ){ result.innerHTML = "لطفا موارد ضروری را تکمیل نمایید"; }else{ xhttp.onload = function(){ result.innerHTML = this.responseText; } xhttp.open("POST", "files/get_5.php"); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send("UserName="+userName+"&UserEmail="+userEmail+""); } } </script> |
Free-Learn
نمایش تصویر قبل از بارگذاری محتوا
میخوایم در مثال زیر کاری کنیم که قبل از بارگذاری محتوا یک تصویر ( که مثلا بگه لطفا صبر کنید و از این حرفا ) نمایش بدیم.
مثال شماره ۱ : نمایش یک تصویر در حال بارگذاری …
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> function Load(){ const MyRequest = new XMLHttpRequest(); var Result = document.getElementById("Result"); MyRequest.onreadystatechange = function(){ if ( this.readyState == 4 && this.status == 200 ) { Result.innerHTML = this.responseText; }else{ Result.innerHTML = "<div><img src='img/loading.gif' width='50'></div>"; } }; MyRequest.open("GET", "files/myfile-1.html"); MyRequest.send(); } </script> |
Free-Learn
نمایش باکس های پیغام باحالتر
بصورت پیش فرض خب میدونید جاوااسکریپت برای نمایش باکس های پیغام از Alert Box استفاده میکنه، آموزش کار با باکس های پیغام در جاوااسکریپت
حال یه کتابخونه هستش به اسم Sweet Alert که با استفاده از اون میتونیم باکس های پیغاممون رو باحالتر و باکلاس تر نشون بدیم، کلا برای نمایش پیغام های هشدار بصورت شیک تر ازش استفاده میکنن.
مشاهده صفحه رسمی کتابخانه Sweet Alert [ کلیک کنید ].
مثال شماره ۱ : استفاده از کتابخونه Sweet Alert
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<script> function MyLoad(){ const xhttp = new XMLHttpRequest(); var userName = document.getElementById("UserName").value; var userEmail = document.getElementById("UserEmail").value; var result = document.getElementById("Result"); if( userName == "" && userEmail == "" ){ swal({ title: "هشدار", text: "دیگه اومدی و نسازی، بی زحمت یه چیزی وارد کن", icon: "warning", button: "باشه ببخش", }); }else if( userName != "" && userEmail == "" ){ swal({ title: "هشدار", text: "میشه لطفا ایمیل هم وارد کنی", icon: "warning", button: "باشه حتما", }); }else{ swal({ title: "موفقیت آمیز", text: "اطلاعات با موفقیت ارسال و دریافت شد", icon: "success", button: "ممنون", }); xhttp.onload = function(){ result.innerHTML = this.responseText; } xhttp.open("GET", "files/get_4.php?UserName="+userName+"&UserEmail="+userEmail+""); xhttp.send(); } } </script> |
