ایجکس Ajax (Asynchronous JavaScript and XML) مجموعه ای از استانداردها و تکنولوژی های وب است که با استفاده از زبان جاوا اسکریپت می توان درخواست های ناهمگام با برنامه جاری ( بدون referesh شدن صفحه وب ) به سرور فرستاد و پاسخ دریافت کرد و در صورت نیاز روی صفحه وب اعمال کرد.

XMLHttpRequest

روال کار این است که با استفاده از شئ XMLHttpRequest درخواستی را به سرور ارسال می کنیم و در سرور با استفاده از پارامتر های ارسال شده یک پردازشی را انجام می دهیم و پاسخ را به کلاینت برمیگردانیم.

نمونه یک درخواست ایجکس را به صورت شماتیک می توانید در سایت ویکی پدیا مشاهده کنید. همان طور که می بینید در درخواست های معمولی (سمت چپ ) یک Http Request به صورت غیر ایجکسی ارسال شده و در درخواست سمت راست یک Http Request ایجکسی ارسال شده است .

نوع داده برگشتی در درخواست های ایجکسی نیز در دو تصویر متفاوت است. فرمت پاسخ ارسالی از سرور به کلاینت در ایجکس :

• Text
• XML
• Json

نکته : ایجکس از جاوا اسکریپت استفاده می کند. پس برای برای استفاده از ایجکس باید جاوا اسکریپت مرورگر فعال باشد و همچنین مرورگر از کلاس XMLHttpRequest پشتیبانی کند.

XMLHttpRequest Properties

علاوه بر موارد فوق شئ xhr یک متد با نام abort دارد که برای لغو درخواست جاری استفاده می شود. این متد در jQuery Ajax نیز کاربرد دارد.

XMLHttpRequest Instance Method

متد هایی که در این رابطه به دریافت پاسخ HTTP Response به ما کمک می کند بسته به شرایط یکی از موارد زیر می باشد:

ساختار اصلی یک درخواست ایجکس با استفاده از زبان جاوا اسکریپت و کلاس XMLHttpRequest به شکل زیر می باشد:

var xhr = new XMLHttpRequest();
xhr.open('POST' , 'ajax.php');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send("username=" + username);
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 &&xhr.status === 200 ){
        document.getElementById("content").textContent = xhr.responseText;
    }
}

در کد بالا یک شئ از کلاس XMLHttpRequest ایجاد کردیم و با استفاده از متد open یک درخواست از نوع POST به مقصد ajax.php ارسال کردیم.

چون متد مورد استفاده ما POST است لذا و نیاز داریم تا پارامتر هایی به سرور ارسال کنیم. برای این کار باید نوع بدنه درخواست Http خود را در هدر ها تعیین کنیم. دستور سوم هدر Content-Type یا نوع بدنه درخواست را تعیین می کند.

در دستور بعدی با استفاده از متد send پارامتر ها ارسال می کنیم. در دستور آخر در زمان تغییر وضعیت شئ xht به آماده ( ready ) یک تابع را اجرا می کنیم که پارامتر ورودی آن پاسخ درخواست است.

ساختار handle کردن پاسخ در فایل سرور ajax.php به شکل زیر می باشد. همان طور که می بینید در پاسخ از فرمت text استفاده شده است.

$username = $_POST['username'];
$invalid_username = array("admin" , "gnu" , "linux" , "gnutec");
if(in_array($username , $invalid_username)){
    echo " This Usernaname is already Token";
}else{
    echo " Username is OK";
}

نکته : با استفاده از تابع json_encode در پی اچ پی می توانید یک آرایه را به صورت یک شئ json به پاسخ درخواست ajax ارسال کنید :

echo json_encode(
    array(
        'status'=>true,
        'text'=>'درخواست با موفقیت ثبت شد.'
    )
);

Load Image Blob

اگر بخواهیم یک تصویر را با Relative Path دریافت کنیم و پس از آن در یک مرحله نمایش بدهیم مثال کامل به این شکل است :

let request = new XMLHttpRequest()
request.open('GET','js.png')
request.responseType = 'blob'
request.send()
request.onload = () => {
    if(4 != request.readyState && 200 != request.status){
        return
    }
    let image = new Image()
    let imageUrl = window.URL.createObjectURL(response)
    image.src = imageUrl
    document.body.appendChild(image)
}

در مثال بالا اگر مقدار بازگشتی از سمت سرور در صورتی که responseType را تعیین نکنیم بدنه تصویر است و کار با نوع داده blob بسیار ساده تر است . متد window.URL.createObjectURL یک لینک موقت ایجاد می کند.

jQuery Ajax

کتابخانه jQuery نیز ساختار درخواست Ajax را به صورت ساده تری پیاده سازی کرده است ، در حقیقت jQuery نیز از شئ XMLHttpRequest استفاده می کند(XMLHttpRequest behind the scenes).

jQuery متدهایی را جهت استفاده از ایجکس در اختیار ما قرار می دهد . به طور مثال سه متد زیر برای ارسال درخواست از انواع مختلف درخواست های HTTP Verb می باشد.

• $.ajax : ارسال درخواست به سرور . در این متد نوع درخواست در درون پارامتر های متد تعیین می گردد.
• $.get : ارسال درخواست به صورت GET.
• $.post : ارسال درخواست به صورت POST .

در زیر نمونه ای از یک درخواست ajax با استفاده از متد ajax می باشد :

var Req = $.ajax({
	type: 'POST',
	url: 'search.php',
	dataType: "JSON", // data type expected from server
        data: {
                action: 'action',
                paged: 10,
         },
	dataType: "JSON", // data type expected from server
        beforeSend: function () { console.log('before send'); }
        error: function (request, status, error) { console.log(error); },
        success: function (respons) { console.log(respons); }
});

این متد یک شئ دریافت می کند که هر کلید از آن می تواند یک مقدار یا تابع دریافت کند. بدین شکل ما یک درخواست با متد post به سرور ارسال می کنیم.

beforeSend مربوط به زمانی است که درخواست ارسال شده ولی پاسخی دریافت نشده. success مربوط به زمانی است که پاسخ با موفقیت دریافت شده است. error مربوط به زمانی است که پاسخ با شکست رو به رو شده (‌به هر دلیلی از جمله timeout خطا در سرور … )data به صورت یک شئ به سرور ارسال گردیده است. url هم آدرس جایی است که قرار است درخواست با پارامتر های خود به آن ارسال شود ( همان سرور دریافت کننده درخواست که پاسخ می دهد )

در کد بالا درخواست را در متغیر Req ریختیم که متد هایی دارد و می توان در پارامتر های از نوع تابع در شئ استفاده کرد. به طور مثال با استفاده از متد abort می توانیم از درخواست صرف نظر کنیم. ( Req.abort ).

تابع serialize : با استفاده از این تابع می توانیم پارامتر های یک فرم را به صورت کامل به سرور بفرستیم و در سرور تمامی پارامتر های فرم را در متغیر $_POST داشته باشیم.

$.ajax({
    url: "file.php",
    type: "post",
    data: $("form").serialize(),
    success: function(respons){
        $("pre").html(respons);
    }
});

$.get : نمونه ای از درخواست به سرور :

var jqxhr = $.get("file.txt" , function(data){
    $("#content-txt").text(data);
});
jqxhr.done(function(){ alert("successfully done") });
jqxhr.fail(function(){ alert("fail xhr") });
jqxhr.always(function(){ alert("xhr finished"); });

متد done همان success و متد always مربوط به زمان اتمام درخواست و متد fail همان error می باشد.

$.post : نمونه ای از درخواست post به سرور :

var jqxhr = $.post("file.php" , {name: "henry" , time: "07 AM"});
jqxhr.done(function(data){
    alert("Request Successfully");
    $("#content-php").text(data);
});
jqxhr.fail( function(){ alert("Request Fail") } );
jqxhr.always( function(){ alert("Request Finished") });

در کنار افزونه curl , form با استفاده از جاوا اسکریپت (‌ شئ XMLHttpRequest ) نیز می توان درخواست هایی در متدهای http متفاوت درخواست هایی به سرور یا وب سرویس ها ارسال کرد و نتیجه را دریافت کرد.

در پایان یک نمونه درخواست کامل از طریق jQuery Ajax را پایین می توانید مشاهده فرمایید.

$.ajax({
    url : "https://gnutec.net/fa/includes/admin-ajax.php",
    type : "POST",
    data : {
        action: "action",
    },
    beforeSend: function(){},
    success : function(respons){},
    error: function (request, status, error) {},
});