آموزش ajax
AJAX چیست؟
AJAX مخفف عبارت Asynchronous JavaScript And XML است که به معنای جاوا اسکریپت و XML ناهمگام است.
AJAX یک زبان برنامه نویسی نیست.
AJAX فقط از ترکیب موارد زیر استفاده می کند:
- شیء های ساخته شده توسط مرورگر برای در خواست داده از سرور توسط XMLHttpRequest
- JAVASCRIPT و HTML فقط برای نمایش یا استفاده از داده ها
AJAX برای ارسال داده ها از HTML,XML, JSON یا متن استفاده می کند.
شما با استفاده از AJAX می توانید داده خود را بین سرور و مرورگر ارسال کنید بدون این که صفحه احتیاج به بارگذاری مجدد داشته باشد.
کاربرد دیگر AJAX بروزرسانی قسمت هایی از یک صفحه وب است بدون این که احتیاج به بارگذاری مجدد صفحه باشد.
AJAX ابزاری بسیار مفید در طراحی سایت است که برنامه نویسان مواقعی که می خواهند تغییری را بدون بارگذاری در صفحه ایجاد کنند از آن استفاده می نمایند.
AJAX چگونه کار می کند؟
AJAX در هفت مرحله در خواست را ارسال و پاسخ مناسب را دریافت می کند.
این هفت مرحله به صورت ذیل می باشد:
- رویدادی در یک صفحه وب رخ می دهد (صفحه بارگذاری می شود و یا روی یک دکمه کلیک می شود.)
- یک شیء XMLHttpRequest توسط JavaScript ایجاد می شود.
- شیء XMLHttpRequest در خواستی را به سمت وب سرور ارسال می کند.
- سرور در خواست دریافتی را پردازش می کند.
- سرور پاسخی را به سمت صفحه وب ارسال می کند.
- پاسخ دریافتی از سرور توسط جاوا اسکریپت خوانده می شود.
- عملکرد مناسب (مثل به روزرسانی قسمتی از صفحه) توسط جاوا اسکریپت انجام می شود.
نمونه کد AJAX در جاوا اسکریپت
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>AJAX در jQuery
jQuery استفاده از AJAX را بسیار راحت کرده است و برای استفاده از آن احتیاج به کدنویسی های پیچیده در جاوا اسکریپت نداریم.
بدون جی کوئری برنامه نویسی AJAX کمی مشکل است.
دلیل اصلی آن این است که هر مرورگر به نحو متفاوتی در خواست های AJAX را اجرا می کند و همین مورد باعث کد نویسی بیشتر می شود.
ما با استفاده از jQuery به راحتی می توانیم با یک خط کد از قابیلت های AJAX به راحتی استفاده نماییم.
استفاده از AJAX در عمل
آموزش ajax در php: با استفاده از jQuery و PHP یک پروژه کوچک در مورد نحوه استفاده از AJAX را به طور عملی با هم انجام می دهیم و در آخر فایل کامل پروژه را می توانید در قسمت انتهایی مقاله دانلود بفرمایید.
ایجاد فایل index.php
قرار دادن کدهای HTML و ایجاد فرم
<form id="ajaxFormPost">
<div class="row">
<div class="six columns">
<label for="EmailInput">پست الکترونیکی</label>
<input class="u-full-width" type="email" placeholder="test@mailbox.com" id="EmailInput">
</div>
<div class="six columns">
<label for="NameInput">نام و نام خانوادگی</label>
<input class="u-full-width" type="text" placeholder="وب پناه" id="NameInput">
</div>
</div>
<label for="Message">دیدگاه شما</label>
<textarea class="u-full-width" style="height: 180px;" placeholder="دیدگاه خود را یادداشت ..." id="Message" rows="6"></textarea>
<button class="button-primary" type="button">ارسال</button>
</form>
<div class="column" id="successAjaxPost"></div>ایجاد فایل script.js
قرار دادن کدهای AJAX در این فایل
$(document).ready(function(){
// jQuery post() Method
$("#ajaxFormPost button").click(function(){
var emailInput = $("#EmailInput").val(),
nameInput = $("#NameInput").val(),
messageText = $("#Message").val();
$.post("demo_test_ajax_post.php",
{
email : emailInput,
name : nameInput,
message : messageText,
},
function(data,status){
$("#successAjaxPost").append(data);
});
$('#ajaxFormPost')[0].reset();
});
});ایجاد فایل demo_test_ajax_post
این فایل داده های ارسال شده توسط AJAX را دریافت می کند و آن را به کاربر نمایش می دهد.
<?php
$email = isset( $_POST["email"] ) ? $_POST["email"] : '';
$name = isset( $_POST["name"] ) ? $_POST["name"] : '';
$message = isset( $_POST["message"] ) ? $_POST["message"] : '';
echo '<h4>پاسخ در خواست AJAX ارسال شده</h4>';
echo '<ul>
<li>نام و نام خانوادگی: ' . $name . '</li>
<li>پست الکترونیکی: ' . $email . '</li>
<li>دیدگاه شما: ' . $message . '</li>
</ul>';
?>برای آشنایی بیشتر با AJAX در جاوا اسکریپت و جی کوئری از لینک های ذیل استفاده نمائید:
َAJAX در جاوا اسکریپت (کلید کنید)
