در این برنامه یه لیست از دانشجوها داریم که قراره به وسیله ajax به این لیست اضافه کنیم . برای هر دانشجو فیلدهای نام , نام خانوادگی , شماره دانشجویی رو در نظر می گیریم . بانک اطلاعاتی به نام ajax و جدولی به نام students در ان ایجاد می کنیم و فیلدهای id,name,family,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; ">CREATE TABLE IF NOT EXISTS `students` ( `id` int(11) NOT NULL auto_increment, `name` varchar(50) character set utf8 collate utf8_unicode_ci NOT NULL, `family` varchar(50) character set utf8 collate utf8_unicode_ci NOT NULL, `code` int(11) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ; </code> فایلی به نام index.php ایجاد می کنیم که شامل جدولی برای نمایش اطلاعات بانک اطلاعاتی و رکورد های اضافه شده به ان است و قسمتی شامل textfiled هایی برای اضافه کردن داده جدید به بانک . index.php کد 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> ADD BY AJAX </title> </head> <body> <table id='students' width="200" border="1" dir="rtl"> <tr> <td>نام </td> <td>نام خانوادگی</td> <td>شماره دانشجو</td> </tr> <?php //اجاکس , ایجکس , اژاکس ,AJAX $con=mysql_connect('localhost','root',''); $db=mysql_select_db('ajax',$con); mysql_query("set names 'utf8'"); $q="SELECT * FROM `students` "; $query=mysql_query($q); while($row=mysql_fetch_assoc($query)) { $name=$row['name']; $family=$row['family']; $code=$row['code']; echo " <tr> <td>$name </td> <td>$family</td> <td>$code</td> </tr>"; } ?> </table> <table width="400" border="0"> <tr> <td>نام</td> <td><input type="text" id="name" /></td> </tr> <tr> <td> نام خانوادگی</td> <td><input type="text" id="family" /></td> </tr> <tr> <td>شماره دانشجویی</td> <td><input type="text" id="code" /></td> </tr> <tr> <td> </td> <td><input type="button" value="ارسال" onclick="sendToServer()"/></td> </tr> </table> </body> </html> </code> در ابتدای اجرا صفحه جدولی شامل سه ستون رسم میشه و با اتصال به بانک اطلاعاتی اطلاعات واکشی شده و در جدول قرار میگیره . در زیر این جدول قسمتی داریم برای وارد کردن اطلاعات که پس از وارد کردن اطلاعات و کلیک روی دکمه ارسال رویداد onclick دکمه اجرا شده و تابع sendToServer فراخوانی میشود این تابع وظیفه ارسال اطلاعات به سرور رو بر عهده داره .
قسمت مهم کار قسمت جاوا اسکریپت کارمون هست . فرض می کنیم اطلاعات رو ما به سرور ارسال کردیم و اطلاعات با موفقیت در بانک ذخیره شد حالا ما باید توسط جاوااسکریپت یک سطر به جدولمون اضافه کنیم و اطلاعات رو در اون نمایش بدیم . یه تابع تعریف می کنیم به نام ADD که سه تا ارگمان می گیره و به وسیله این سه تا ارگمان سطر جدید جدولمون رو پر می کنیم . ابتدا نوشتن تابع و بعد توضیح کد 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 add(name,family,code) { tbody=document.getElementById('students').getElementsByTagName('TBODY')[0]; var row=document.createElement('TR'); row.setAttribute("id","tr",name); var td1=document.createElement('TD'); td1.innerHTML=name; var td2=document.createElement('TD'); td2.innerHTML=family; var td3=document.createElement('TD'); td3.innerHTML=code; row.appendChild(td1); row.appendChild(td2); row.appendChild(td3); tbody.appendChild(row); } </code> در خط اول tbody به بدنه جدول students مون اشاره می کنه و پس از اون چهار تا متغییر دیگه تعریف کردیم که از نوع عنصر های td ,tr ها مون هستن که قراره با کنار هم قرار گرفتن اینها یک سطر از جدولمون رو بسازیم . بعد از تعریف هر td محتویات اون رو برابر یکی از ارگام های ارسالیمون گذاشتیم و پس از این کار توسط تابع appendChild هر کدوم از td ها رو به عنوان فرزند row در نظر گرفتیم (که همون tr مون هست) و سپس در خط اخر row رو به عنوان بدنه جدولون معرفی کردیم . برای امتحان تابع می تونین از کد زیر استفاده کنین . کد 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> <table id='students' width="200" border="1" dir="rtl"> <tr> <td>نام </td> <td>نام خانوادگی</td> <td>شماره دانشجو</td> </tr> </table> <input type="button" value="ساخت" onclick="add('hossein','jalili','8808621609')"/></td> </body> </html> </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; ">//اجاکس , ایجکس , اژاکس ,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> وبعد هم تابع $ و تابعی که وظیفه مرتب کردن و ارسال داده ها به سرور رو بر عهده داره در این قسمت اسم تابع رو sendToServer گذاشتیم کد 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)} function sendToServer() { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Browser does not support HTTP Request"); return; } url='add.php?name='+encodeURIComponent($('name').value)+'&family='+encodeURIComponent($('family').value)+'&code='+$('code').value; xmlHttp.open("GET",url,true); xmlHttp.onreadystatechange=stateChanged; xmlHttp.send(null); } </code> فکر نکنم تابع sendToServer احتیاج به توضیح داشته باشه مثل برنامه ها قبلی یه نمونه از شی می سازه وجود شی رو چک می کنه و یه متغییر که مجموع داده های ارسالیمون در اون اون قرار می گیرن و در انتها این داده ها رو برای سرور ارسال می کنیم . تا اینجا تمام کارها مثل دفعات قبل بود ولی در نتیجه برگشتی یک تفاوت هایی وجود داره کد 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") { if (xmlHttp.responseText=='1') { add($('name').value,$('family').value,$('code').value); } else{ alert("Error in connect to server"); } } } </code> توسط تابع 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; ">//اجاکس , ایجکس , اژاکس ,AJAX $con=mysql_connect('localhost','root',''); $db=mysql_select_db('ajax',$con); mysql_query("set names 'utf8'"); $q="INSERT INTO `ajax`.`students` ( `id` , `name` , `family` , `code` ) VALUES (NULL , '".$_GET['name']."', '".$_GET['family']."', '".$_GET['code']."')"; $query=mysql_query($q); echo $query; </code>
