عندي مثال لكود بالـ AJAX : :nice:
عبارة عن فورم فيه الزيب كود وهو يطلع لك المدينة والولاية ويعرضها مباشرة دون أن تظطر إلى كتابة الزيب والمدينة والولاية.
من موقع
http://www.webpasties.com/xmlHttpRequest
واللي يدخل الصفحة سيجد شرح للكود بالخطوات In Englidh
ملف ajax.html
كود HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>ZIP Code to City and State using XmlHttpRequest</title>
<script language="javascript" type="text/javascript">
//صفحة المعالجة
var url = "getCityState.php?param="; // The server-side script
//التحكم بما يتم استقباله من صفحة PHP
function handleHttpResponse() {
if (http.readyState == 4) {
// Split the comma delimited response into an array
//تقسيم العنصر المستلم إلى مصفوفة
results = http.responseText.split(",");
//العنصر الأول من المصفوفة عبارة عن المدينة
//getElementById('city')تصل إلى العنصر بحسب معرفه
document.getElementById('city').value = results[0];
//العنصر الثاني الولاية
//getElementById('state')تصل إلى العنصر بحسب معرفه
document.getElementById('state').value = results[1];
}
}
//تحديث المدينة والولاية
function updateCityState() {
//أخذ الزيب كود
var zipValue = document.getElementById("zip").value;
//إرسال الزيب كود إلى صفحة المعالجة
http.open("GET",url + escape(zipValue),true);
//بعد إتمام المعالجة التحكم بما تم استلامه من صفحة المعالجة عن طريق الداة السابقة
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
//دالة تصنع كائن XMLHttpRequest
function getHTTPObject() {
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
//نصنع كائن XMLHttpRequest
var http = getHTTPObject(); // We create the HTTP Object
</script>
</head>
<body>
هذه الأكواد من الصفحة <a href="http://www.webpasties.com/xmlHttpRequest">http://www.webpasties.com/xmlHttpRequest</a>
<form action="post">
<p>
عند تغيير القيمة و تغيير مؤشر المتابة عن الخانة سيرسل الزيب الذي كتبته ويعالجهع في صفحة PHP
ثم سيستعلم عن الزيب الذي أدخلته و يضع المدينة والولاية كلٌ في خانته .
يتتبع الجافا الخانات عن طريق معرف لكل واحد .
ZIP code:
<input type="text" size="5" name="zip" id="zip" onblur="updateCityState();" />
</p>
City:
<input type="text" name="city" id="city" />
State:
<input type="text" size="2" name="state" id="state" />
</form>
</body>
</html>
ملف getcitystate.php
كود PHP:
<?php
$result = mysql_connect('localhost','user','passwd');
mysql_select_db('zip');
if ($conn) {
$zipcode = $_GET['param']; //البارامتر عن طريق الجافا وهو الزيب اللي كتبته
$query = "select * from zipcodes where zipcode = '$zipcode'";
$result = mysql_query($query,$conn);
$count = mysql_num_rows($result);
if ($count > 0) {
$city = mysql_result($result,0,'city');
$state = mysql_result($result,0,'state');
}
}
if (isset($city) && isset($state)) {
$return_value = $city . "," . $state;
}
else {
$return_value = "غير موجود".",".$_GET['param']; // Include Zip for debugging purposes
}
echo $return_value; //سترسل عن طريق الجافا
?>
الربط بين ملف الهتمل والبي اتش بي هو مجوعة دالات الجافا اللي فوق.
هذا الكود موجود تطبيقه للي بيجرب في الصفحة :
http://www.webpasties.com/xmlHttpRequest
اذهب للصفحة السابقة وفي آخرها نموذج بدو زر إرسال!
اكتب الزيب 17354 في الخانة
وبعدين غير المؤشر مثلا اضغط TAB
ثم انتظر شوية.
سيظهر لك المدينة والولاية لوحده بدون تحديث أو أي تأخير.
بالمرفقات وضعت الملفين السابقين وملف لقاعدة البيانات حتى يتسنى لكم التكتكة مع الملفات براحتكم.
رد مع اقتباس
