اگر با تکنیک برنامه نویسی آژاکس AJAX آشنایی ندارید، پیشنهاد می شود ابتدا مطلب "آموزش آژاکس AJAX مقدماتی" را مطالعه نمائید، در این مطلب به بررسی
مثالی از آژاکس به نام "AJAX and responseXML" پرداخته خواهد شد.
مثال آژاکس - AJAX and responseXML
responseText پاسخ HTTP را بصورت یک رشته و responseXML پاسخ را بصورت یک XML بر می گرداند.
خاصیت ResponseXML یک شیء سند XML را بر می گرداند، که می تواند با استفاده از DOM تجزیه و بررسی شود.
مثال زیر به شما نشان می دهد که یک صفحه وب چطور می تواند اطلاعات را از یک پایگاه داده با استفاده از تکنیک آژاکس بگیرید. داده انتخاب شده از پایگاه داده این بار به سند XML تبدیل می شود، سپس از DOM استفاده خواهد تا مقادیر را جهت نمایش استخراج کند.
این مثال با وجود تفاوت های زیادی شبیه مثال "AJAX and MySQL" می باشد: در این مثال ما داده ها را با تابع responseXML بصورت XML از صفحه PHP می گیریم.
دریافت پاسخ بصورت یک سند XML به ما این اجازه را می دهد که به جای اینکه فقط یک خروجی HTML دریافت و نمایش دهیم، این صفحه را به دفعات به روز رسانی کنیم.
در این مثال ما به دفعات عنصر <span> را با اطلاعاتی که از پایگاه داده دریافت کرده ایم به روز رسانی می کنیم.
توضیح مثال – پایگاه داده MySQL
جدول پایگاه داده ایی که ما در این مثال استفاده خواهیم کرد نظیر این است:
|
id |
FirstName |
LastName |
Age |
Hometown |
Job |
|
1 |
Peter |
Griffin |
41 |
Quahog |
Brewery |
|
2 |
Lois |
Griffin |
40 |
Newport |
Piano Teacher |
|
3 |
Joseph |
Swanson |
39 |
Quahog |
Police Officer |
|
4 |
Glenn |
Quagmire |
41 |
Quahog |
Pilot |
توضیح مثال – صفحه HTML
صفحه HTML حاوی یک فرم HTML، چندین عنصر <span> و یک لینک خارجی به فایل جاوا اسکریپت است:
-
فایل جاوا اسکریپت
-
فرم HTML
- عنصر span
<html>
<head>
<script type="text/javascript" src="/responsexml.js"></script>
</head>
<body>
<form>
Select a User:
<select name="users" onchange="showUser(this.value)">
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<h2><span id="firstname"></span> <span id="lastname"></span></h2>
<span id="job"></span>
<div style="text-align: right">
<span id="age_text"></span>
<span id="age"></span>
<span id="hometown_text"></span>
<span id="hometown"></span>
</div>
</body>
</html>
فرم HTML شامل یک کادر بازشو به نام "users"، با شناسه و نام جهت انتخاب از جدول پایگاه داده است.
عناصر <span> یک نگهدارنده برای مقادیری است که دریافت خواهند شد.
هنگامیکه یک کاربر انتخاب می شود، یک تابع به نام "showUser" اجرا می گردد (که توسط رویداد "onchange" تحریک می شود).
به عبارت دیگر: هر زمان که مقدار کادر بازشو تغییر یابد، تابع showUser فراخوانی می شود، و خروجی را در عناصر <span> نمایش می دهد.
توضیح مثال – کد جاوا اسکریپت
کد جاوا اسکریپت در فایلی به نام "responsexml.js" ذخیره شده است:
var xmlhttp;
function showUser(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="responsexml.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
xmlDoc=xmlhttp.responseXML;
document.getElementById("firstname").innerHTML=
xmlDoc.getElementsByTagName("firstname")[0].childNodes[0].nodeValue;
document.getElementById("lastname").innerHTML=
xmlDoc.getElementsByTagName("lastname")[0].childNodes[0].nodeValue;
document.getElementById("job").innerHTML=
xmlDoc.getElementsByTagName("job")[0].childNodes[0].nodeValue;
document.getElementById("age_text").innerHTML="Age: ";
document.getElementById("age").innerHTML=
xmlDoc.getElementsByTagName("age")[0].childNodes[0].nodeValue;
document.getElementById("hometown_text").innerHTML="<br/>From: ";
document.getElementById("hometown").innerHTML=
xmlDoc.getElementsByTagName("hometown")[0].childNodes[0].nodeValue;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
توابع stateChanged و GetXmlHttpObject همانند مثال پیشنهاد آژاکس می باشند برای توضیح این توابع به آن رجوع کنید.
تابع stateChanged
وقتیکه یک گزینه از کادر بازشو انتخاب می گردد، تابع مراحل زیر را اجرا می کند:
1- متغیر xmlDoc را با استفاده از تابع responseXML به صورت یک سند XML تنظیم می کند،
2- داده را از سند XML استخراج می کند، و در عنصر <span> متناظر با آن قرار می دهد.
توضیح مثال – صفحه PHP
صفحه PHP که توسط جاوا اسکریپت فراخوانی می شود "responsexml.php" نام دارد.
اسکریپت PHP یک پرس و جوی SQL بروی یک پایگاه داده MySQL اجرا می کند، و نتایح را بصورت یک سند XML بر می گرداند:
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM user WHERE id = ".$q."";
$result = mysql_query($sql);
header('Content-type: text/xml');
echo '<?xml version="1.0" encoding="ISO-8859-1"?>
<person>';
while($row = mysql_fetch_array($result))
{
echo "<firstname>" . $row['FirstName'] . "</firstname>";
echo "<lastname>" . $row['LastName'] . "</lastname>";
echo "<age>" . $row['Age'] . "</age>";
echo "<hometown>" . $row['Hometown'] . "</hometown>";
echo "<job>" . $row['Job'] . "</job>";
}
echo "</person>";
mysql_close($con);
?>
وقتیکه پرس و جو از جاوا اسکریپت به صفحه PHP ارسال شد، مراحل زیر اتفاق می افتد:
1- متغیر q$ با داده ایی که توسط پارامتر q ارسال شده است تنظیم می گردد.
2- یک اتصال به پایگاه داده MySQL باز می شود.
3- "user" با شناسه (id) مشخص شده پیدا می شود.
4- داده بصورت یک سند XML به خروجی ارسال می شود.
منبع مطلب: w3schools.com
نظرات
فقط می دونم از کد:
می بایست استفاده کرد اما محتویات test.php نمایان نمی شود
دستتون درد نكنه
لطفا ادامه بدييين
لطفا ادامه بدید
من آژاکس رو با همین 4 تا تمرین ساده شما یاد گرفتم
دست شما درد نکنه ممنونم از شما
ان شا اله چیزای خیلی بیشتر و بزرگتری یاد بگیرید