آموزش ajax - آموزش آژاکس - آموزش ای جکس - آموزش ایجکس آموزش Ajax از ابتدا ابتدا قبل از اینکه شروع به اموختن ajax کنیم باید یک مطلب را یاد اور شوم و ان تلفظ درست این کلمه است در بیشتر سایت ها این کلمه را به صورت اجاکس یا اژاکس تلفظ می کنن اما تلفظ درست این کلمه (إی جَکس) است و این چیزیست که خیلی از افراد ان را اشتباه می کنند . ajax یک زیان برنامه نویسی جدید نیست بلکه ajax یک تکنیک برای جذاب تر کردن صفحات وب است به صورتی که زبان های برنامه نویسی شناخته شده وب را به گونی ای غیر معمول ترکیب میکند تا به برنامه نویس این امکان را بدهد برنامه های وب را جذابتر از ان چیزی که به صورت معمول رواج دارد به نمایش بگذارد . کار ajax چیست ؟ همانطور که گفتم ajax یک تکنیک برای جذاب کردن صفحات وب و از طرف دیگر بالا بردن سرعت بروز رسانی صفحات است . دربازدید از یک صفحه وب با کلیک بر روی هر لینک یا دکمه ای برای تغییر محتوای صفحه و یا ارسال یک فیلد به سرور باید تمام صفحه بروز شود و این به معنی درخواست تمام عکسها , لوگوها و کدها از سرور می باشد اما شما با استفاده از این تکنیک فقط قسمتهای مورد نیاز را بروز میکنید و برای انجام هر عملیاتی نیاز به بروز کردن کل صفحه نیست این کار توسط فناوری ajax انجام میشود
آموزش ajax شروع اولین کار خوب بهتره به جای بحث الکی بر روی نحوه ی به وجود امدن این تکنیک و توضیحات بی مورد یک کار عملی رو با هم تجربه کنیم . قرار نیست اینجا یک روی کار های اماده کار کنیم . تصمیم گرفتم یک صفحه رو از صفر طراحی کنیم و هر دفعه اون رو کامل تر کنیم و کمکم به چیزی که میخوایم نزدیکش کنیم . خوب طرح کلی کار از این قرار هست که ما یک فرم داریم که کاربر برای ثبت نام در سایت از اون استفاده می کنه . حالا من می خوام قبل از ارسال اطلاعات وکلیک روی دکمه send بدون رفرش صفحه نام کاربری کاربر رو چک کنم و در صورت تکراری بودن نام وارد شده کاربر رو از این خبر مطلع کنم تا قبل از ارسال اطلاعات این مشکل رو رفع کنه . کار رو از طراحی صفحه html شروع می کنیم .ابتدا یک جدول برای قرار گرفتن فرممون در داخل اون طراحی میکنیم و فرم رو داخل اون قرار میدم . تا اینجا یک صفحه داریم که فقط ظاهر صفحه مورد نظرمون رو در بر گرفته و یک دکمه هم با عنوان check داریم که فعلا هیچ عملی رو انجام نمیده ولی بعدا قراره با کلیک بر روی این دکمه نام کاربری کاربر رو چک کنه . کد: <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> <form action="index.php" method="post"> <table width="300" border="0"> <tr> <td><label for="name">name </label></td> <td><input type="text" id="name" /></td> <td> </td> </tr> <tr> <td><label for="user">user </label></td> <td><input type="text" id="user" /></td> <td style="text-align:left"><input type="button" value="check" /></td> </tr> <tr> <td><label for="pass">password</label></td> <td><input type="password" id="pass" /></td> <td> </td> </tr> <tr> <td></td> <td colspan="2"><input type="submit" id="send" /></td> </tr> </table> </form> </body> </html></code>
حالا باید کاری کنیم که با کلیک روی دکمه check وجود یا عدم وجود نام کاربری در بانک اطلاعاتی برسی بشه . تنها کاری که ما باید انجام بدیم ارسال نام کاربری به سرور و چک اون هست که باید مرحله ارسال رو از طریق جاوااسکریپت و چک اون رو از طریق php انجام بدیم . برای این کار باید یک مقدماتی رو فراهم کنیم که با هم تک تک کارهای لازم برای انجام این کار رو انجام خواهیم داد. در این قسمت به نوشتن کدهای سمت کلاینت یا همون کدهای جاوااسکریپت لازم برای ارسال دادها می پردازیم . برای ایجاد ارتباط باید از پروتکل http استفاده کنیم باید یک شی از نوع xml http request بسازیم که از طریق اون در خواست های خودمون به وسیله ی این پروتکل ارسال و پاسخ های ارسالی رو کنترل کنیم . به خاطر تفاوت هایی که در مرورگرهای مختلف وجود داره نمیشه از یک روش مشخص برای ساخت این شی استفاده کرد برای همین باید این کار رو به صورت زیر انجام بدیم . کد 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> روش اول ساخت نمونه روشی است که در تمام مرورگر های استاندارد پشتیبانی می شود ولی باز مشکل در ie پیش میاد که مجبوریم در ie ابرای هر کدوم از نسخه ها از یک روش استفاده کنیم . این مشکل به دلیل این هست که ie این شی رو به صورت اکتیوکس پیاده سازی کرده در حالی که در مرورگرهای معروف دیگه مانند firefox,opera,safari این شی به صورت اشیاء داخلی کتابخانه های جاوااسکریپت پیاده سازی شده .به خاطر همین تعارض مجبوریم کدی که برای ساخت xmlhttprequest استفاده میکنیم شرطی برای ساخت از طریق اکتیوکس و یا اشیاء داخلی جاوااسکریپت داشته باشه . بعد از تعریف تابعی برای ساخت شی XmlHttpRequest در داخل جاوااسکریپت حالا یک تابع برای ارسال نام کاربری به سرور می سازیم . اسم تابع رو checkuser میزاریم . کد 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 checkUser() { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Browser does not support HTTP Request"); return; } } </code> تا اینجا توسط تابع یک نمونه از شی xmlHttpRequest رو ساختیم و در خط بعد متغییر مون رو با null چک کردیم این کار به خطر این هست که اگر مروگری این شی رو پشتیبانی نکرد پیام مناسبی برای کاربر نمایش داده بشه . حالا فرض رو بر این میگیریم که نمونه ای از اون کلاس ساخته شده حالا این شی دارای یک متدهایی هست که برای ادامه کارمون باید از این متدها استفاده کنیم . برای ارسال نام کاربری به صورت Get باید نام کاربری رو در کنار ادرس صفحه قرار بدیم و اون رو به سرور ارسال کنیم . ابتدا ادامه کد رو قرار میدم و سپس متدهای این شی رو توضیح میدم . کد 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 checkUser() { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Browser does not support HTTP Request"); return; } url='index.php?user='+document.getElementById('user').value; xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); return false; } </code>
آموزش ajax تابع onreadystatechange با تغییر وضعیت تابع متناضر با خودش رو فراخونی می کنه . 5 وضعیت مختلف برای ارسال اطلاعات ممکن است پیش بیاد که عبارتند از صفر=هیچ عملیاتی صورت نگرفته , 1=درحال بارگذاری ,2=عملیات بارگذاری به اتمام رسیده ,3=خاتمه دادن عملیات , 4=کامل شدن اطلاعات ارسالی اسم تابع نوشته شده در مقابل تابع onreadystatechange در صورت تغییر هر کدام از این وضعیت ها فراخوانی می شود . تابع open سه پارامتر می گیره که پارامتر اول نوع ارسال داده ها رو مشخص میکنه پارامتر دوم ادرس صفحه ای رو که می خوایم اطلاعات رو برای اون ارسال کنیم چون در اینجا ما اطلاعات رو به صورت get ارسال می کنیم فیلد user رو هم در url قرار داده و ارسال می کنیم و پارامتر سوم هم نشان دهنده همگام یا ناهمگام بودن فراخوانی است . مقدار متغییر url در صورتی که هنگام پر کردن فرم مقدار عبارت user رو برابر hossein بدیم مقدار متغییر url برابر با مقدار زیر خواهد بود . کد: <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; ">index.php?user=hossein</code> تابع send اگر اطلاعات ارسالی به صورت data وجود داشته باشه از این تابع برای ارسال استفاده می کنیم اما چون ما در اینجا اطلاعات رو به صورت get ارسال کردیم مقدار این تابع رو برابر null قرار میدیم . تا اینجا کارای هر یک از توابع رو توضیح دادیم و حالا یک بار برنامه رو تا اینجا چک میکنیم . کاربر وارد سایت میشه اطلاعات خودش رو پر میکنه و برای چک نام کاربری بر روی دکمه check کلیک می کنه در این هنگام ما باید تابع checkUser رو فراخونی کنیم بنابراین دکمه check رو به صورت زیر تغییر میدیم . کد 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; "><input type="button" value="check" onclick="checkUser()"/> </code> تابع checkUser فراخونی میشه و در ابتدا یه نمونه از شی XmlHttp ساخته میشه و بعد در صورت درست نشدن این نمونه از شی XmlHttp یک پیام به کاربر نمایش میده و از ادامه اجرای تابع صرف نظر میکنه اما در صورت رد کردن این مرحله و ادامه کار متغییری که تعریف کردیم , ادرس صفحه ای رو که نام کاربری باید به اون ارسال بشه همراه با پارامتر نام کاربریمون در بر میگیره . توسط تابع open فراخونی مورد نظرمون رو تنظیم می کنیم .در خواست هنگامی ارسال میشه که متد send اجرا بشه و در انتها متد send رو با مقدار null فراخونی کردیم یعنی هیچ مقداری رو به صورت post نمی خوایم ارسال کنیم . در ادامه کار در صورت تغییر هر کدوم از وضعیت ها , تابع stateChanged فراخونی میشه که البته هنوز این تابع رو تعریف نکردیم حالا تنها کاری که مونده در سمت کلاینت انجام بدیم تابع 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") { if (xmlHttp.responseText==1) { document.getElementById("user").style.border="1px solid #FF0000"; } else{ document.getElementById("user").style.border="1px solid #00CC00"; } } } </code> متد readyState وضعیت درخواستمون رو نگه داری میکنه در بالا دو حالت مختلف رو ما چک کردیم اول وضعیت 4 وبعد وضعیت complete در واقع هر دوی این وضعیت ها یکی هستند وبه کامل بودن صفحه اشاره می کنند . متد responseText هم نتیجه ارسالی از سرور رو بر میگردونه در سرور اگر نام کاربری وجود داشته باشه قراره مقدار یک و در غیر اینصورت قراره مقدار صفر رو برگردونه بشه , حالا در تابع stateChanged چک میکنیم اگر مقدار برگشتی از سرور برابر یک هست حاشیه جعبه متن مربوط به user رو برابر با قرمز و در غیر اینصورت برابر با سبز قرار میدیم .
کدهای Ajax مورد نیاز رو نوشتیم و حالا فقط لازمه که در سمت سرور به بانک اطلاعاتی وصل بشیم و نتیجه رو برای این صفحه بر گردونیم . کدهای صفحه اصلیمون یا همون صفحه 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; "><!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> <script type="text/javascript"> 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; } function checkUser() { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Browser does not support HTTP Request"); return; } url='index.php?user='+document.getElementById('user').value; //alert(url); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); } function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { if (xmlHttp.responseText=='1') { document.getElementById("user").style.border="1px solid #FF0000"; } else{ document.getElementById("user").style.border="1px solid #00CC00"; } } } </script> </head> <body> <form action="index.php" method="post"> <table width="300" border="0"> <tr> <td><label for="name">name </label></td> <td><input type="text" id="name" /></td> <td> </td> </tr> <tr> <td><label for="user">user </label></td> <td><input type="text" id="user" /></td> <td style="text-align:left"><input type="button" value="check" onclick="checkUser()"/></td> </tr> <tr> <td><label for="pass">password</label></td> <td><input type="password" id="pass" /></td> <td> </td> </tr> <tr> <td></td> <td colspan="2"><input type="submit" id="send" /></td> </tr> </table> </form> </body> </html> </code> این صفحه رو من با نام index.html ذخیره کردم . در بانک اطلاعاتی یک Database درست کردم با نام Ajax و با یک جدول به نام users که داخل اون فیلدای لازم برای هر کابر رو تعریف کردم از جمله user و password . چند تا کاربر رو هم داخلش وارد کردم . حالا یه اتصال به بانک اطلاعاتی انجام میدیم و تمام رکورد هایی که بانام کاربری فرستاده شده از طرف کلاینت که اون رو به صورت get ارسال کردیم وجود داره رو جستجو می کنیم .تابع mysql_num_rows تعداد رکوردهای پیدا شده رو بر می گردونه بابررسی نتیجه این تابع می تونی بفهمیم که نام کاربری قبلا ثبت شده است یا نه . کد 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="SELECT * FROM `users` WHERE `user` ='".$_GET['user']."'"; $r=mysql_query($sql); $result=mysql_num_rows($r); echo( $result); ?></code>
پاسخ : آموزش ajax اولین برنامه با موفقیت تمام شد اگه هر کدوم از بچه ها نظری داشتن هین جا مطرح کنن البته از دادن پست های الکی برای جلوگیری از شلوغی پرهیز کنید . برنامه دوم :سیستم ثبت نام به وسیله ajax همانطور که قول داده بودم بر گشتم . در ادامه قراره یک سیستم ثبت نام با 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 که کل محتویات صفحه رو در بر گرفته . که در صورت ثبت با موفقیت اطلاعات پیامی را به جای عناصر داخلی ان برای کاربر نمایش خواهیم داد.
پاسخ : آموزش ajax روند کلی از این قراره یک تابع تعریف کنیم (با نام 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 عملیات سمت سرور این برنامه 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 رو نمایش میدیم .
پاسخ : آموزش ajax برنامه سوم :اضافه کردن به لیست با استفاده ازajax در این برنامه یه لیست از دانشجوها داریم که قراره به وسیله 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 فراخوانی میشود این تابع وظیفه ارسال اطلاعات به سرور رو بر عهده داره
پاسخ : آموزش ajax قسمت مهم کار قسمت جاوا اسکریپت کارمون هست . فرض می کنیم اطلاعات رو ما به سرور ارسال کردیم و اطلاعات با موفقیت در بانک ذخیره شد حالا ما باید توسط جاوااسکریپت یک سطر به جدولمون اضافه کنیم و اطلاعات رو در اون نمایش بدیم . یه تابع تعریف می کنیم به نام 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>
