روند کلی از این قراره
یک تابع تعریف کنیم (با نام send_information) که با کلیک بر روی دکمه ثبت , این تابع فراخونی و از طریق این تابع اطلاعاتمون رو به صورت post برای سرور ارسال و در نهایت تابعی برای دریافت نتیجه از سرور که در صورت ثبت درست اطلاعات پیام مناسب رو برای کاربر نمایش بده .

روند کلی کار مانند برنامه قبل هست , باید یک نمونه از شی xmlHttpRequst بسازیم و از طریق این شی اطلاعاتمون رو ارسال و نتیجه رو دریافت کنیم .
تنها تفاوت برنامه در ارسال اطلاعات و عملیاتی هست که در پاسخ سرور باید انجام بدیم .

حالا میریم سراغ جاوااسکریپت لازم برای این کار .

تعریف تابع GetXmlHttpObject() مانند برنامه قبل برای ساخت نمونه ای از شیxmlHttpRequst

 

//AJAX ,اجاکس , ایجکس , اژاکس
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera ۸٫۰+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

تعریف یک تابع با نام $ برای راحتی کار با عناصر دورن صفحه

 

 function $(id)
{
return(document.getElementById(id));
}

با تعریف این تابع به جای استفاده از document.getElementById برای دسترسی به عنصر داخل صفحه از تابع $ همراه با نام عنصر استفاده می کنیم ($ در javascript جزء کلمات رزرو شده نیست) با اینکار در کد نویسی راحت تر خواهیم بود.

تابع send_information()

 function send_information()
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
//page address in server
url='index.php';
//paramet in text box
params='name='+$('name').value+'&family='+$('family').value+'&user='+
$('user').value+'&pass='+$('pass').value+'&tell='+$('tell').value;xmlHttp.onreadystatechange=stateChanged;xmlHttp.open(“POST”, url, true);//Send the proper header information along with the request
xmlHttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
xmlHttp.setRequestHeader(“Content-length”, params.length);
xmlHttp.setRequestHeader(“Connection”, “close”);xmlHttp.send(params);

}

بازهم در ابتدا تابع GetXmlHttpObject)( رو فرخونی می کنیم تا یک نمونه از شی xmlHttpRequest رو بسازیم .
دو متغیر با نام های url و params تعریف کردیم url ادرسی که اطلاعات باید به اون ارسال بشوند رو نگه داری میکنه و params شامل اطلاعاتیست که باید ارسال بشوند که برای گرفتن اطلاعات از همون تابع $ که قبلا تعریف کرده بودیم استفاده کردیم .

در مثال قبلی به خاطر اینکه اطلاعت قرار بود به صورت get ارسال کنیم ادرس صفحه و داده ارسالیمون رو داخل یک متغیر قرار دادیم ولی اینجا به دلیل ارسال اطلعات به صورت post اون ها رو از هم جدا کردیم .

در تابع open نوع ارسال رو post تعریف می کنیم و در پارامتر دوم ادرس صفحه رو وارد میکنیم .

برای ارسال اطلاعات به صورت post باید این عمل رو شبیه سازی کنیم این کار رو توسط سه خط زیر انجام دادیم .

  xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-length", params.length);
xmlHttp.setRequestHeader("Connection", "close");

و در انتها توسط متد send شی xmlHttp دادها رو ارسال می کنیم .

برای دریافت نتیجه باز هم مانند برنامه قبل عمل می کنیم منتها با برخی تغییرات جزئی.

    function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
//alert(xmlHttp.responseText);
if(xmlHttp.responseText==1)
$('state').innerHTML="success";}
}


 

این تابع در صورت با موفقیت انجام شدن عملیات پیام success رو به جای عناصر درون تگ div نمایش خواهد داد .