الموضوع: (أول درس في القسم) مقدمة في الأجاكس والXMLHttpRequest

السلام عليكم
حقيقة بارك الله فيك والله يكثر من امثالك درس ممتاز جدا جدا

ال AJAX خاصية بالفعل روعة طبعا تعرفنا عليها بعود فيه الفضل الك اخي العزيز Bo3oof

اما لدي بعض الاستفسارات وياريت ما يكوت عندك مانع في الاجابه عنها لتوضح عندي الصورة اكثر
في الكود في موقعك كاتب انت
var http = createRequestObject();

انا اعلرف انك قمت بانشاء متغير اسمة http ولاكن السؤال لمذا قمت بتعينه الى الدالة الي قبلو؟؟؟ او بالاحرة ماذا تعني ال new XMLHttpRequest(); او new ActiveXObject("Microsoft.XMLHTTP");


وايضا سؤال اخر
عند وضع http.open ال http.open هي نفس ال http الي عرفناها كمتغير سابق اي بامكاننا عمل elkaser.open في حالة تحديد var elkaser = createRequestObject(); ????

وايضا ماذا عمل هذه الاوامر (وهل هي دوالات مبنية في لغة البرمجة؟)
document.getElementById("ajaxTest");
http.responseText
ajaxTest.innerHTML

وشكرا جزيلا وان شاء الله ما تكون اسألتي قي طالت ولاكن الهدف هو اتقان ما تعلمناه

وبارك الله فيك
وشكرا جزيلا

وعليكم السلام ورحمة الله وبركاته أخي elkaser
حياك الله

أما بالنسبة للكود

كود PHP:

var http = createRequestObject(); 


فهو لتعيين كائن الXMLHttpRequest واللذي هو في موزيلا وباقي المتصفحات يسمى بXMLHttpRequest أما في حالة مايكروسوفت انترنت اكسبلورر فهو كائن مشتق من الكائن الأساسيActiveX ويسمى بMicrosoft.XMLHTTP ....
اختلفت المسميات والعمل واحد وهذه الطريقة لعمل الأجاكس على أغلب المتصفحات

أما بالنسبة لسؤالك الثاني فالأجابة بنعم، لأنك لو تلاحظ أخي الكريم نحن طلبنا الدالة createRequestObject() وأخذنا الكائن الذي رجع إلينا ووضعناه في متغير اسمه http وكنا نستطيع أن نضعه في أي متغير كان بأي اسم نريد لأن برمجة الOOP لا تعتمد على المسميات ولكن على الخواص، فنحن عندما أخذنا كائن AJAX مهما كان أما Microsoft.XMLHTTP أو XMLHttpRequest فخواصهم ثابتة وعملهم واحد. وهذه برمجة الOOP أو برمجة الClasses في الجافاسكربت، وبهذه الطريقة يكون تعاملنا وطلبنا القادم عن طريق متغير http اللذي سيحتوي على كل خواص الأجاكس أو XMLHttpRequest مهما كان نوع المتصفح.

أما بالنسبة لسؤالك الأخير فسأشرح كل دالة وعملها
دالة

كود PHP:

document.getElementById("ajaxTest"); 


هي من خواص DOM اختصارا لكلمة Document Object Model، وعمل هذا الدالة هي البحث عن أي عنصر في صفحة الHTML ويحمل ID تساوي ajaxTest والاتيان به أو إسناده إلى متغير
وإليك هذا الشرح عن الفرق بين DOM وDHTML والجافاسكربت
http://www.devpedia.org/articles/index.php?p=60

خاصية

كود PHP:

http.responseText 


فهي كما ذكرت آنفا من خواص كائن XMLHttpRequest التي اسندت مهامها إلى المتغير http وهذه الخاصية تأتي بالرد على الطلب المقدم من http.open الذي أعطاه السيرفر على شكل نصي.

أما خاصية

كود PHP:

.innerHTML 


فهي يمكن إسنادها لأي عنصر في صفحة الHTML ولكني لا أحب أن أستخدمها كثيرا لمخالفتها المعايير القياسية للجافاسكربت، ولكن لسهولتها ولتقريب فهم المثال استخدمتها، وميزاتها هي جلب كل شيء يحتويه هذا العنصر من نص أو عناصر HTML تكون تحته. وعندما استخدمتها في المثال ستلاحظ أن أي شيء كان بداخل العنصر div والذي له ID يساوي ajaxTest قد محي وتم استبداله بالنص الذي رجع الينا من الXMLHttpRequest ألا وهي الresponseText

أتمنى أن أكون قد وفقت في ايضاح المعلومة وإذا كان لديك المزيد من الاستفسارات اطرحها وسنكون في خدمتك

السلام عليكم
بارك الله فيك يا طيب صحيح انك استاذ على حق وحقيق
بارك الله فيك اخي

وياريت توافينا بدروس ثانية للتقوية بهذه الخاصية..................

ملاحظة اهل هذا كود javascript او كود AJAX ??

اقصد كله

الف تحية لك اخي الفاضل

وفيك بارك أخي العزيز وما انا الا بطالب علم ولست أستاذا
وان شاء الله تعالى سأحاول في الأيام القليلة المقبلة طرح دروس جديدة في مجال الجافاسكربت

المشاركة الأصلية كتبت بواسطة Bo3oof

تقنية الأجاكس في الأساس هي استخدام للغة الجافاسكربت وهي لغة Client-Side لطلب أي معلومة موجودة على الServer-Side من دون الحاجة لطلب كامل الصفحة.

وهناك اعتقاد خاطئ عند بعض الناس أن الأجاكس هي لغة جديدة وصعبة ويجب تعلمها من الصفر، والصحيح أن الأجاكس هي تقنية تستخدم لغة الجافاسكربت بالكامل لطلب المعلومات، فإذا كنت تعرف القليل عن الجافاسكربت أو حتى إن لم تكن تعرف ولكن لديك خبرة في اللغات المشتقة من لغة الC كالphp فسيكون تعلم الجافاسكربت بالنسبة لك شيء سهل وبسيط جدا وسأحاول بإذن الله شرح هذه التقنية الجميلة بسهولة بحيث أنك تتقنها عند انتهاءك من قراءة هذا الدرس.

فاللغة المستخدمة جافاسكربت ولكن كل لغة ولها دوالها وكائناتها ومن كائنات هذه اللغة كائن XMLHttpRequest وهو العمود الفقري لهذه التقنية AJAX

السلام عليكم
اخي الكريم احاول استخدام هذه الخاصية ما بين ال drop menu وقواعد البيانات ولاكنها لم تعمل

يرجا المساعدة

المطلوب عو عرض بيانات في قائمة مسنلدة <select> بعد تحديد ال id من قبل <select> سابق

الكود الذي عملته مرفق يرجا المساعدة (والكود بفسر الفكرة اكثر)

بارك الله فيك

اخي Bo3oof يرجا المساعدة!!!!!!!!!!

معقول ما حد عارف يساعدني؟؟؟؟!!!!!!!!!!!!

ولا المشكلة مش واضحة؟؟!!

هذا توضيح للمشكلة لعلي اجد حل

لدينا قائمتين مسندلتين (لنقول ان الاولى اسمها style والثانية اسمها temp

الان يكون في القائمة style اسماء استايلات وعند اختيار اسم استايل من القائمة style يتم وضع جميع القوالب الخاصة في ال style الذي قمنا باختياره...........

ملاحظة ال style موجودات في جدول خاص في قاعدة البيانات والقوالب موجودات في جدول اخر في قاعدة البيانات

يعني عندما نريد عرض ال templates نستخدم استعلام شبيه بالتالي

كود:

$sel=mysql_query("SELECT name, id FROM templates WHERE styleid='رقم الاستايل الذي قمنا باختياره من القائمة الاولى'  ORDER BY id ASC ");

وهنا نعرض القوالب على الشكل التالي مثلا

كود:

<select name='templates' size='20'>
<option value='0' >اختر احد القوالب من هنا</option>

<?

while ($row=mysql_fetch_array($sel))
  {

print "<option value='$row[id]' >$row[name]</option>";
  }

?>

</select>

انشاء الله المشكلة وضحت ياريت حد يساعدني في حل

بارك الله فيكم

نعم وضحت المشكلة وآسف على الإطالة

بالنسبة للكود الذي تم ارفاقه سابقا ومقارنته بما تريد فأعتقد أن أنسب حل لك هو استخدام جافاسكربت بدون أجاكس، ولماذا تجهد نفسك بالأجاكس والعملية بسيطة مجرد جافاسكربت وأسماء styles وما يقابلها من templates وعندما يتم اختيار قائمة من styles تظهر قوائم الtemplates باستخدام مصفوفات ووضعها بين وسوم select...

ولكن اذا كنت تريد نفس العملية بالأجاكس ومن قرأتي للكود المرفق فالمشكلة أخي الكريم أنك أولا من ناحية الأداء وسهولة التعديل أفضل أنك تفصل البرمجة عن التصميم، حيث يكون طلب الأجاكس من الصفحة الرئيسية يذهب إلى الكود البرمجي ويأخذ منه الجواب ويضعه في الصفحة الرئيسية مرة أخرى...

الآن نعود إلى الكود فلما تطلب المعلومات من نفس الصفحة راح يرجعلك جواب بالصفحة كاملة مرة أخرى مع ما أراد المستخدم اختياره من القوائم المنسدلة ومن ضمن هذا الجواب وسوم

كود HTML:

<html>
<style>
div#ajaxTest {

}
</style>

...الخ
وأنت تحاول وضع كل هذا داخل وسم div

أتمنى منك أخي مراجعة برمجة الphp وفصل طلب المعلومات من الصفحة الرئيسية، وبذلك ستسهل عليك عملية إيجاد المشاكل

السلام عليكم
شكرا اخي العزيز

طيب ممكن كود جافا ليقوم بعمل المطلوب ؟؟؟ انا لا اعرف الكثير عن الجافا سكربت صراحة ولاكني اردت عمل مثل ما وضحت قبل ففكرت ان الحل الوحيد هو الاجاكس

ياريت يا اخي تفيدني في كود الجافا لعمل المطلوب وشكرا

تفضل أخي الكريم، اعمل ملف نصي جديد وخزنه UTF-8 حتى يعمل معاك الملف بشكل صحيح

كود 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" xml:lang="ar" lang="ar" dir="rtl">
<head profile="http://gmpg.org/xfn/11">
<title>عرض styles + templates</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
<!--//--><![CDATA[//><!--
var styles = new Array();
styles[0] = new Array
    (
    	'Template 1',
    	'1',
    	'Template 2',
    	'2'
    );
styles[1] = new Array
    (
    	'Template 3',
    	'3',
    	'Template 4',
    	'4'
    );
styles[2] = new Array
    (
    	'Template 5',
    	'5',
    	'Template 6',
    	'6',
    	'Template 7',
    	'7'
    );

function populate()
{
	var box = document.forms[0].styles;
	var number = box.options[box.selectedIndex].value;
	if (!number) return;
	var list = styles[number];
	var box2 = document.forms[0].templates;
	box2.options.length = 0;
	for(i=0;i<list.length;i+=2)
	{
        var selected = ((i/2) == 0) ? true : false;
		box2.options[i/2] = new Option(list[i],list[i+1],selected);
	}
}
//--><!]]>
</script>
</head>
<body onload="populate();">
<form action="">
  <fieldset>
  <select name="styles" tabindex="1" onchange="populate()">
      <option value="0" selected="selected">ستايل 1</option>
      <option value="1">ستايل 2</option>
      <option value="2">ستايل 3</option>
  </select>
  <select name="templates" tabindex="2"><option></option></select>
  <input type="submit" value="عدل" tabindex="3" />
  </fieldset>
</form>
</body>
</html>

السلام عليكم
اخي العزيزي بارك الله فيك
ولاكن ماذا تقصد بملف UTF-8 ؟؟؟؟؟؟؟

وايضا اخي لم افهم الكثير من الكود ولاكن اريد ان اوضح ان اسماء الاستايلات واسماء القوالب موجودة داخل قواعد بيانات !!! يبدو انك حددتها يدوي!!!!

وشكرا

أقصد ترميز الملف UTF-8 لأن هذا هو الترميز العالمي بدلا من Windows-1256، ويمكنك التخزين باستخدام هذا الترميز عندما تريد أن تحفظ أي ملف نصي جديد على Notepad في نظام windows من خانة Encoding في الأسفل

نعم تم تحديد الأسماء يدويا لأني اعتقدت أنها متغيرات ثابتة، وهي أسرع من طلبها وتخزينها في قاعدة البيانات، ولكن إذا كنت تريد تخزينها في قاعدة بيانات فيجب عليك استخدام AJAX لطلب المعلومات، فنفس ما ذكرت لك سابقا إذا الرجاء فصل طلب المعلومات من الصفحة الأساسية ومراجعة برمجتك PHP

شرح ولا اروع ....

بصراحة ابهرت بالأجاكس خصوصا فى خدمات جوجل الرائعه....

و لقيت موضوع الجميل....

و فقك الله

السلام عليكم

في البداية اشكر سوالف على ماتقدمه دائما وعلى هذه القسم الرائع والمفيد لمواكبة كل جديد

اخ Bo3oof

مهما كتبت مدحا في ابداعاتك ولمساتك في موقعك الجديد فهو قليل على محتواه الذي به كل ماهو جديد ومميز في عالم التقنية الجديدة

بعد اطلاعي على الدرس ومشاهدة موقعك خطر لي استفسار حول امكانية طلب نتائج صفحة php مثلا موجودة على سيرفر آخر اي عند الإجراء
http.open('get', 'myphpscript.php?act='+act, true);
هل من الممكن انا نضع http://www.google.com/anypage.php بدلا من الصفحة الموجودة لدينا على نفس السيرفر myphpscript.php
وهل هي الطريقة التي استخدمتها في جلب الأخبار من عدة مواقع في seamler ام انك مستخدم للخدمة ال rss من هذه المواقع

في الحقيقة لدي كثير من الاستفسارات والتساؤلات لعدم اكتمال الأفكار جميعها لدي واتمنى ان تحتمل أسئلتي وتصلح لي ما قد أخطئ به في المصطلحات او المفاهيم ولك جزيل الشكر

والشكر أيضا للأخ المبدع العربي

تمنياتي للجميع بالتوفيق

المشاركة الأصلية كتبت بواسطة abdo_syria

بعد اطلاعي على الدرس ومشاهدة موقعك خطر لي استفسار حول امكانية طلب نتائج صفحة php مثلا موجودة على سيرفر آخر اي عند الإجراء
http.open('get', 'myphpscript.php?act='+act, true);
هل من الممكن انا نضع http://www.google.com/anypage.php بدلا من الصفحة الموجودة لدينا على نفس السيرفر myphpscript.php

وعليكم السلام ورحمة الله وبركاته
شكرا لك على هذا الكلام الطيب في مقدمة الموضوع

للأسف ﻻ يمكن هذا والسبب أمني، لان هذه الطريقة جدا خطيرة وخصوصا في تحف مايكروسوفت التي تبدعنا بين فترة وفترة بثغراتها XSS التي من الممكن أن أطلب الكوكي أو الحلوة الرقمية لمعلومات بريدك من موقعي، واذا استخدمت فيها الأجاكس بحيث أعطيك الرابط الملغوم فستكون المصيبة أعظم، أتمنى أن تكون الصورة قد وضحت

المشاركة الأصلية كتبت بواسطة abdo_syria

وهل هي الطريقة التي استخدمتها في جلب الأخبار من عدة مواقع في seamler ام انك مستخدم للخدمة ال rss من هذه المواقع

أما بالنسبة لسيملر وللتغلب على هذه المشكلة، قمت بوضع ملف مبرمج Server Side ك php أو asp ومن خلاله أطلب الصفحة الخاصة بالrss للخدمة وأقوم بعرضها مرة أخرى ويخدم هذا الملف كproxy لملفات الخلاصات والتأكد من صلاحيتها في نفس الوقت

المشاركة الأصلية كتبت بواسطة abdo_syria

في الحقيقة لدي كثير من الاستفسارات والتساؤلات لعدم اكتمال الأفكار جميعها لدي واتمنى ان تحتمل أسئلتي وتصلح لي ما قد أخطئ به في المصطلحات او المفاهيم ولك جزيل الشكر

والشكر أيضا للأخ المبدع العربي

تمنياتي للجميع بالتوفيق

كل استفساراتك وأسئلتك مرحب بها