الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

أجاكس قادم جديد الى الويب - تدريب عملي

مغلق
بدأه osmansays في 18 يوليو 2006 · 20 رد · 2,456 مشاهدة · في ASP.NET
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

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

الرائدة في مجال محركات البحث حيث قامت بتطوير موقع البحث والذي لازال

في نسخته التجريبية والمسمى :

Google Suggest

فقد وفرت الشركةخدمة Google Maps باستخدام نفس التقنية

إضافة الى المنافس البريدي القادم بقوة على الساحة GMAIL ....كل هذه الخدمات وفرتها شركة جوجل بهذه التقنية الفريدة .

واذا كان مصطلح Web 2.0 يلوح في الأفق فان من أقوى الداعمين لهذا العالم الجديد من تقنيات الويب هو أجاكس ...

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

عن هذه التقنية باستخدام C# أحب أن اضع الشرح المبسط التالي لكي يسهل على غيري العمل على هذه التقنية وبالتالي أوفر على غيري العناء الذي عانيته .

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

مفهوم التقنية ببساطة (من ناحية فنية برمجية) هي مناداة دوال مكتوبة في الcode behind بلغتي VB.Net أو C# من خلال دوال Java Script واستلام النتائج عن طريق هذه الاداة وبالتالي تقوم جافا سكريبت بعرضها أو عمل التعديلات عليها وبالتالي يتم الاتصال بالملقم من غير حصول اي عملية Post Back .اي هي أشبه بتحميل جزء صغير من الصفحة ...وهنا يكمن السحر .

قبل الاستخدام يجب انزال مكتبة الأداة والتي هي على شكل ملف DLL ومن ثم اضافتها في المشروع على شكل Referince .

بعد ذلك يجب التعديل في ملف web.config :

< configuration >

< system.web >

< httpHandlers >

< add verb = "POST , GET" path = "ajax/*.ashx"
type = "Ajax.PageHandlerFactory , Ajax" / >

< /httpHandlers >

...

< system.web >

الخطوة التالية تسجيل Ajax في الصفحة من خلال :

private void Page_Load(object sender , System.EventArgs e)
{Ajax.Utility.RegisterTypeForAjax(typeof(Webform1)
));

}

حيث أن Webform1 هي اسم الclass الذي نقوم بالعمل عليه (الصفحة) .

بعد ذلك نقوم بكتابة الدالة المراد مناداتها من الجافا سكريبت ولكن يجب وضع السطر هذا قبل كتابتها وهو :

[Ajax.AjaxMethod]

لمثال :

[Ajax.AjaxMethod]
public DataSet GetData(int ID)

{
string query = "SELECT CategoryName FROM Categories where CategoryID = " + ID.ToString();

SqlConnection myConnection = new SqlConnection(GetConnectionString());

SqlDataAdapter ad = new SqlDataAdapter(query , myConnection);

DataSet ds = new DataSet();

ad.Fill(ds , "Categories");

return ds;

}

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

ولكن يجب مراعات أنه عند مناداة هذه الدالة يجب الوصول الى هذا الاداة من خلال الnamespace

والذي غالباً ما يكون اسم المشروع ففي المثال التالي اسم الnamespace هو (اسم المشروع) :UsingAjax

< script language = javascript >
function FillTextBox(Id)
{
UsingAjax.GetData(Id , FillTextBox_CallBack);
}
< /script >

لاحظ أن دالة جافا سكريبت السابقة تقوم بمناداة الدالة

GetDataالمكتوبة في السي شارب وتمرير المعاملات لها , المعامل المرر هو معرف التصنيف ..

سيتبادر الى ذهنك الاسئلة التالية:

1- ما هي :FillTextBox_CallBack؟؟؟؟؟؟

2-كيف اقوم باسترجاع البيانات من الدالة المكتوبة في السي شارب واعرضها على الصفحة ؟

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

3-كيف اقوم بتغيير محتوى أداة ما ولتكن TextBoxمن غير عمل Post Back للصفحة ؟

والاجابات هي :

FillTextBox_CallBack

هي دالة جافا سكريبت أخرى سنقوم بكتابتها و وظيفة هذه الدالة استقبال

القيمة المرجعة من دالة السي شارب وبالتالي تعبئة الأداة الموجودة في الصفحة

من خلال سطر كود جافا سكريبت مما يعني تعبئة الأداة بالبيانات من غير عمل Post Back

للصفحة (أهم امتيازات الجافا سكريبت)...لنلقي نظرة على الدالة :

function FillTextBox_CallBack(response)
{
var ds = response.value;
if(ds! = null && typeof(ds) = = "object" && ds.Tables! = null)
document.getElementById("TextBox1").value = ds.Tables[0].Rows.CategoryName;

}

لنلقي نظرة فاحصة على الكود أعلاه ....سنجد المعامل response وهو عبارة عن كائن object

يحوي القيمة المرجعة من خلال دالة السي شارب وبالتالي سيتم تعبئته بـDataSet المرجعة .

أي بمفهوم أن الدالة FillTextBox تقوم بمناداة دالتي المكتوبة في السي شارب وتمرير المعاملات لها (معرف التصنيف)

وبالتالي يتم تنفيذ الدالة في السي شارب ومن ثم ارجاع القيمة المرجعة الى الدالة FillTextBox_CallBack

أي أن FillTextBox أشبه ببوابة الخروج من كود الجافا سكريبت وFillTextBox_CallBack هي بوابة الرجوع اليها.

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

ولنأخد الطريقة المستخدمة في المثال السابق :

document.getElementById("TextBox1").value = ds.Tables[0].Rows.CategoryName;

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

بقي شيء واحد فقط ؟؟؟؟ وهو كيف اقوم بمناداة هذه الدوال ؟

أو كيف أبدأ الاستفادة من هذه الطريقة؟..

والاجابة تكمن في مناداتك للدالة الجافا سكريبت الاولى حسب رغبتك ....

عند حدوث تغيير في محتوى TextBox1 او عند الضغط على HTML Button ...

وسأترك الخيار في هذا لك .

ملحوظة :

أحب التنويه الى شي هنا هو ان المثال السابق يقوم بارجاع dataset من خلال كود السي شارب

كاملة لا تحوي سوى سجل واحد وهذا عملياً خطا ولكني قمت بوضعه كمثال بسيط لنتعامل مع هذه

التقنية الساحرة , وكان بامكاني استخدام مثال يقوم بارجاع رقم لكني فضلت أن اقوم بارجاع dataset

حتى اوضح للقارئ أن القيمة المرجعة تكون على شكل مكون وبالتالي التعامل معها يكون على هذا الأساس.

أرجو أن تكون أخي القاري إستفدت من هذا الدرس الذي جاء على عجل , وعذراً اذا كان يحوي

الكثير من البعثرة لكنها المرة الأولى لي في كتابة المقالات والدروس .... وإن شاء الله ما تكون الاخيرة

وانا في انتظار الاسئلة والتعليقات ......

محبكم ..

عثمان حمد

تم تعديل هذه المشاركة بواسطة osmansays في 18 يوليو 2006 في 19:14

http://www.Jeddah4it.com
#2

الأجاكس هو حديث الساحة في مجال التصميم أرجو وضع أمثلة عملية لمواقع تم تنفيذها فعلاً بتقنية الأجاكس ولك جزيل الشكر على مجهودك...

#4
osmansays كتب:
قبل الاستخدام يجب انزال مكتبة الأداة والتي هي على شكل ملف DLL ومن ثم اضافتها في المشروع على شكل Referince .

اهل ممكن ان ترفق لي هذا هذه المكتبة او من اين يمكنني الحصول عليها

#5

اخي عثمان حمد جزاك الله خير على هذا الدرس الممتع و أرجوك تحملني فأنا سأكثر من الأسئلة :D

ما سمعته ان الajax تعتمد على كلاً من الجافا سكربت و xml

فأين استخدام XML من هذا المثال ؟ :D

ارجو ان تنزل مكتبة DLL للإستفادة بشكل اكبر

و شكراً لك

طريقة حماية الصفحة بالصورة العشاوائية Captcha

/index.php?showtopic=117870

#6

جزبت خيراً على المشاركة القيمة ... و أرجو أن لا تتوقف عن ذلك.

Xul.png
#7

مثال على موقع عربي تم تنفيذه بالأجاكس

http://quran.qatardr.net

الاجاكس يعتمد على الجافاسكريبت لكن ليس بالضرورة xml يمكن ربطة باي برنامج php

تم تعديل هذه المشاركة بواسطة Code في 27 أغسطس 2006 في 21:24

#8

أداة أنصح باستخدامها

www.Magicajax.net

logo.gif
استضافة ويندوز


اقتباس

مساحة تبدأ من 2000 ميجا بايت بسعر 1.99 دولار شهريا.ا

اقتباس

ASP.NET 1.1-2.0-3.0-3.5-4.0-4.5.1 / MVC ASP.NET / PHP 5.x / ColdFusion / MSSQL 2008 & 2012 / MYSQL

#9

[الاخوة الاعزاء ...اسف على تأخري في الرد.... مرفق هنا ملف الAjax.dll

....

Ajax.zip

تم تعديل هذه المشاركة بواسطة osmansays في 1 سبتمبر 2006 في 19:48

http://www.Jeddah4it.com
#10

أشكر الأخ عثمان على هذه الدروس المفيدة ووفقه الله لكل خير

وأحب أن أعلق أن المشكلة في الأجاكس هو التعقيد المرتبط بالعملية ككل , وهي مفيدة عندما أريد استخدامها في بيئات أخرى غير ASP.NET , وأنا افضل استخدام تقنة atlas التي في الحقيقة لم أجربها 100% ولكن اعتقد أنها تعما نفس عمل الاجاكس ولكن بدون أن نكتب سطر واحد في الجافا سكريبت ,وباستخدام أدوات معينة لكلا النسختين من فيجوال ستديو 2003-2005

يمكنكم أن تجدو مقالات متنوعة عن atlas وتحملوها من الموقع الرئيسي ل asp

وهو

http://www.asp.net

وبالتوفيق

مجموعة الدوت نت في السعودية , اشترك معنا لتحصل على كل مفيد في عالم الدوت نت

dotnetinsaudi-subscribe@yahoogroups.com

#11

مشكور جدا على ارسال ملف dll

ولكن ياأخي عندما قمت بتفيذ البرنامج حدث معي خطأ مع العلم بأنني قمت بجميع الخطوات التي قمت بتوضيحها

ولكم جزيل الشكر

وهذا هو الخطأ

Configuration Error

Description: An error occurred during the processing of a configuration file required to service this request. Please review the specific error details below and modify your configuration file appropriately.

Parser Error Message: Could not load type Ajax.PageHandlerFactory from assembly Ajax.

Source Error:

Line 4: <system.web>

Line 5: <httpHandlers>

Line 6: <add verb="POST , GET" path= "ajax/*.ashx" type = "Ajax.PageHandlerFactory , Ajax" />

Line 7:

Line 8: </httpHandlers>

#12

الأخ: ayman-hala

فضلا قم بكتابة الأمر بنفسك داخل webconfig وسيعمل معهك غن شاء الله

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

#13

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

رغبة في التواصل والاستفادة اطرح سؤالي كالتالي:

قمت بعمل مشروع تجربة للأجاكس وأدرجت الأوامر الخاصة با لwebconfig 

<httpHandlers>
 <add verb="POST,GET" path="ajax/*.ashx"
 type="Ajax.PageHandlerFactory,Ajax"/>
  </httpHandlers>

وقمت بعمل refrance للـ ajax.dll وبيانات العمل هي

project name :newajax
data base name : asd

table : mylabel	with 2 fields (label_no,ara)

والغرض هو ان أمرز label_no فيقوم بعرض ara المقابل له في TextBox1

وفي المثال مررت القيمة 84 وهو أحد السجلات الموجودة في الجدول mylabel

webform1 html page

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="newajax.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
	<HEAD>
		<title>WebForm1</title>
		<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
		<meta content="C#" name="CODE_LANGUAGE">
		<meta content="JavaScript" name="vs_defaultClientScript">
		<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
		<script language="javascript">
	function filltxt(id)
	{
		document.getElementById('TextBox1').value=WebForm1.mycommand('select ara from mylabel where label_no='+id).value;
	}

		</script>
	</HEAD>
	<body MS_POSITIONING="GridLayout">
		<form id="Form1" method="post" runat="server">
			<asp:TextBox id="TextBox1" style="Z-INDEX: 100; LEFT: 168px; POSITION: absolute; TOP: 56px" runat="server"></asp:TextBox>
			<INPUT style="Z-INDEX: 102; LEFT: 208px; POSITION: absolute; TOP: 88px" type="button" value="Button"
				onclick="filltxt('84');"></form>
	</body>
</HTML>

webform1.aspx.cs

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace newajax
{
	/// <summary>
	/// Summary description for WebForm1.
	/// </summary>
	public class WebForm1 : System.Web.UI.Page
	{
		protected System.Web.UI.WebControls.TextBox TextBox1;

		private void Page_Load(object sender, System.EventArgs e)
		{
		Ajax.Utility.RegisterTypeForAjax(typeof(WebForm1));
		}

		[Ajax.AjaxMethod()]
		public  string   mycommand(string comm_string)
		{
			string MyConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="+Server.MapPath("asd.mdb");
			string v_Label;
			System.Data.OleDb.OleDbConnection  conn = new System.Data.OleDb.OleDbConnection (MyConn);
			conn.Open();
			try
			{
				System.Data.OleDb.OleDbCommand GetMyLable =  new System.Data.OleDb.OleDbCommand(comm_string,conn);
				v_Label = GetMyLable.ExecuteScalar().ToString();
			}
			catch
			{
				v_Label="*";
			}
			conn.Close();
			return v_Label;
		}


		#region Web Form Designer generated code
		override protected void OnInit(EventArgs e)
		{
			//
			// CODEGEN: This call is required by the ASP.NET Web Form Designer.
			//
			InitializeComponent();
			base.OnInit(e);
		}

		/// <summary>
		/// Required method for Designer support - do not modify
		/// the contents of this method with the code editor.
		/// </summary>
		private void InitializeComponent()
		{	
			this.Load += new System.EventHandler(this.Page_Load);

		}
		#endregion


	}
}

ولكن عند التنفيذ يقوم بإعادة القيمة null

فما هو السبب؟؟ أرجو المساعدة

#14

تقنية الاجاكس قامت بعمل انتراكت أو تفاعل مع الطلبات بشكل مباشر

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

لكن لاتنسى أن هذا سيؤثر على عمل الشبكه إن كان عدد المستخدمين كبير وعدد البيانات المناداه بالجافا سكربت كبيره

انت حمستني أن اكتب في الاجاكس بواسطة الجافا

#15

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

وشكرا

#16

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

http://www.arabteam2000.com

#17

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

لقد حاولت مرة أخرى في حل المشكلة التي سبق وطرحتها

ولقد تتبعت الأوامر التي كتبتها كلها وقمت بتنفيذها step by step

ووجدت ان المشكلة تظهر عند محاولة فتح الكونكشن مع الداتا بيز

conn.open();

ولكن لا أعلم لماذا ....؟؟؟؟؟

فأرجو ممن واجه نفس المشكلة أو لديه حل إرشادي .. علما انني أعمل على الاصدار فيجوال ستوديو 2003 .. ولكم الشكر

#18

السلام عليكم

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

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

شاكرا لكم سلفا

#19

الاخ sharmoasp الكود هو احد اكواد كاتب المقالات الشهير azamsharp وقد قمت بتجربته وكتابة هذه المقالة حسب ما فهمته وبصياغتي واسلوبي حسب ما فهمته ولابسط على اخواني اخر ما توصلت اليه.... فان اخطأت فمن نفسي وان أحسنت فمن الله ...

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

رجاء راجع :

اقتباس
FillTextBox_CallBack

هي دالة جافا سكريبت أخرى سنقوم بكتابتها و وظيفة هذه الدالة استقبال

القيمة المرجعة من دالة السي شارب وبالتالي تعبئة الأداة الموجودة في الصفحة

من خلال سطر كود جافا سكريبت مما يعني تعبئة الأداة بالبيانات من غير عمل Post Back

للصفحة (أهم امتيازات الجافا سكريبت)...لنلقي نظرة على الدالة :

كود

function FillTextBox_CallBack(response)

{

var ds = response.value;

if(ds! = null && typeof(ds) = = "object" && ds.Tables! = null)

document.getElementById("TextBox1").value = ds.Tables[0].Rows.CategoryName;

}

لنلقي نظرة فاحصة على الكود أعلاه ....سنجد المعامل response وهو عبارة عن كائن object

يحوي القيمة المرجعة من خلال دالة السي شارب وبالتالي سيتم تعبئته بـDataSet المرجعة .

أي بمفهوم أن الدالة FillTextBox تقوم بمناداة دالتي المكتوبة في السي شارب وتمرير المعاملات لها (معرف التصنيف)

وبالتالي يتم تنفيذ الدالة في السي شارب ومن ثم ارجاع القيمة المرجعة الى الدالة FillTextBox_CallBack

أي أن FillTextBox أشبه ببوابة الخروج من كود الجافا سكريبت وFillTextBox_CallBack هي بوابة الرجوع اليها.

http://www.Jeddah4it.com
#20

أخي العزيز osmansays

أشكرك لك جهدك الكبير ولا يسعني يا اخي العزيز إلا أن أقدرك وأقدر جهدك المتميز الذي جاء دائما بكل ما هو جديد

وقد راجعت المثال وبحثت في أكثر من موقع ..

وأخيرا وجدت المشكلة .. فالمثال يعرض dataset موجود فعلا .. ولكن لتنفيذ command على runtime لا بد من فتح كونكشن مع الداتا بيز - هذا ما أفهمه - والمسألة هنا أن أمر فتح الكونكشن

conn.open()

لا يتم تنفيذه

وبعد المراجعة وجدت الحل أخيرا

وهو أن أمر الكونكشن يأخذ المعاملات

Server.MapPath("file.mdb")

وهنا يكون مخزنا ضمنيا داخل الأمر علامات الباك سلاش وهو ما يعطي error في الجافا سكريبت

أما لو كتبت الـ path كاملا

c:\intpup\www.root\dd\file.mdb

فسيتم تنفيذ الأمر بدون أخطاء

أرجو أن أكون أوضحت

وأشكرك أخي عثمان مرة أخرى .. وفي انتظار الجديد منك دائما

#21

العفو اخي shramroasp فهذا واجبي تجاه اخوتي كلهم ..

..انا سعيد انك تمكنت من حل مشكلتك ...وهذا يفسر لماذا لم يظهر هذا الخطأ لدي لأني استخدم SQL Server Database ..

http://www.Jeddah4it.com

هذا الموضوع مغلق.

مواضيع مشابهة