• 10 رای - 4.5 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش Ajax از ابتدا
#1
ابتدا قبل از اینکه شروع به اموختن ajax کنیم باید یک مطلب را یاد اور شوم و ان تلفظ درست این کلمه است در بیشتر سایت ها این کلمه را به صورت اجاکس یا اژاکس تلفظ می کنن اما تلفظ درست این کلمه (إی جَکس) است و این چیزیست که خیلی از افراد ان را اشتباه می کنند .

ajax یک زیان برنامه نویسی جدید نیست بلکه ajax یک تکنیک برای جذاب تر کردن صفحات وب است به صورتی که زبان های برنامه نویسی شناخته شده وب را به گونی ای غیر معمول ترکیب میکند تا به برنامه نویس این امکان را بدهد برنامه های وب را جذابتر از ان چیزی که به صورت معمول رواج دارد به نمایش بگذارد .


کار ajax چیست ؟

همانطور که گفتم ajax یک تکنیک برای جذاب کردن صفحات وب و از طرف دیگر بالا بردن سرعت بروز رسانی صفحات است .
دربازدید از یک صفحه وب با کلیک بر روی هر لینک یا دکمه ای برای تغییر محتوای صفحه و یا ارسال یک فیلد به سرور باید تمام صفحه بروز شود و این به معنی درخواست تمام عکسها , لوگوها و کدها از سرور می باشد اما شما با استفاده از این تکنیک فقط قسمتهای مورد نیاز را بروز میکنید و برای انجام هر عملیاتی نیاز به بروز کردن کل صفحه نیست این کار توسط فناوری ajax انجام میشود .
  پاسخ
#2
شروع اولین کار

خوب بهتره به جای بحث الکی بر روی نحوه ی به وجود امدن این تکنیک و توضیحات بی مورد یک کار عملی رو با هم تجربه کنیم .

قرار نیست اینجا یک روی کار های اماده کار کنیم . تصمیم گرفتم یک صفحه رو از صفر طراحی کنیم و هر دفعه اون رو کامل تر کنیم و کمکم به چیزی که میخوایم نزدیکش کنیم .

خوب طرح کلی کار از این قرار هست که ما یک فرم داریم که کاربر برای ثبت نام در سایت از اون استفاده می کنه .
حالا من می خوام قبل از ارسال اطلاعات وکلیک روی دکمه send بدون رفرش صفحه نام کاربری کاربر رو چک کنم و در صورت تکراری بودن نام وارد شده کاربر رو از این خبر مطلع کنم تا قبل از ارسال اطلاعات این مشکل رو رفع کنه .


کار رو از طراحی صفحه html شروع می کنیم .ابتدا یک جدول برای قرار گرفتن فرممون در داخل اون طراحی میکنیم و فرم رو داخل اون قرار میدم .
تا اینجا یک صفحه داریم که فقط ظاهر صفحه مورد نظرمون رو در بر گرفته و یک دکمه هم با عنوان check داریم که فعلا هیچ عملی رو انجام نمیده ولی بعدا قراره با کلیک بر روی این دکمه نام کاربری کاربر رو چک کنه .


کد:
<!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>&nbsp;</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>&nbsp;</td>
  </tr>
  <tr>
      <td></td>
    <td colspan="2"><input type="submit" id="send" /></td>
  </tr>
</table>
</form>
</body>
</html>


ادامه کار رو بزودی قرار میدم .
  پاسخ
#3
تا اینجا ظاهر کار رو داریم .

حالا باید کاری کنیم که با کلیک روی دکمه check وجود یا عدم وجود نام کاربری در بانک اطلاعاتی برسی بشه .

تنها کاری که ما باید انجام بدیم ارسال نام کاربری به سرور و چک اون هست که باید مرحله ارسال رو از طریق جاوااسکریپت و چک اون رو از طریق php انجام بدیم .

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

در این قسمت به نوشتن کدهای سمت کلاینت یا همون کدهای جاوااسکریپت لازم برای ارسال دادها می پردازیم .

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

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


کد پی‌اچ‌پی:
//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;



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

این مشکل به دلیل این هست که ie این شی رو به صورت اکتیوکس پیاده سازی کرده در حالی که در مرورگرهای معروف دیگه مانند firefox,opera,safari این شی به صورت اشیاء داخلی کتابخانه های جاوااسکریپت پیاده سازی شده .به خاطر همین تعارض مجبوریم کدی که برای ساخت xmlhttprequest استفاده میکنیم شرطی برای ساخت از طریق اکتیوکس و یا اشیاء داخلی جاوااسکریپت داشته باشه .

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


اسم تابع رو checkuser میزاریم .

کد پی‌اچ‌پی:
function checkUser()

xmlHttp=GetXmlHttpObject();
if (
xmlHttp==null)
 {
 
alert ("Browser does not support HTTP Request");
 return;
 }



تا اینجا توسط تابع یک نمونه از شی xmlHttpRequest رو ساختیم و در خط بعد متغییر مون رو با null چک کردیم این کار به خطر این هست که اگر مروگری این شی رو پشتیبانی نکرد پیام مناسبی برای کاربر نمایش داده بشه .

حالا فرض رو بر این میگیریم که نمونه ای از اون کلاس ساخته شده حالا این شی دارای یک متدهایی هست که برای ادامه کارمون باید از این متدها استفاده کنیم .

برای ارسال نام کاربری به صورت Get باید نام کاربری رو در کنار ادرس صفحه قرار بدیم و اون رو به سرور ارسال کنیم .

ابتدا ادامه کد رو قرار میدم و سپس متدهای این شی رو توضیح میدم .

کد پی‌اچ‌پی:
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;



در ادامه بزودی هر یک از این متدها و استفاده انها رو توضیح خواهم داد .
  پاسخ
#4
تابع onreadystatechange با تغییر وضعیت تابع متناضر با خودش رو فراخونی می کنه .

5 وضعیت مختلف برای ارسال اطلاعات ممکن است پیش بیاد که عبارتند از صفر=هیچ عملیاتی صورت نگرفته , 1=درحال بارگذاری ,2=عملیات بارگذاری به اتمام رسیده ,3=خاتمه دادن عملیات , 4=کامل شدن اطلاعات ارسالی

اسم تابع نوشته شده در مقابل تابع onreadystatechange در صورت تغییر هر کدام از این وضعیت ها فراخوانی می شود .

تابع open سه پارامتر می گیره که پارامتر اول نوع ارسال داده ها رو مشخص میکنه پارامتر دوم ادرس صفحه ای رو که می خوایم اطلاعات رو برای اون ارسال کنیم چون در اینجا ما اطلاعات رو به صورت get ارسال می کنیم فیلد user رو هم در url قرار داده و ارسال می کنیم و پارامتر سوم هم نشان دهنده همگام یا ناهمگام بودن فراخوانی است .

مقدار متغییر url در صورتی که هنگام پر کردن فرم مقدار عبارت user رو برابر hossein بدیم مقدار متغییر url برابر با مقدار زیر خواهد بود .
کد:
index.php?user=hossein

تابع send اگر اطلاعات ارسالی به صورت data وجود داشته باشه از این تابع برای ارسال استفاده می کنیم اما چون ما در اینجا اطلاعات رو به صورت get ارسال کردیم مقدار این تابع رو برابر null قرار میدیم .

تا اینجا کارای هر یک از توابع رو توضیح دادیم و حالا یک بار برنامه رو تا اینجا چک میکنیم .

کاربر وارد سایت میشه اطلاعات خودش رو پر میکنه و برای چک نام کاربری بر روی دکمه check کلیک می کنه در این هنگام ما باید تابع checkUser رو فراخونی کنیم بنابراین دکمه check رو به صورت زیر تغییر میدیم .

کد پی‌اچ‌پی:
<input type="button" value="check"  onclick="checkUser()"/> 

تابع checkUser فراخونی میشه و در ابتدا یه نمونه از شی XmlHttp ساخته میشه و بعد در صورت درست نشدن این نمونه از شی XmlHttp یک پیام به کاربر نمایش میده و از ادامه اجرای تابع صرف نظر میکنه اما در صورت رد کردن این مرحله و ادامه کار متغییری که تعریف کردیم , ادرس صفحه ای رو که نام کاربری باید به اون ارسال بشه همراه با پارامتر نام کاربریمون در بر میگیره .
توسط تابع open فراخونی مورد نظرمون رو تنظیم می کنیم .در خواست هنگامی ارسال میشه که متد send اجرا بشه و در انتها متد send رو با مقدار null فراخونی کردیم یعنی هیچ مقداری رو به صورت post نمی خوایم ارسال کنیم . در ادامه کار در صورت تغییر هر کدوم از وضعیت ها , تابع stateChanged فراخونی میشه که البته هنوز این تابع رو تعریف نکردیم


حالا تنها کاری که مونده در سمت کلاینت انجام بدیم تابع stateChanged هست که در صورت تغییر وضعیت باید فراخونی بشه .

این تابع رو به صورت زیر تعریف می کنیم .

کد پی‌اچ‌پی:
    function stateChanged() 
    { 
    if (
xmlHttp.readyState==|| xmlHttp.readyState=="complete")
     { 
        if (
xmlHttp.responseText==1)    
        {    
            
document.getElementById("user").style.border="1px solid #FF0000";
        }
        else{
            
document.getElementById("user").style.border="1px solid #00CC00";
        }
      } 
    } 

متد readyState وضعیت درخواستمون رو نگه داری میکنه در بالا دو حالت مختلف رو ما چک کردیم اول وضعیت 4 وبعد وضعیت complete در واقع هر دوی این وضعیت ها یکی هستند وبه کامل بودن صفحه اشاره می کنند .

متد responseText هم نتیجه ارسالی از سرور رو بر میگردونه
در سرور اگر نام کاربری وجود داشته باشه قراره مقدار یک و در غیر اینصورت قراره مقدار صفر رو برگردونه بشه , حالا در تابع stateChanged چک میکنیم اگر مقدار برگشتی از سرور برابر یک هست حاشیه جعبه متن مربوط به user رو برابر با قرمز و در غیر اینصورت برابر با سبز قرار میدیم .
  پاسخ
#5
تصمیم گرفتم اول این بحث رو تموم کنم بعد برم سراغ امتحانما البته تموم نه به این معنی که دیگه ادامه نمی دم نه هنوز این بحث ادامه داره ولی اولین برناممون دیگه داره تموم میشه .
خوب تو جلسه پیش کدهای Ajax مورد نیاز رو نوشتیم و حالا فقط لازمه که در سمت سرور به بانک اطلاعاتی وصل بشیم و نتیجه رو برای این صفحه بر گردونیم .

کدهای صفحه اصلیمون یا همون صفحه ajaxبه صورت زیر شد .

کد پی‌اچ‌پی:
<!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==|| 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>&nbsp;</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>&nbsp;</td>
  </
tr>
  <
tr>
      <
td></td>
    <
td colspan="2"><input type="submit" id="send" /></td>
  </
tr>
</
table>
</
form>
</
body>
</
html

این صفحه رو من با نام index.html ذخیره کردم .

در بانک اطلاعاتی یک Database درست کردم با نام Ajax و با یک جدول به نام users که داخل اون فیلدای لازم برای هر کابر رو تعریف کردم از جمله user و password . چند تا کاربر رو هم داخلش وارد کردم .

حالا یه اتصال به بانک اطلاعاتی انجام میدیم و تمام رکورد هایی که بانام کاربری فرستاده شده از طرف کلاینت که اون رو به صورت get ارسال کردیم وجود داره رو جستجو می کنیم .تابع mysql_num_rows تعداد رکوردهای پیدا شده رو بر می گردونه بابررسی نتیجه این تابع می تونی بفهمیم که نام کاربری قبلا ثبت شده است یا نه .

کد پی‌اچ‌پی:
<?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);
?>


در ادامه قراره تمام کارهایی رو که میشه با ajax انجام داد رو اینجا تجربه کنیم فقط تا بعد از امتحانا به من فرصت بدین .


فایل‌های پیوست
.zip   project 1 by ajax.zip (اندازه 1.25 KB / تعداد دانلود: 884)
  پاسخ
#6
اولین برنامه با موفقیت تمام شد اگه هر کدوم از بچه ها نظری داشتن هین جا مطرح کنن البته از دادن پست های الکی برای جلوگیری از شلوغی پرهیز کنید .



برنامه دوم :سیستم ثبت نام به وسیله ajax


همانطور که قول داده بودم بر گشتم .

در ادامه قراره یک سیستم ثبت نام با ajax رو پیاده سازی کنیم .




چند نکته


1- بدلیل اینکه تمام اطلاعات رو باید از طریق جاوااسکریپت برای سرور ارسال کنیم دیگه نیازی به وجود فرم در صفحه نیست .

2- بدلیل نبدون فرم از دکمه submit هم دیگه استفاده نمی کنیم .

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



طراحی ظاهر برنامه


کد پی‌اچ‌پی:
<!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

در طراحی ظاهری از 5فیلد نام ,نام خانوادگی,نام کاربری,پسورد و شماره تلفن استفاده شده و برای هر کدوم از این ها یک id در نظر گرفتیم (برای دسترسی به عناصر در جاوااسکریپت از اون استفاده می کنیم)

و یک div با نام state که کل محتویات صفحه رو در بر گرفته .
که در صورت ثبت با موفقیت اطلاعات پیامی را به جای عناصر داخلی ان برای کاربر نمایش خواهیم داد.
  پاسخ
#7


روند کلی از این قراره


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

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



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


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

کد پی‌اچ‌پی:
//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;


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


کد پی‌اچ‌پی:
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"urltrue);
    
      
//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 دادها رو ارسال می کنیم .

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



تابع stateChanged()



کد پی‌اچ‌پی:
    function stateChanged() 
    { 
    if (
xmlHttp.readyState==|| xmlHttp.readyState=="complete")
     { 
         
//alert(xmlHttp.responseText);
        
if(xmlHttp.responseText==1)
            $(
'state').innerHTML="success";
        
     } 
    } 

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

عملیات سمت سرور

این برنامه ajax هم دیگه داره تموم میشه و فقط مونده عملیات سمت سرور .

کد پی‌اچ‌پی:
<?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);
?>

حالا در سمت سرور داها را رو ما به صورت post داریم . تنها کاری که باید بکنیم اتصال به بانک اطلاعاتی و نوشتن یک کوئری برای ذخیره دادها در بانک اطلاعاتیمون و برگردوندن نتیجه اون (در صورت ثبت درست مقدار 1 برمی گردونه) و در اخر هم این نتیجه رو چاپ کردیم که این نتیجه رو در سمت کلاینت هم داشته باشیم و در سمت کلاینت توسط تابع stateChanged در صورت اینکه جواب برگشتی از سمت سرور برابر باشه در صفحه پیام success رو نمایش میدیم .


فایل‌های پیوست
.zip   post ajax.zip (اندازه 3.05 KB / تعداد دانلود: 701)
  پاسخ
#9
برنامه سوم :اضافه کردن به لیست با استفاده ازajax


در این برنامه یه لیست از دانشجوها داریم که قراره به وسیله ajax به این لیست اضافه کنیم .

برای هر دانشجو فیلدهای نام , نام خانوادگی , شماره دانشجویی رو در نظر می گیریم .

بانک اطلاعاتی به نام ajax و جدولی به نام students در ان ایجاد می کنیم و فیلدهای id,name,family,code رو برای ان می سازیم .

کد پی‌اچ‌پی:
CREATE TABLE IF NOT EXISTS `students` (
  `
idint(11NOT NULL auto_increment,
  `
namevarchar(50character set utf8 collate utf8_unicode_ci NOT NULL,
  `
familyvarchar(50character set utf8 collate utf8_unicode_ci NOT NULL,
  `
codeint(11NOT NULL,
  
PRIMARY KEY  (`id`)
ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=

فایلی به نام index.php ایجاد می کنیم که شامل جدولی برای نمایش اطلاعات بانک اطلاعاتی و رکورد های اضافه شده به ان است و قسمتی شامل textfiled هایی برای اضافه کردن داده جدید به بانک .

index.php
کد پی‌اچ‌پی:
<!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" />
<
titleADD 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>&nbsp;</td>
    <td><input type="button" value="ارسال" onclick="sendToServer()"/></td>
  </tr>
</table>

</body>
</html> 

در ابتدای اجرا صفحه جدولی شامل سه ستون رسم میشه و با اتصال به بانک اطلاعاتی اطلاعات واکشی شده و در جدول قرار میگیره .
در زیر این جدول قسمتی داریم برای وارد کردن اطلاعات که پس از وارد کردن اطلاعات و کلیک روی دکمه ارسال رویداد onclick دکمه اجرا شده و تابع sendToServer فراخوانی میشود این تابع وظیفه ارسال اطلاعات به سرور رو بر عهده داره .
  پاسخ
#10
قسمت مهم کار قسمت جاوا اسکریپت کارمون هست .

فرض می کنیم اطلاعات رو ما به سرور ارسال کردیم و اطلاعات با موفقیت در بانک ذخیره شد حالا ما باید توسط جاوااسکریپت یک سطر به جدولمون اضافه کنیم و اطلاعات رو در اون نمایش بدیم .

یه تابع تعریف می کنیم به نام ADD که سه تا ارگمان می گیره و به وسیله این سه تا ارگمان سطر جدید جدولمون رو پر می کنیم .

ابتدا نوشتن تابع و بعد توضیح

کد پی‌اچ‌پی:
//اجاکس , ایجکس , اژاکس ,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);



در خط اول tbody به بدنه جدول students مون اشاره می کنه و پس از اون چهار تا متغییر دیگه تعریف کردیم که از نوع عنصر های td ,tr ها مون هستن که قراره با کنار هم قرار گرفتن اینها یک سطر از جدولمون رو بسازیم . بعد از تعریف هر td محتویات اون رو برابر یکی از ارگام های ارسالیمون گذاشتیم و پس از این کار توسط تابع appendChild هر کدوم از td ها رو به عنوان فرزند row در نظر گرفتیم (که همون tr مون هست) و سپس در خط اخر row رو به عنوان بدنه جدولون معرفی کردیم .

برای امتحان تابع می تونین از کد زیر استفاده کنین .

کد پی‌اچ‌پی:
<!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

واقعا نوشتن این تابع کار سختی بود دیگه بغییه باشه بعدا Big Grin

________________________________________________________________________________________________________________________________


برگشتم تا کاری رو که نصفه کاره گذاشته بودم رو تموم کنم .

قسمت هایی از جاوااسکریپت کارمون مونده که باید تمومشه .

ابتدا تابع همیشگیمون رو که تو هر برنامه از واون استفاده می کردیم رو تعریف می کنیم .
کد پی‌اچ‌پی:
//اجاکس , ایجکس , اژاکس ,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;


وبعد هم تابع $ و تابعی که وظیفه مرتب کردن و ارسال داده ها به سرور رو بر عهده داره در این قسمت اسم تابع رو sendToServer گذاشتیم

کد پی‌اچ‌پی:
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);



فکر نکنم تابع sendToServer احتیاج به توضیح داشته باشه مثل برنامه ها قبلی یه نمونه از شی می سازه وجود شی رو چک می کنه و یه متغییر که مجموع داده های ارسالیمون در اون اون قرار می گیرن و در انتها این داده ها رو برای سرور ارسال می کنیم .

تا اینجا تمام کارها مثل دفعات قبل بود ولی در نتیجه برگشتی یک تفاوت هایی وجود داره
کد پی‌اچ‌پی:
function stateChanged() 

if (
xmlHttp.readyState==|| xmlHttp.readyState=="complete")
 { 
    if (
xmlHttp.responseText=='1')    
    {    
        
add($('name').value,$('family').value,$('code').value);
    }
    else{
        
alert("Error in connect to server");
    
    }
    
  } 


توسط تابع stateChanged نتیجه برگشتی از سرور رو برسی می کنیم .
در سمت سرور در صورت ثبت درست اطلاعات در بانک مقدار یک رو بر گشت خواهیم داد و در اینجا در صورتی که مقدار برگشتی یک بود تابعی رو که برای اضافه کردن یک سطر به جدول رو ساختیم با همون مقادیر ارسالیمون فراخونی می کنیم و در غیر اینصورت یک پیام نمایش می دیم که نشان دهنده یک مشکل در اجرای مراحل کاریست که میشه چک های بیشتر دقیق ترش کرد .
  پاسخ


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان