آموزش Ajax

سیده آمین ارمان · 2017/03/15

کاربرد Ajax در PHP
در این بخش از مقالات طراحی سایت و آموزش Ajax می خواهیم کاربرد Ajax در PHP را برای شما توضیح دهیم .
با استفاده از مثالی می خواهیم کاربرد Ajax در PHP را برای شما شرح دهیم . در این مثال کاربر کاراکتری را درون آن تایپ نماید ، این کنترل لیستی از آیتم های پیشنهادی که با آن کاراکتر شروع می شوند ، را به کاربر نمایش می دهد .
در کد تابع ( ) showHint هنگامی که کاربر در کادر متن موجود در صفحه PHP تایپ می کند ، به وسیله رویداد ( ) onkeyup آن ، تابع ( ) showHint اجرا می شود .

function showHint(str)
{
var xmlhttp; // Ajax ایجاد یک متغیر برای ذخیره کردن شی
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{ // IE7+, Firefox, Chrome, Opera, Safari کد برای مرورگرهای
xmlhttp=new XMLHttpRequest();
}
else
{ // IE6, IE5 کد برای مرورگرهای
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send( );
}

در دستور بالا اگر کادر متن خالی باشد ( str.length==0 ) ، تابع مقدار عنصر txtHint موجود بر روی صفحه را پاک کرده و از تابع خارج می شود همچنین این بخش از کد یک شی XMLHttpRequest را ساخته و عملیات Ajax را آغاز می کند . کد لازم برای پشتیبانی انواع مرورگرها را قرار داده ایم .در دستور بالا کد بررسی می کند که آیا پاسخ درخواست Ajax از سرور برگشته و آماده است یا خیر . سپس در صورت آماده بودن جواب ، مقدار آن را در عنصر txtHint موجود بر روی صفحه قرار می دهد همچنین شی xmlhttp ، را آماده کرده و به وسیله متد GET ، آن را به فایل مورد نظرمان یعنی gethint.php ارسال می کند ومتغیر str به وسیله پارامتر q به صفحه مقصد PHP ارسال شده است ، که بعدا در آن دریافت و استفاده خواهد شد .

سیده آمین ارمان · 2017/03/15

کاربرد Ajax در پایگاه داده
در این قسمت از آموزش Ajax می خواهیم به توضیح کاربرد Ajax در پایگاه داده بپردازیم . برای این کار می خواهیم با ارائه یک مثال عملی و تشریح گام به گام آن ، نحوه استفاده و کار با دستورات Ajax ، برای فراخوانی و دریافت اطلاعات از یک پایگاه داده و سپس نمایش آنها ، بر روی یک صفحه PHP را نمایش دهیم .
در این مثال یک منوی کرکره ای قرار دارد که نام چندین مشتری در آن تعیین شده است . کاربر با انتخاب نام هر کدام از مشتریان ، به اطلاعات آن دسترسی پیدا خواهد کرد .
هنگامی که کاربر گزینه ای را در منوی کرکره ای انتخاب می کند ، مجموعه ای از دستورات Ajax و PHP اجرا شده و در پس زمینه صفحه ، به پایگاه داده متصل می شوند . سپس اطلاعات درخواستی را دریافت کرده و پس از انتقال به صفحه در بخش مورد نظر ، به روز رسانی می نماید . برای اطلاعات بیشتر، در این بخش از مقالات طراحی سایت با ما همراه باشید.

کد فایل html و تابع ( ) showUser :

هنگامی که کاربر گزینه ای را از منوی کرکره ای بر روی صفحه انتخاب می کند ، رویداد ( ) onchnage کنترل اجرا شده و تابع ( ) showUser را فراخوانی می کند . این رویداد مقدار انتخاب شده در کنترل را به وسیله دستور this.value به پارامتر str در تابع ارسال می کند ، تا به تابع اعلام کند ، کاربر کدام گزینه را انتخاب کرده است .
جدول زیر ، کد فایل HTML و کد تابع ( ) showUser را نمایش می دهد . کد آن را مرور نمایید . سپس به توضیح گام به گام آن پرداخته ایم .
این پروژه دارای یک فایل PHP نیز می باشد که کد آن ، عملیات اتصال به پایگاه داده را انجام می دهد . برای مشاهده کد آن ، به بخش سوم مثال بروید .

<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari کد لازم برای مرورگر های جدید
xmlhttp = new XMLHttpRequest();
}
else { // IE6, IE5 کد برای مرورگرهای قدیمی
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function ( ) {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "getuser.php?q=" + str, true);
xmlhttp.send ( );
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Ali</option>
<option value="2">Reza</option>
<option value="3">Mohsen</option>
</select>
</form>
<br>
<div id="txtHint">
<b>اطلاعات مشتری:</b>
</div>
</body>
</html>

توضیح گام به گام کد مثال :

هر یک از بخش های کد مثال که با یک رنگ خاص مشخص شده اند ، را توضیح می دهیم :
√ این بخش کد مثال ، بررسی می کند اگر کادر متن خالی نبوده و کاربر گزینه ای را انتخاب کرده باشد ، ( " "== str ) ، تابع مقدار عنصر txtHint موجود بر روی صفحه را پاک کرده و از تابع خارج می شود .
√ این بخش از کد یک شی XMLHttpRequest را ساخته و عملیات Ajax را آغاز می کند . کد لازم برای پشتیبانی انواع مرورگرها را قرار داده ایم .
√ این بخش از کد ، بررسی می کند که آیا پاسخ درخواست Ajax از سرور برگشته و آماده است یا خیر . سپس در صورت آماده بودن جواب ، مقدار آن را در عنصر txtHint موجود بر روی صفحه قرار می دهد .
√ این بخش از کد ، شی xmlhttp ، را آماده کرده و به وسیله متد GET ، آن را به فایل مورد نظرمان یعنی getuser.php ارسال می کند .
همچنین توجه داشته باشید ، که متغیر str به وسیله پارامتر q به صفحه مقصد PHP ارسال شده است ، که بعدا در آن دریافت و استفاده خواهد شد .
√ فرم HTML موجود بر روی صفحه نیز ، کنترل کرکره ای را نمایش می دهد ، که کاربر می تواند از آن انتخاب نماید .
√ همچنین تگ div با id برابر txtHint ، پاسخ Ajax ارسالی را از سرور دریافت کرده و با یک عملیات به روز رسانی نمایش می دهد .

نمایش و توضیح کد فایل PHP :

این پروژه دارای یک فایل PHP هم می باشد ، که عملیات اتصال و دریافت از پایگاه داده را انجام می دهد .
نام این فایل getuser.php است که دستور Ajax صفحه HTML ، فایل PHP را با پاس دادن متغیر str به آن ، فراخوانی و اجرا می کند .
این صفحه مقدار پارامتر str ، که همان گزینه انتخاب شده در منوی کرکره ای است را دریافت کرده و به پایگاه داده متصل می شود . سپس اطلاعات فرد انتخاب شده را از پایگاه داده استخراج کرده و به صفحه HTML بر می گرداند .
جدول زیر کد قایل PHP مثال را نمایش می دهد . آن را مرور نمایید . به توضیح بخش های مختلف آن پرداخته ایم : ( توضیحات کوتاه با // )

< ?php
$q=$_GET["q"]; // این دستور مقدار پارامتر ارسالی از دستور ای جکس را دریافت می کند
$con = mysql_connect('localhost', 'Developer ' , 'abc123'); // ایج اد ارتباط با پایگاه داده مورد نظر
mysql_select_db("ajax_demo", $con); // انتخاب جدول مورد نظر
$sql="SELECT * FROM user WHERE id = '".$q."'"; // q دریافت اطلاعات از جدول مورد نظر بر مبنای پارامتر
$result = mysql_query($sql); // result ریختن نتیجه عملیات انتخاب اطلاعات از پایگاه داده در متغیر
echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>";
while($row = mysql_fetch_array($result)) // ساخت جدول در خروجی با نتیجه دریافتی از پایگاه داده
{
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con); // قطع ارتباط با پایگاه داده
?>

سیده آمین ارمان · 2017/03/15

کاربرد Ajax در XML
در این قسمت از مقالات طراحی سایت در بخش آموزش Ajax می خواهیم کاربرد Ajax در XML را برای شما بیان کنیم .
با ذکر مثالی می خواهیم نحوه یکار با فایل های xml در Ajax و دریافت اطلاعات از آن ها را نمایش دهیم .کد تابع ( ) loadXMLDoc که عملیات ساخت شی Ajax و دریافت اطلاعات از فایل XML را انجام می دهد ، به صورت زیر است . این تابع پارامتر url را به عنوان آدرس فایل XML در ورودی دریافت می کند . کد آن را مرور نمایید .

loadXMLDoc ( ) <!DOCTYPE html>

<html>
<head>
<script>
function loadXMLDoc(url) { // شروع کد تابع
var xmlhttp; // Ajax ایجاد متغیر لازم برای شی
var txt, x, xx, i; // ایجاد سایر متغیر های لازم برای تابع
if (window.XMLHttpRequest) { // با این دستور ، تابع پشتیبانی مرورگر از ایجکس را می سنجد
xmlhttp = new XMLHttpRequest(); // سپس یک شی جدید ایجکس ایجاد می کند
}
xmlhttp.onreadystatechange = function ( ) {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
txt = "<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
x = xmlhttp.responseXML.documentElement.getElementsByTagName( " CD " ) ;
for (i = 0; i < x.length; i++) {
txt = txt + "<tr>";
xx = x.getElementsByTagName("TITLE");
{
try {
txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er) {
txt = txt + "<td> </td>";
}
}
xx = x.getElementsByTagName("ARTIST");
{
try {
txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er) {
txt = txt + "<td> </td>";
}
}
txt = txt + "</tr>";
}
txt = txt + "</table>";
document.getElementById('txtCDInfo').innerHTML = txt;
}
}
xmlhttp.open("GET", url, true); // باز کردن فایل مقصد و خواندن اطلاعات
xmlhttp.send( );
}
</script>
</head>

<body>
<div id="txtCDInfo">
<button onclick="loadXMLDoc('cd_catalog.xml')"> ها CD مشاهده اطلاعات </button> // دکمه فرمان فراخوانی تابع
</div>
</body>
</html>

آموزش Ajax

سیده آمین ارمان

کاربر نگاه دانلود

پیشنهادات

سیده آمین ارمان

کاربر نگاه دانلود

سیده آمین ارمان

کاربر نگاه دانلود

برخی موضوعات مشابه

چگونه همچون یک برنامه‌نویس اسطوره‌ای،‌ مثل بنز کد بزنیم!

آموزش HEO

آمار انجمن

این صفحه را به اشتراک بگذارید