قراره یک سیستم ثبت نام با ajax رو پیاده سازی کنیم . چند نکته 1- بدلیل اینکه تمام اطلاعات رو باید از طریق جاوااسکریپت برای سرور ارسال کنیم دیگه نیازی به وجود فرم در صفحه نیست . 2- بدلیل نبدون فرم از دکمه submit هم دیگه استفاده نمی کنیم . 3- به خاطر مهم بودن اطلاعاتی که می خوایم ارسال کنیم (بر عکس برنامه بالا) باید ازمتد post استفاده کنیم و باید خودمون این عملیات رو از طریق جاوااسکریپت شبیه سازی کنیم . طراحی ظاهر برنامه کد PHP: <code style="overflow-x: auto; overflow-y: auto; height: auto; max-height: 200px; display: block; font-family: Monaco, Consolas, Courier, monospace; font-size: 11px; direction: ltr; text-align: left; "><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <div id="state"> <table width="200" border="0"> <tr> <td>name : </td> <td><input type="text" id="name" /></td> </tr> <tr> <td>family : </td> <td><input type="text" id="family" /></td> </tr> <tr> <td>user name : </td> <td><input type="text" id="user" /></td> </tr> <tr> <td>passwords : </td> <td><input type="password" id="pass" /></td> </tr> <tr> <td>tell : </td> <td><input type="text" id="tell" /></td> </tr> <tr> <td colspan="2" align="center"> <input type="button" value="send" onclick="send_information()" /> </td> </tr> </table> </div> </body> </html> </code> در طراحی ظاهری از 5فیلد نام ,نام خانوادگی,نام کاربری,پسورد و شماره تلفن استفاده شده و برای هر کدوم از این ها یک id در نظر گرفتیم (برای دسترسی به عناصر در جاوااسکریپت از اون استفاده می کنیم) و یک div با نام state که کل محتویات صفحه رو در بر گرفته . که در صورت ثبت با موفقیت اطلاعات پیامی را به جای عناصر داخلی ان برای کاربر نمایش خواهیم داد.
روند کلی از این قراره یک تابع تعریف کنیم (با نام send_information) که با کلیک بر روی دکمه ثبت , این تابع فراخونی و از طریق این تابع اطلاعاتمون رو به صورت post برای سرور ارسال و در نهایت تابعی برای دریافت نتیجه از سرور که در صورت ثبت درست اطلاعات پیام مناسب رو برای کاربر نمایش بده . روند کلی کار مانند برنامه قبل هست , باید یک نمونه از شی xmlHttpRequst بسازیم و از طریق این شی اطلاعاتمون رو ارسال و نتیجه رو دریافت کنیم . تنها تفاوت برنامه در ارسال اطلاعات و عملیاتی هست که در پاسخ سرور باید انجام بدیم . حالا میریم سراغ جاوااسکریپت لازم برای این کار . تعریف تابع GetXmlHttpObject() مانند برنامه قبل برای ساخت نمونه ای از شیxmlHttpRequst . کد PHP: <code style="overflow-x: auto; overflow-y: auto; height: auto; max-height: 200px; display: block; font-family: Monaco, Consolas, Courier, monospace; font-size: 11px; direction: ltr; text-align: left; ">//AJAX ,اجاکس , ایجکس , اژاکس function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { //Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } </code> تعریف یک تابع با نام $ برای راحتی کار با عناصر دورن صفحه کد PHP: <code style="overflow-x: auto; overflow-y: auto; height: auto; max-height: 200px; display: block; font-family: Monaco, Consolas, Courier, monospace; font-size: 11px; direction: ltr; text-align: left; ">function $(id) { return(document.getElementById(id)); } </code> با تعریف این تابع به جای استفاده از document.getElementById برای دسترسی به عنصر داخل صفحه از تابع $ همراه با نام عنصر استفاده می کنیم ($ در javascript جزء کلمات رزرو شده نیست) با اینکار در کد نویسی راحت تر خواهیم بود. تابع send_information() کد PHP: <code style="overflow-x: auto; overflow-y: auto; height: auto; max-height: 200px; display: block; font-family: Monaco, Consolas, Courier, monospace; font-size: 11px; direction: ltr; text-align: left; ">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); } </code> بازهم در ابتدا تابع GetXmlHttpObject)( رو فرخونی می کنیم تا یک نمونه از شی xmlHttpRequest رو بسازیم . دو متغیر با نام های url و params تعریف کردیم url ادرسی که اطلاعات باید به اون ارسال بشوند رو نگه داری میکنه و params شامل اطلاعاتیست که باید ارسال بشوند که برای گرفتن اطلاعات از همون تابع $ که قبلا تعریف کرده بودیم استفاده کردیم . در مثال قبلی به خاطر اینکه اطلاعت قرار بود به صورت get ارسال کنیم ادرس صفحه و داده ارسالیمون رو داخل یک متغیر قرار دادیم ولی اینجا به دلیل ارسال اطلعات به صورت post اون ها رو از هم جدا کردیم . در تابع open نوع ارسال رو post تعریف می کنیم و در پارامتر دوم ادرس صفحه رو وارد میکنیم . برای ارسال اطلاعات به صورت post باید این عمل رو شبیه سازی کنیم این کار رو توسط سه خط زیر انجام دادیم . کد PHP: <code style="overflow-x: auto; overflow-y: auto; height: auto; max-height: 200px; display: block; font-family: Monaco, Consolas, Courier, monospace; font-size: 11px; direction: ltr; text-align: left; "> xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlHttp.setRequestHeader("Content-length", params.length); xmlHttp.setRequestHeader("Connection", "close"); </code> و در انتها توسط متد send شی xmlHttp دادها رو ارسال می کنیم . برای دریافت نتیجه باز هم مانند برنامه قبل عمل می کنیم منتها با برخی تغییرات جزئی. تابع stateChanged() کد PHP: <code style="overflow-x: auto; overflow-y: auto; height: auto; max-height: 200px; display: block; font-family: Monaco, Consolas, Courier, monospace; font-size: 11px; direction: ltr; text-align: left; "> function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { //alert(xmlHttp.responseText); if(xmlHttp.responseText==1) $('state').innerHTML="success"; } } </code> این تابع در صورت با موفقیت انجام شدن عملیات پیام success رو به جای عناصر درون تگ div نمایش خواهد داد
عملیات سمت سرور این برنامه ajax هم دیگه داره تموم میشه و فقط مونده عملیات سمت سرور . کد PHP: <code style="overflow-x: auto; overflow-y: auto; height: auto; max-height: 200px; display: block; font-family: Monaco, Consolas, Courier, monospace; font-size: 11px; direction: ltr; text-align: left; "><?php //اجاکس , ایجکس , اژاکس ,AJAX $con=mysql_connect('localhost','root',''); $db=mysql_select_db('ajax',$con); $sql="INSERT INTO `ajax`.`users` ( `id` , `name` , `family` , `user` , `pass` , `tell` ) VALUES ( NULL , '".$_POST['name']."' , '".$_POST['family']."' , '".$_POST['user']."' , MD5( '".$_POST['pass']."' ) , '".$_POST['tell']."' )"; //echo($sql); $result=mysql_query($sql); echo($result); ?></code> حالا در سمت سرور داها را رو ما به صورت post داریم . تنها کاری که باید بکنیم اتصال به بانک اطلاعاتی و نوشتن یک کوئری برای ذخیره دادها در بانک اطلاعاتیمون و برگردوندن نتیجه اون (در صورت ثبت درست مقدار 1 برمی گردونه) و در اخر هم این نتیجه رو چاپ کردیم که این نتیجه رو در سمت کلاینت هم داشته باشیم و در سمت کلاینت توسط تابع stateChanged در صورت اینکه جواب برگشتی از سمت سرور برابر باشه در صفحه پیام success رو نمایش میدیم .
