المشروع - كل ما يتعلق بتطوير المواقع http://www.almashroo.com/

الأجاكس تقنية جديدة والتي أخذت الويب إلى مرحلة جديدة كليا والتي تسمى في الوقت الحالي بالويب 2.0، فما هي الأجاكس؟
الأجاكس AJAX وهي بالعادة تكتب كاملة بالحروف اللاتينية الكبيرة لأنها تعتبر اختصار لكلمة (Asynchronous Javascript And XML).

والأجاكس كانت موجودة منذ زمن، ولكن لم يعرف أحد أهميتها أو كيفية استخدامها بالشكل الصحيح حتى قامت شركة Google بتوظيفها في برامجها الجديدة مثل Gmail و Google maps، وتتيح الأجاكس لمطوري الويب بإضافة حيوية وديناميكية للموقع كإضافة معلومات حية كأسعار البورصة، من دون الحاجة لإعادة تحميل الصفحات كلما أراد المستخدم أن يطلب معلومة من Server-Side أوعن طريق الخادم، فلغات برمجة الويب تنقسم إلى قسمان Client-Side وهي كالجافاسكربت وVBScript. وقسم يسمى Server-Side وهي مثل php و asp، و تقنية الأجاكس في الأساس هي استخدام للغة الجافاسكربت وهي لغة Client-Side لطلب أي معلومة موجودة على Server-Side من دون الحاجة لطلب كامل الصفحة.

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

ستجد تحت الكود الكامل بالجافاسكربت لعمل بسيط بالأجاكس و XMLHttpRequest وسأشرح كل جزء منه على حده.

function createRequestObject() {
	var req;
	if(window.XMLHttpRequest){
		// لمتصفحات الفايرفروكس والأوبرا والسفاري
		req = new XMLHttpRequest();
	} else if(window.ActiveXObject) {
		// للإنترنت اكسبلورر النسخة الخامسة فما فوق
		req = new ActiveXObject("Microsoft.XMLHTTP");
	} else {
		// نستخدم دالة ال alert لكي نظهر حصول خطأ وغالبا يكون الخطأ لمستخدمي نسخ قديمة من المتصفحات
		alert('حصل خطأ في طلب الصفحة...الرجاء المحاولة مرة أخرى وإذا لم تنفع جرب أن تنزل نسخة جديدة من المتصفح');
	}
	return req;
}
// نطلب الدالة createRequestObject() ونعطي الناتج للمتغير http
var http = createRequestObject();

function sendRequestGet(act) {
	// نطلب صفحة ال php
	http.open('get', 'myphpscript.php?act='+act, true);
	// عندما ننتهي من طلب الصفحة نطلب دالة handleResponse
	http.onreadystatechange = handleResponse;
	// الآنتهاء من الطلب
	http.send(null);
}

function handleResponse() {
	if(http.readyState == 4 && http.status == 200){
		// نعطي المتغير response النص اللذي رجع من طلبنا لصفحة ال php
		var response = http.responseText;

		if(response) {
			// نحدث محتوى ال div والتي اسمها ajaxTest
			document.getElementById("ajaxTest").innerHTML = response;
		}
	}
}

البداية

function createRequestObject() {
	var req;
	if(window.XMLHttpRequest){
		// لمتصفحات الفايرفروكس والأوبرا والسفاري
		req = new XMLHttpRequest();
	} else if(window.ActiveXObject) {
		// للإنترنت اكسبلورر النسخة الخامسة فما فوق
		req = new ActiveXObject("Microsoft.XMLHTTP");
	} else {
		// نستخدم دالة ال alert لكي نظهر حصول خطأ وغالبا يكون الخطأ لمستخدمي نسخ قديمة من المتصفحات
		alert('حصل خطأ في طلب الصفحة...الرجاء المحاولة مرة أخرى وإذا لم تنفع جرب أن تنزل نسخة جديدة من المتصفح');
	}
	return req;
}

هذا الكود سهل وهي عبارة عن دالة اسمها createRequestObject وهي تتحق من نوع المتصفح لديك وأذا ماكن يدعم XMLHttpRequest أو لا. أولاً عرفنا متغير جديد اسمه req وهو خالي ومن ثم نتحقق دالة window.XMLHttpRequest إذا أرجع لنا True فإن المتصفح سيكون فايرفوكس أو أوبرا أو سفاري، لذلك سنعطي المتغير req اللذي عرفناه في البداية بداية جديدة XMLHttpRequest() وهي دالة متعرفة سابقا في هذه المتصفحات للتعامل مع الأجاكس وXMLHttpRequest، أما إذا كان التحقق الأول فشل ونجح التحقق الثاني وهو window.ActiveXObject فسيكون المتصفح انترنت اكسبلورر وسنتخدم دالة متعرفة في هذا المتصفح اسمها ActiveXObject(”Microsoft.XMLHTTP”) وسنعطيها للمتغير req.

إذا فشلت كل المحأولات، إذا المتصفح إما يكون قديما أو أنه لايدعم XMLHttpRequest، وفي آخر الدالة نرجع مايحتويه المتغير req.

وبعد ذلك نعرف متغير جديد ونسميه http ونعطيه نسخه من الدالة createRequestObject وسيحتوي جميع الخصائص XMLHttpRequest.

var http = createRequestObject();

وكما تعرفون هناك طريقتان لطلب المعلومات من Server-Side، وهما باستخدام طريقة GET وطريقة POST وطلب المعلومات باستخدام الأجاكس يختلف قليلا باختلاف طريقة الطلب وسأشرح هنا الطريقتين.

طلب المعلومات باستخدام طريقة GET

انتهينا من تعريف المتغير الجديد والذي سميناه http واعطيناه خصائص XMLHttpRequest، الآن سنطلب المعلومات بطريقة GET من صفحة php.

function sendRequestGet(act) {
	// نطلب صفحة ال php
	http.open('get', 'myphpscript.php?act='+act, true);
	// عندما ننتهي من طلب الصفحة نطلب دالة handleResponse
	http.onreadystatechange = handleResponse;
	// الآنتهاء من الطلب
	http.send(null);
}

ولايهم اللغة المستخدمة في Server-Side، يمكن أن تكون php أو asp، لايهم لأنهما تعتبران لغات Server-Side كما أسلفنا.

هنا ترى دالتان يجب عليك فهمها وهما من خصائص XMLHttpRequest، هما open() و send()، في أول سطر نطلب الصفحة باستخدام طريقة get وهي تكون أول متغير في الدالة open() وأول متغير يكون نوع طلب الصفحة كما سنرى في القسم التالي والمتغير الثاني في الدالة يكون الصفحة المطلوبة وفي حالتنا هذه نطلب صفحة اسمها myphpscript.php وتأخذ متغير اسمه act ومتغير act نأخذه بالجافاسكربت ونضعه عندما نطلب الصفحة. ولأننا نستخدم طريقة GET فهي تأخذ المتغيرات عن طريق شريط التصفح لذلك نطلب دالة send() ونعطيها الأمر null، ولكن طريقة POST لاتأخذ متغيراتها عن طريق شريط التصفح لذلك تتغير قليلا عندما نطلب المعلومات، أما المتغير الثالث للداله فهو لاستخدام الطلب الغير تزامني أو asynchronous للأجاكس ونعطيه true، والسطر:

http.onreadystatechange = handleResponse;

هي تقول XMLHttpRequest انه عندما تنتهي من طلب المعلومة وعند الاستعداد اطلب الدالة handleResponse() وهي دالة سنأتي لذكرها لاحقا.

طلب المعلومات باستخدام طريقة POST

function sendRequestPost(act) {
	// نطلب صفحة ال php
	http.open('post', 'myphpscript.php', true);
	http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	// عندما ننتهي من طلب الصفحة نطلب دالة handleResponse
	http.onreadystatechange = handleResponse;
	// الآنتهاء من الطلب
	http.send('act='+act);
}

ستلاحظ التشابه إلى حد كبير بين الطريقتين POST و GET، ولكن الاختلاف ستلاحظه في الدالة send() وهي أننا نرسل المتغيرات التي نريدها عن طريقها بدلا من إطفائها عن طريق null وهذه هي أهم خطوة، وفي السطر:

http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

وهذا السطر مهم إذا كنت تستخدم طريقة POST في طلب المعلومات عن طريق forms.

اللمسات الأخيرة

function handleResponse() {
	if(http.readyState == 4 && http.status == 200){
		// نعطي المتغير response النص اللذي رجع من طلبنا لصفحة ال php
		var response = http.responseText;
		if(response) {
			// نحدث محتوى ال div والتي اسمها ajaxTest
			document.getElementById("ajaxTest").innerHTML = response;
		}
	}
}

أول ما نتحقق عندما تطلب هذه الدالة هي http.readyState و http.status وسأشرح الحالات المختلفة لكل منهما

هناك 5 أنواع من حالات الأستعداد لكائن XMLHttpRequest وللعلم أن الحالة الأخيرة هي الأهم بينهم:

• 0: لم يتم البدء
• 1: بدء عملية الاتصال
• 2: تم استلام الطلب
• 3: جاري تحليل الطلب والرد عليه
• 4: تم الآنتهاء

أما http.status فكما تعرفون هناك حالات كثيرة عندما تطلب المعلومات ولعل من أشهرها حالة 404 وهي خطأ عدم وجود الصفحة على الخادم، أما 200 فأن الصفحة موجودة وتم استلامها بنجاح ولمعرفة الحالات المتنوعة عند طلب الصفحة الرجاء زيارة الرابط التالي:
http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

وعندما بتم التأكد من كل شيء بحالة سليمة نسمي متغير جديد باسم response ونعطيه http.responseText وهذا هو الرد من طلبنا لصفحة php أي أنه أي نص يتم طبعه على الصفحة عن الآنتهاء من طلبها، ويجب التنويه هنا انه هناك نوعان من الردود، responseText و responseXML ولكننا هنا نأخذ فقط النص الذي رجع إلينا من طلب صفحة php في السابق، وربما سأشرح كيفية التعامل مع الردود بالXML لاحقا.

وبعد هذا وعندما يتم التأكد أن المتغير response يحمل نصا وليس فارغا يتم أخذ هذا النص ووضعه في Div التي اسمها ajaxTest.

نهاية الدرس ورؤية الأمثلة

وقد حملت بعض الأمثلة لرؤية كيفية عمل الأجاكس وللإستفادة المطلقة من هذا الدرس.

المثال الأول: استخدام طريقة GET
http://www.almashroo.com/examples/files/ajaxexamples/demoGet.html

المثال الثاني: استخدام طريقة POST
http://www.almashroo.com/examples/files/ajaxexamples/demoPost.html

جميع الأمثلة بملف مضغوط.

وبهذا تم الآنتهاء من أول درس في الأجاكس و XMLHttpRequest وأتمنى من الله أن أكون قد وفقت في هذا الدرس وتكونوا قد استفدتم منه.