تبليغاتX
AJAX
مطالب و مقالات و راهنمایی هایی درباره فناوری جدید اینترنت ajax
بهترین سایت فارسی در مورد آژاکس حتماْ سر بزنید

www.ajaxiran.com

+ نوشته شده در  سه شنبه ششم تیر 1385ساعت 18:59  توسط رضا نوجوان  | 

در ادامه پست قبلی در این پست چهار مورد بعدی رو براتون نوشتم . امیدوارم که براتون مفید باشه.

4- پردازش درخواست توسط ValidateServlet

اینکه آیا ID کاربر در پایگاه داده ها موجود هست را servlet طراحی شده برای اعتبارسنجی URI بررسی می کند. servlet درخواست XMLHttpRequest را همانند سایر درخواست های HTTP پردازش می کند. مثال زیر نشان می دهد که یک سرور پارامترهه را از درخواست بیرون کشیده و آنها را اعتبارسنجی می نماید.

public class ValidateServlet extends HttpServlet  

{

 

   private ServletContext context;

   private HashMap users = new HashMap();

 

public void init(ServletConfig config) throws ServletException

  {

      this.context = config.getServletContext();

      users.put("greg","account data");

      users.put("duke","account data");

  }

 

public void doGet(HttpServletRequest request, HttpServletResponse response)

   throws IOException, ServletExcepion

   {

 

      String targetId = request.getParamete("id");

 

      if((targetId != null) && !users.comtainsKey(targetIdtrim()))

         {

response.setContentType("text/xml");

response.setHeader("Cash-Control", "no-cache");

response.getWriter().write("valid");

         } else {

response.setContentType("text/xml");

response.setHeader("Cash-Control","no-cache");

response.getWriter().write("invalid");

        }

   }

}

 

در این مثال ساده یک HashMap ساده که به نام users مورد استفاده قرار گرفته است. در این مثال، فرض می کنیم که کاربر کلمه duke را به عنوان ID تایپ کرده است.

 

5- بازگشت نتیجه بصورت سند XML از ValidateServlet

شناسه (ID)  "duke" در لیست شناسه های HashMap نشان داده می شود. ValidateServlet در پاسخ پیغام نامعتبر را به صورت یک سند XML می نویسد.

DOM, XSLT یا سایر APIها برای تولید پاسخ به موارد کاربردی پیچیده زیادی نیاز دارد.

 

response.setContentType("text/xml");

response.setHeader("Cache-Control","no-cache");

response.geWriter().write("invalide");

 

طراحان باید به دو مطلب آگاهی داشته باشند. اول، نوع محتوا باید با text/xml هماهنگ باشد و دوم اینکه کنترل باید بدون کش تنظیم گردد. شی XMLHttpRequest فقط درخواستهایی را که نوع محتوی آن text/xml و کش کنترلهای آن به صورت ""no-Cache تنظیم شده باشد را پردازش می کند. تنظیم کش کنترلها به صورت غیرکش (no-Cache) باعث می شود که مرورگرها را از پاسخ کش محلی به درخواستهای مشابه برای یک URL، که ممکن است  پاسخهای متفاوتی را برگرداند، باز می دارد.

 

6- فراخوانی تابع callback() و پردازش نتیجه توسط شی XMLHttpRequest

شی XMLHttpRequest پیکربندی شده برای فراخوانی تابع callback() زمانیکه تغییراتی در وضعیت آماده (ready state) شی XMLHttpRequest وجود دارد. فرض کنید فراخوانی ValidateServlet انجام شده و وضعیت آماده برابر 4 می باشد، این نشان دهنده این می باشد که فراخوانی شی XMLHttpRequest به طور کامل انجام شده است. کد وضعیت 200 HTTP بیانگر این است که فعل و انفعال HTTP با موفقیت انجام پذیرفته است.

function callback()

{

if(req.readyState = = 4)

     {

if(req.status = = 200)

       {

//update the HTML DOM based on whether or not message is valid

        }

      }

}

مرورگرها یک شی سندی قابل نمایش را نگه می دارند(مراجعه شود به مدل DOM). تکنولوژی جاوا اسکریپت در صفحات HTML به DOM دسترسی دارد و APIهای  موجود ، به تکنولوژی جاوا اسکریپت اجازه می دهد که برای صفحه بارگذاری شده DOM را اصلاح نماید.

درخواست انچام پذیرفته زیر نشان می دهد که تکنولوژی جاوااسکریپت چگونه DOM مربوط به صفحه HTML را اصلاح می کند. شی حاضر XML بازیابی شده از ValidateServlet با استفاده از تابع req.responseXML در دسترس کد جاوا اسکریپت است، البته در مواقعی که شی ما از نوع XMLHttpRequest باشد. APIهای مربوط به Dom وسیله ای را برای تکنولوژی جاوا اسکریپت فراهم می نماید تا محتوی سند XML دریافتی را هدایت کرده و با استفاده از آن DOM مربوط به صفحه HTML را اصلاح نماید. رشته بازگردانده سند حاضر  XML، توسط فراخوانی req.responseXML قابل دسترسی است. با نگاهی به سند بازیابی شده XML از ValidateServlet در مثال زیر، چگونگی استفاده از APIهای DOM توسط تکنولوژی جاوا اسکریپت را ببینیم.

<message>

   valid

</message>

این مثال یک تکه ساده XML، شامل عنصر ارسال کننده پیام می باشد که یک رشته ساده "valid" یا "invalid" است. یک مثال پیشرفته تر شاید شامل بیش از یک پیام و اسامی معتبر تعریف شده توسط کاربر باشد:

 

function parseMessage()

{

var message = req.responseXML.getElementsByTagName("message")[0];

setMessage(message.childNodes[0].nodeValue);

}

 

تابع parseMessage() سند XMLبازیابی شده از ValidateServlet را پردازش می کند.این تابع برای به روز کردن  DOMصفحه HTML تابع setMessage() را با مقادیر عناصر پبغام فرا می خواند.

 

7-  HTML DOM به روز شده

در DOM که تعدادی API بکار برده می شود، برگشت و ارجاع به هر عنصری توسط تکنولوژی جاوا اسکریپت تقویت می شود.شیوه پیشنهاد شده برای تقویت بازیابی یک عنصر فراخوانی document.getElementById("userIdMessafe") می باشد. وقتی که userIdMessage به عنوان صفت یک عنصر در صفحه HTML ظاهر می شود. در رابطه با عناصر، تکنولوژی جاوا اسکریپت، صفات عناصر را اصلاح می کند ، خصوصیات style عناصر، اضافه کردن، کم کردن یا برای اصلاح عناصر فرزند مورد استفاده قرار می گیرد.

شیوه معمول برای تغییر محتوی یک عنصر، تنظیم خصوصیات داخلی HTML موجود در عنصر می باشد. همانند مثال زیر:

 

<script type="text/javascript">

function setMessage(message)

{

mdiv = document.getElementById("userIdMessage");

if(message = = "invalid")

{

mdiv.innerHTML = "<div style=\"color:red\">invalid User Id</div>";

} else {

mdiv.innerHTML="<div style=\"color:green\">Valid User Id</div>";

}

}

</script>

<body>

<div id="userIdMessage"></div>

</body>

 

اجزای تحت تاثیر قرارگرفته صفحه HTML بلافاصله بدنبال تنظیمات خصوصیات داخلیHTML بازسازی می شوند. اگرخصوصیات داخلیHTML شامل عناصری از قبیل <image> یا <iframe> باشد، محتوی توسط همان عناصرآورده و توسط همان عناصر بازسازی می شود.

در تکنولوژی جاوا اسکریپت عمده ترین نقطه منفی این روش اینست که عناصر HTML به عنوان رشته هایی دارای کد پیچیده می باشند. کد گذاری پیچیده HTML با تکنولوژی جاوا اسکریپت، روش خوبی نیست، چون خواندن کد را مشکل می سازد . همینطور نگهداری و اصلاح کد دشوار می شود. کاربرد APIهای DOM تکنولوژِی جاوااسکریپت را برای اصلاح و ایجاد عناصر HTML را در نظر داشته باشید. نمایش ترکیبی با کد جاوا اسکریپت به عنوان یک سری رشته، خواندن و ویرایش صفحه را مشکل می سازد. روش دیگر برای اصلاح HTML DOM، ایجاد عناصر جدید و پیوست کردن آنها به عنوان عناصر فرزند به عنصر نهایی مانند مثال زیر:

 

<script type="text/javascript">

function setMessage(message)

{

var userMessageElement = document.getElementById("userIdMessage");    var messageText;

if(message =="invalid")

{

userMessageElement.style.color = "red";

messageText = "Invalid User Id";

} else {

userMessageElement.style.color = "green";

messageText = "Valid User Id";

}

var messageBody = document.createTextNode(messageText);

//if the messageBody element has been created simple replace it otherwise

//append the new element

if(userMessageElement.childNode[0])

{

    userMessageElement.replaceChild(messageBody, usrMessageElement.childnodes[0]);

} else {

userMessageElement.appendChild(messageBody);

}

}

</script>

<body>

<div id="userIdMessage"></div>

</body>

 

نمونه کد نشان می دهد که چطور APIهای  DOM برای ایجاد یک عنصر و یا عنصر برنامه ای دیگر می تواند استفاده شود. در مرورگرهای مختلف، پشتیبانی APIهای DOM تفاوت دارد. بنابراین به هنگام توسعه برنامه های کاربردی بایستی مراقب باشید.

 

امیدوارم که تا اینجا از این مطلب نهایت استفاده رو برده باشین . چند نمونه از این استفاده ها رو در پست بعدی براتون ارسال می کنم .

 

باز هم از سرکارخانم اسدی جهت کمک در تهیه این مقاله کمال تشکر رو دارم.

+ نوشته شده در  یکشنبه چهارم تیر 1385ساعت 17:8  توسط رضا نوجوان  | 

در این پست و پستهای بعدی من گرایش برنامه نویسی به روش آژاکس را به سمت جاوا تغییر می دهم و جاوا را زبانی برای پیاده سازی آژاکس مورد استفاده قرار می دهم. برای این پست من به تشریح یک فعل و انفعال آژاکس که با جاوا پیاده سازی شده پرداختم.

 

تشریح فعل و انفعال آژاکس :

بحث اکنون ما این است که آژاکس و مباحث سطح بالای آن چیست؟

اجازه بدهید کلمات مرتبط را کنار هم بگذاریم و یک برنامه کاربردی J2EE با قابلیت آژاکس را نشان دهیم. به عنوان مثال ، برنامه کاربردی وب شامل یک فرم HTML می باشد که این فرم یا به یک صفحه استاتیک تکنولوژی JSP و یا به یک صفحه ای که در منطق سمت Servletserver قرار داده شده تا برای اعتبارسنجی احتیاج به دوباره سازی صفحه نداشته باشد، نیاز دارد.

مولفه وب سمت سرور که ValidateServlet نامیده می شود، منطق اعتبارسنجی را فراهم می نماید. شکل زیر جزئیات منطق اعتبارسنجی یک فعل و انفعال آژاکس را نشان  می دهد.

 

 

عناوین زیر مراحل فعل وانفعالات آژاکس را نشان می دهند، همانگونه که در شکل قبل ملاحظه نمودید.

  1. رخداد کاربر
  2. ساخت و پیکربندی شی XMLHttpRequest
  3. ساخت فراخوان شی XMLHttpRequest
  4. پردازش درخواست توسط ValidateServlet
  5. بازگشت نتیجه بصورت سند XML از ValidateServlet
  6. فراخوانی تابع callback() و پردازش نتیجه توسط شی XMLHttpRequest
  7. HTML DOM به روز شده 

نگاهی به مراحل فعل و انفعالات آژاکس با جزئیات بیشتر که البته در این پست به  سه مرحله اول پرداخته و موارد بعدی در پست های آینده بررسی خواهد شد.

 

1- رخداد کابر

توابع JavaScript به عنوان نتیجه یک رویداد فراخوانده می شوند. در این مورد تابع Validate() ممکن است به عنوان نتیجه یک رویداد onkeyup بر روی یک لینک و یا یک مولفه فرم باشد.

<input type="text"

           Size="20"

           Id="userid"

           Name="id"

           Onkeyup="validate();">

هر وقت که کاربر کلیدی را در فیلد فرم فشار می دهد این عنصر فرم تابع validate() را فراخوانی می کند.

 

2 – ساخت و پیکربندی شی XMLHttpRequest

نحوه ساخت و پیکربندی یک شی XMLHttpRequest به صورت زیر می باشد:

function validate()

   {

       var idField = document.getElementById("userid");

       var url = "validate?id=" + escape(idField.value);

       if (window.XMLHttpRequest) {

            req = new XMLHttpRequest();

       } else if (window.ActiveXObject) {

                  req = new ActiveXObject("Microsoft.XMLHTTP");

       }

       req.open("GET", url, true);

       req.onreadystatechange = callback;

       req.send(null);

   }

تابع validate()، شی XMLHttpRequest  را می سازد و تابع open را برای آن فراخوانی می کند. تابع open نیازمند سه آرگومان می باشد:

متد HTTP که GET و یا POST می باشد.

URL مولفه سمت سرور که شی با آن فعل و انفعال انجام می دهد.

مقدار Boolean، که غیر همزمان بودن یا نبودن فراخوانی را نشان می دهد.

XMLHttpRequest.open(String method, String URL, Boolean asynchronous)

اگر یک فعل و انفعال به صورت غیر همزمان (true) باشد باید یک تابع callback مشخص شود. تابع callback برای این فعل و انفعال با دستور req.onreadystatechange = callback; تعریف می شود. برای جزئیات بیشتر بخش 6 را ببینید.

 

3- ساخت فراخوان شی XMLHttpRequest

وقتی اجرای تابع به req.send(null) می رسد؛ فراخوان ساخته می شود.در مورد یک متد HTTP GET محتوا شاید خالی و یا null باقی بماند. وقتی این تابع روی یک شی XMLHttpRequest فراخوانده می شود، URL که در زمان پیکربندی شی مورد استفاده قرار گرفته فراخوانده می شود. در مورد این مثال اطلاعاتی که پست شده است (id) شامل یک پارامتر URL می باشد.

وقتی که درخواست idempotent است یعنی درخواستی که دو بار تکرار می شود و همان نتیجه را باز می گرداند، از متد HTTP GET استفاده می شود.

زمانیکه که متد HTTP GET مورد استفاده قرار می گیرد، تعدادی از مرورگرها و سرورهای وب طول URL ، که شامل پارامترهای مجزای URL می باشد را محدود می کند.

به هنگام ارسال اطلاعات به سمت سرور متد HTTP POST مورد استفاده قرار میگیرد که این امر موجب تاثیرگذاری بر وضعیت برنامه سمت سرور خواهد شد. برای اجرای متد HTTP POST ، همانند دستور زیر باید عمل نمود:

 

req.setRequestHeder("Content-Type" , "application/x-www-form-urlencoded");

req.send("id=" + escape(idTextField.value));

 

به هنگام ارسال مقادیر فرم با استفاده از تکنولوژی JavaScript باید به رمزگذاری (encode) مقادیر فیلد توجه داشته باشید. JavaScript شامل تابع escape() می باشد. برای اطمینان از اینکه محتوای متمرکز شده به طور صحیح رمزگذاری شده و کاراکترهای ویژه به طور صحیح مجزا شده اند بایستی از این تابع استفاده شود. 

تا اینجا سه مرحله رو بررسی کردیم که مراحل بعدی باشه در روزهای آینده.

با تشکر فراوان از سرکار خانم اسدی که زحمت ترجمه این مقاله را قبول فرمودند و مرا در تهیه این مطلب بسیار یاری نمودند.

+ نوشته شده در  دوشنبه بیست و نهم خرداد 1385ساعت 15:59  توسط رضا نوجوان  | 

حتماً در بخش پست الکترونیک وبگاه ياهو ديده‌ايد که با تايپ حروف اول نام دوستانتان نام چند نفر از آنها از پایگاه داده‌ها فراخوانی شده و به شما نمایش داده می‌‌شود. این کار بدون اينکه صفحه بارگذاری مجدد گردد انجام می‌‌شود. به زبان ساده‌تر، آژاکس فناوری‌ای ست که در آن با بار شدن يک صفحه، امکان فراخوانی برنامه‌های سمت رایانهٔ خادم (Server) بدون بارگذاری و لود مجدد صفحه وجود دارد. برنامه‌های آژاکس راهی برای ساخت برنامه‌هایی تعاملی در وب فراهم کرده‌اند. برای اين‌ کار کافيست يک عنصر فعال که قابل فراخوانی در جاوااسکريپت باشد بتواند تحت کنترل جاوااسکريپت با سرور تماس گرفته و اطلاعات درخواست کند. بعنوان مثال اين عنصر فعال می‌‌تواند يک برنامه ASP يا JSP يا ... را فراخوانی کرده و نتايج آن را از طريق جاوااسکريپت در صفحه جاری تاثير دهد. عنصر فعال قبل از معرفی آژاکس می‌‌توانست يک ActiveX يا جاوا اپلت ساده باشد اما اکنون اين عنصر آبجکت XMLHttpRequest است که در مجموعه ابزارهای XML مايکروسافت قرار دارد.

امروزه تقريباً همه مرورگرهاي معروف از جمله IE از اين تكنولوژي استفاده می‌‌كنند.

+ نوشته شده در  چهارشنبه دهم خرداد 1385ساعت 17:57  توسط رضا نوجوان  | 

با سلام خدمت شما عزیزان و عرض پوزش از خانم مائده به دلیل بد قولی هایم منتظر مطالب جدید باشید.
+ نوشته شده در  چهارشنبه بیستم اردیبهشت 1385ساعت 9:47  توسط رضا نوجوان  | 

با عرض سلام خدمت دوستان با عرض پوزش از تاخیر در درج مطلب جدید .
در سال جدید با آخرین مطالب در این زمینه در خدمتتان خواهم بود. در ضمن پشاپیش سال نو را به شما تبریک می گویم
+ نوشته شده در  یکشنبه چهاردهم اسفند 1384ساعت 19:0  توسط رضا نوجوان  | 

 مقاله به زبان انگلیسی درباره استاندارد مورد استفاده وب، HTTP  است که می توانید آنرا در آدرس زیر بیابیدو در صورت تمایل انرا ترجمه و مطالعه نمایید. البته اگر مایل بودید ترجمه آنرا نیز در اختیار من قرار دهید تا در وبلاگ قرار دهم.

برای دریافت متن انگلیسی مقاله اینجا کلیک کنید

+ نوشته شده در  چهارشنبه چهاردهم دی 1384ساعت 18:36  توسط رضا نوجوان  | 

در این مقاله ای که در وبلاگ گذاشتم در مورد دنیای جدیدی که آژاکس در برنامه های کاربردی وب بوجود آورده است صحبت شده است. این مقاله نوشته آقای Peter Wayner می باشد که از سایت InfoWorld انتخاب کردم و با کمی اشکال که در ذات آدمی است برای شما ترجمه کردم و امیدوارم که از این مقاله استفاده کنید تا بیشتر به عنصر جدید مطرح شده در زمینه برنامه های کاربردی وب پی ببرید.

صرف نظر از اینکه شما درباره JavaScript ، DHTML و Browser میدانید ، آژاکس یک بازی با توپ کاملا جدید است.

یک سال قبل، Thomas Lackner زیاد جویای جاوااسکریپت نمی شد. وقتی طرح خلاصه معماری یک برنامه کاربردی وب را آماده کرد. او می دانست که می تواند زبان مرورگر را برای نصب یک نویسنده کوکی و بارگیری عکس ها شمارش نماید. اما او چرخشی را به سمت سرور برای حرکتی عظیم برداشت. اما وقتی گوگل فعل و انفعال عالی را برای  وب سایت خود شروع کرد همانند Gmail و Google Suggest، میزان آن از چشمان Lackner افت کرد و او فرصت یافت.

او گفت : وسط سال 2004 تمام آن جرقه ها زده شد. من تلاشی را برای افزودن مولفه های آژاکس به هر برنامه کاربردی وب، که کار کرده بودم شروع کردم.

آژاکس اخیراً اختصاری از یک دیدگاه تازه در مرورگرهای قدرتمند شده است: جاوا اسکریپت و اکس ام ال غیرهمزمان

AJAX (Asynchronous JavaScript and Xml)

قبل ازآژاکس صفحات وب لینک ها، فرم ها و دکمه هایی را نمایش می دادند. وقتی کاربر بر روی یک دکمه یا لینکی کلیک می کرد، مرورگر پیامی رو به یک سرور دور دست ارسال می نمود و می پرسید که سری بعد چه چیزی را نمایش دهد. جاوا اسکریپت تمایل داشت که برای چیزی بیش از کنترل ورودی ها استفاده شود.صفحات وب همانند صفحات یک کتاب ایستا بودند.

مرورگرهای پست آژاکس (Post-AJAX browser) در پشت صفحات بارگیری شده رگه های (threads) در حال اجرا را پردازش می کنند. اگر یک کاربر بر روی یکی از لینکها یا دکمه ها کلیک نماید، مرورگر می تواند با استفاده از جاوا اسکریپت محتوای صفحه را بروز نماید. برای نمونه، جی میل گوگل، قسمت های یک ایمیل را مخفی یا نمایش می دهد بدون اینکه برای رسیدن پاسخ از سمت سرور صبر نماید، حذف تاخیری شبکه. اگر اطلاعات باید به سرور ارسال شود، با استفاده از یک پردازش درپشت، این اطلاعات را ارسال می نماید.

Berndan Eich، سازنده جاوا اسکریپت در نت اسکپ می گوید: الان جهان در حال کشف چیزهایی است که او در سال 1995 تصور می کرد. او می گوید: ما (مارک اندریسن و من) همیشه بر آن بودیم جاوا اسـکریپت توانـایی برنـامـه مشـتــری-میـانی  (Client-centeric) راخواهد داشت که نیازی به بارگذاری مجدد صفحه از سرور را ندارد.

 

یک نوع جدید برنامه های کاربردی

جسی جیمز گررت کسی بود که در مقاله منتشر شده خود در فوریه سال گذشته مخفف AJAX رو اختراع کرد، می گوید که واکنش به این اسم شگفت آور بوده است. 

وقتی که شما مزایای رسیدن به آژاکس را کشف می نمایید شور و هیجان آن، غیرقابل درک است.

·        عمده ترین ساده کننده توزیع نرم افزار است.

·        مرورگرها صفحات AJAX را به صورت خودکار بارگیری می نمایند.

·        مشتری ها اغلب برای نصب نرم افزار سفارشی بی میل هستند اما بیشتر مردم را می توان برای دیدن یک سایت متقاعد نمود.

علاوه بر اینها، آژاکس چند تا مزایای دیگر نیز دارد.

·        اجرای جاوا اسکریپت در سمت مشتری باعث کاهش مصرف پهنای باند و پردازش تقاضا در سرور می شود.

·        کدهای خوب طراحی شده که بدرستی غیرهمزمان باشند نیز برای پاسخ به تقاضا و پرس جو بیش از یک بار به سرور میروند و حتی بیشتر که بوسیله پخش خارجی پیک تقاضا خواهد بود.

·        افزایش امنیت به وسیله رمزنگاری داده ها در سمت مشتری  قبل از اینکه ارسال شوند.

برنامه کاربردی Basecamp project-management از 37signals مثال بسیار خوبی برای یک توسعه برنامه کاربردی وب با استفاده از نمونه جدید است. منوهای زیادی برای باز کردن یک پنجره بدون اینکه یک رفت و برگشت به سرور باشد، اضافه می شود. اما وقتی آیتم جدید ذخیره می شود، مرورگر هنوز باید صبر نماید تا مطمئن شود که آیتم جدید به طور کامل ذخیره شده است.

بروز رسانی کدهای جاوااسکریپت سرور در پس زمینه تا زمانی که نوشته " درحال انتقال... فقط چند لحظه" در حال نمایش است، ادامه می یابد. هنوز خیلی از فعل وانفعالات با سرور باقی مانده است، اما سرعت کدهای جاوا اسکریپت بوسیله مدیریت چندین کلیک کاربر بالاست.

David Heinemeier Hansson یک برنامه نویس در 37signalsاست ومی گوید: که او بر روی موضوع حذف زمان تاخیر وقتی که کاربر فرم را تائید می کند، تمرکز کرده است. " اگر شما در وبلگتان یک توضیحات داشته باشید، در پس زمینه سمت سرور بروز رسانی می شود. هر وقت که شما نیاز به اضافه کردن یا تغییر محتوای آن را دارید دیگر به بارگذاری مجدد صفحه نیازی نیست و می توان این کار را انجام داد.

برخی همهمه ها ساخته شده درباره آژاکس توسط طراحان وب بوده است. انعطاف پذیری آژاکس نقطه قوتی برای طراحان وب است به دلیل اینکه جاوا اسکریپت توان کنترل ظاهر هر عکس یا نوع را در یک صفحه دارد. فونت ها توان کوچک و بزرگ شدن را دارند. خطوط جدول توان افزایش یا کاهش را دارند. رنگها توان تغییر را دارند. که این ابزار بسیار خوبی برای طراحان وب است.

 

سماجت مشکلات مرورگرها

شور و شوق برای این فناوری های جدید به خاطر ذات آدمی، معمولی است . چند تا ابزار خوب برای توسعه آژاکس موجود است ، platform که می تواند ناپایدارباشد و از استانداردی که متناقض است تبعیت کند. دو تا از بزرگترین دلایل شکایت درباره اختلاف بین مرورگرها و تطابق آنها  این است که آنها بهترین راه را برای اضافه کردن چند امکان فعل و انفعال نمی فهمند. اضافه تر، این مقدورات جدید می توانند کاربران را گیج نمایند که انتظار ندارند این امکانات جدید – در بعضی موارد – شکاف های امنیتی جدیدی باز نمایند.

بسیاری از برنامه های کاربردی آژاکس به امکاناتی نیاز دارند که فقط در ورژن های جدید سیستم های جاوا اسکریپت با مرورگرهای جدید همانند Firefox یا IE 5.5 در دسترس هستند. برای مثال، شی XMLHttpRequest ، XML را از سرویس دهنده وب مستقیما تجزیه می کند، یک امکانی است که کار بامنابع XML را برای برنامه نویسان راحت تر خواهد کرد. قبل از این که این امکان در IE5.0 آغاز شود، توسعه دهنده ها می بایست اطلاعات را از سرور دوردست بارگذاری می کردند اما به یک فریم جداگانه نیاز داشتند.

بعضی از جدیدترین مرورگرها پلت فرم (Platform) پایا ای را برای استفاده از XSLT (XSL Transformation) ارائه نمودند، اما جزئیات آن به نظر آبکی می آمد. اینها بزرگترین تفاوت روش اداره کردن فضای نام (NameSpace) در مرورگرهای IE 5.0, 5.5 و 6.0 بود. موزیلا 1.8 الان چند تا از همین امکانات رو به اشتراک گذاشته که در نخستین ورژن این کار را انجام نداده بود.

برنامه نویس ها برای رفع این نقص مجبورند که بارکننده های سفارشی بسازند تا کدها را با ورژن مرورگر مطابق نماید. راب برون یکی از اولین توسعه دهنده های آژاکس و خالق پلاگین Aardvark در Firefox خوش بین است و میگوید : « خوشبختانه اغلب مرورگرهای متفاوت می توانند به طور مناسب و به آسانی در چندین توابع سودمند کپسوله شوند و خوراک اصلی برنامه کاربردی آژاکس شما از قیود زشت آزاد شود ».

اما این، از شکل اندازی ها می تواند دردناک شود، و اغلب مرورگرهای ابتدایی بسادگی تبعیت می کنند. Fried میگوید: « ما در حال کار بر روی یک پروژه به نام کوله پشتی (Backpack) هستیم که در هنگام ورود، به اولین برنامه پیشرفته آژاکس به غیر از Gmail تبدیل می شود. ما تصمیم گرفتیم که به IE 5.0 فقط بگوییم نه. یک تصمیم آگاهانه بود که ما گرفتیم و به زمان مربوط است ».

همین، بمبارزه طلبیدن چندین نوع طراحی است. اگر یک برنامه کاربردی وب فقط به صورت داخلی استفاده شود، یک گروه معمار میتواند فرض معقولانه ای کند که تمام مرورگرهای شرکت دارای یک خصوصیات مشترک هستند. در یک چنین حالت زیربنایی، برنامه نویسی راحت تر است. اما یک شرکت که برنامه های کاربردی وب برای مشتری توزیع می کند هرگز نمی تواند چنین پنداشتی داشته باشد. اغلب مشتری های آنها ورژن قدیمی مرورگرها را استفاده می کنند.

 

دردسر کد

معامله با مرورگرهای نامعلوم اولین چالش است. ابزار توسعه برای ساختن جاوا اسکریپت هنوز پیش از چند مورد نمی باشد و نسبت به آنها حس دشوار بودن را دارید. خصایصی که برنامه نویسان سایر زبانها مسلم فرض می کنند، فقط در دنیای جاوا اسکریپت ظاهر می شود. به عنوان مثال اشکال زدایی همچون Venkman موزیلا در بسیاری از موارد توسط کد نویس هایی که عادت به بارگذاری مجدد صفحات برای جستجوی خطا دارند استفاده نمی شود.

ED Felten یک پروفسور کامپیوتر در دانشگاه Princeton پیش بینی کرده است که شاید برنامه نویسان در هنگام انتقال خصیصه های سمت سرور به درون کدهای جاوا اسکریپت سهواً حفره های امنیتی ایجاد کنند. اگرچه خواندن کدهای وارد شونده جاوا اسکریپت در یک sandbox بدون API برای دسترسی به فایل های محلی، فرصتی برای فلج کردن باقیمانده است به این دلیل که هنوز کد به وب سایت خارجی دسترسی دارد. برای نمونه حملات DDoS، به آسانی می تواند به کدها وارد شود.

علاوه بر این کدهای جاوا اسکریپت همانند روشهای برنامه نویسی C و JAVA گردآوری نشده است و کاربر نهایی می تواند کد را ببیند و یا حتی قبل از اجرا، آنرا ویرایش نماید. برای مثال، یک حمله کننده می تواند در کد به دنبال رشته هایی بگردد که شامل دستورات SQL می باشد و آنها را با پرس وجوهایی جانشین نماید که اطلاعات مختلفی را از سرور بازیابی نماید. Felten می گوید: « هروقت شما رشته ای را به جایی ارسال می نمایید، درباره آن خیالی دارید ».

ظهور خطاهای جدیدی همچون اینها نیاز به تفکر مجدد درباره خصایص جدید، توسط طراحان وب دارد.کاربران مرورگرها به درک روشهای قدیمی رسیده اند. آنها آگاه شده اند، برای مثال، دوبار کلیک کردن بر روی یک دکمه نمی تواند بر روی کارت اعتباری آنها شارژ دوباره داشته باشد. برنامه های کاربردی آژاکس بسیاری از فرضیات آنان را می شکند.

+ نوشته شده در  چهارشنبه چهاردهم دی 1384ساعت 1:11  توسط رضا نوجوان  | 

در این مقاله که نوشته آقای جسی جیمز گررت است سعی بر تعریف فناوری آژاکس شده است تا کسانی که تازه در این باره شنیده اند راحتتر این فناوری نو ظهور را درک وشناسایی نمایند.

تعریف آژاکس
همانطور که گفته شد آژاکس یک فناوری است. آژاکس متشکل از چندین فناوری دیگراست که هر کدام در مسیری جدید و قوی می آیند. آژاکس از بهم پیوستن پنچ مورد زیر بوجود آمده است:
1 . ارائه استاندارد پایه با استفاده از XHTML و CSS .
2 . نمایش پویا و تعامل با کاربر با استفاده از DOM(Document Object Model)
3 . دستکاری و تبادل اطلاعات با استفاده از XML و XSLT.
4 . بازیابی غیر همزمان داده ها با استفاده از XMLHttpRequest.
5 . تقید همه چیز با هم (JavaScript)
مدل قدیمی یا در واقع کلاسیک وب همانند این کار می کرد که بیشترین فعالیت های کاربربا واســط (Interface) ، یــک درخــواست HTTP بود که به سـرور برگشت داده می شد. سرور بعضی پردازش ها از قبیل بازیابی اطلاعات را انجام می داد و آنگاه یک صفحه HTML به سمت مشتری باز می گرداند. این یک مدل اقتباس گرفته شده از اصل وب ــ که از رسانه ابر متن (HyperText) استفاده می کند ــ است.
اما بطوریکه مشتاقان اساس آزمون کاربر می دانند ، چقدر ما وب را عالی میسازیم بدون اینکه نیازی به این عالی سازی برای نرم افزارهای کاربردی داشته باشیم؟
در شکل زیر دو مدل کلاسیک و آژاکس با هم مقایسه شده اند تا کمی متوجه اختلاف آنها و همچنین اساس کارAJAX شوید.

       

این رویکرد جدید مفاهیم فنی زیادی را میسازد اما یک آزمون کاربر عالی نمی سازد. تا زمانی که سرور در حال انجام کارهای خودش است کاربر باید چکاری انجام دهد؟ درست است ، او باید صبر کند و در هر گام یک عمل ، باید بیشتر زمان را صبر نماید.
واضح است اگر ما یک طراح وب بودیم نبایستی در این مدت کاربر را منتظر نگه داریم. یکبار واسط (Interface) در سمت مشتری بارگذاری می شود ، چرا باید فعل و انفعال کاربر دچار مکث شود در هر باری که برنامه کابردی نیاز به چیزی از سرور دارد ؟ در حقیقت چرا کاربر باید همیشه برنامه را در حال رفتن به سرور مشاهده کند؟

به چه سبب آژاکس متمایز است ؟
یک برنامه کاربردی آژاکس طبیعت Start-Stop-Start-Stop فعل و انفعال در وب را بااستفاده از مطرح کردن واسطی میان کاربر و سرور به نام موتور آژاکس بر طرف نموده است. بنظر میرسد که مانند اضافه کردن یک لایه به برنامه کاربردی است تا برنامه را کمتر به سمت سرور فرستاده و از آن پاسخ دریافت نمایید. اما برعکس این حالت درست می باشد.
درابتدای یک جلسه با یک سرور بجای بارشدن صفحه ابتدا مـرورگر موتور آژاکس را بار می نماید که معمولا با جاوا اسکریپت نوشته شده است و در یک فریم مخفی چیده شده است. این موتور مسئول بین رندر کردن واسطی که کاربر می بیند و ارتباط بر قرار کردن با سرور از طرف کاربر می باشد. این موتور به کاربر اجازه می دهد که مستقل از ارتباط برقرار کردن با سرور ، با برنامه تعامل داشته باشد. همچنین کاربر هرگز در یک صفحه جدید سفید مرورگر با یک آیکون ساعت شنی شروع نمی کند و در حال صبر نخواهد بود تا سرور کارهایش را انجام دهد.
در شکل زیر دو مدل را از لحاظ زمان مورد بررسی قرار داده ایم و در واقع نحوه بهبود سیستم کلاسیک وب با استفاده از مدل آژاکس را نمایش داده ایم.

       

هر عمل معمول کاربر یک درخواست HTTP تولید می کند و به صورت یک قالب جاوا اسکریپت بسوی موتور آژاکس فرستاده می شود. هر پاسخی به کاربر که احتیاج به گرفتن جواب از سرور ندارد مانند اعتبارسنجی ساده داده ها ، ویرایش داده ها در حافظه و غیره ، موتور آژاکس این عمل کاربر را در درون خود اداره کرده و به کاربر پاسخ می دهد.حال اگر موتور نیاز به چیزهایی از سرور برای پاسخ دادن به کاربر داشته باشد همانند دادن اطلاعات برای پردازش ، بارگیری کدهای اضافی واسط یا بازیابی اطلاعات جدید روند کار کمی دچار تغییر می شود ، به این صورت که موتور اینگونه نیازها را تبدیل به درخواست های غیر همزمانی می نماید که معمولا با استفاده ازXML و بدون متوقف کردن تعامل کاربر با برنامه می باشد.
در پایان این مقاله به این موضوع اشاره می کنم که در حال حاضر یکی از معروفترین سایتهایی که از این فناوری استفاده می نماید Google است که آخرین ورژن Google Maps را می توان به عنوان یکی از بارزترین نمونه های استفاده ازAJAX نام برد .
اینگونه پروژه ها ثابت می کند که AJAX فقط حرف فنی نیست و نمونه های عملی در جهان واقعی کاربردی دارد.
در مقالات آینده سعی دارم که با کمک شما به بررسی فنی AJAX بپردازم تا از این سیل پیشرفت بیرون نیفتیم .

+ نوشته شده در  یکشنبه یازدهم دی 1384ساعت 12:25  توسط رضا نوجوان  | 

در حال حاضر اینترنت و فناوری های موجود آن به سرعت و با سرعت سرسام آوری در حال گسترش و تغییر می باشد.
حال در این گذار پر سرعت تغییرات ما باید جه کنیم؟
سئوالیست که به ذهن اکثر فعالان این بخش خطور می کند . به نظر بنده ما باید در این گذار قرار گیریم و تمام تغییرات سریع این مقوله را زیر نظر بگیریم تا بیش از این از این دنیا عقب نمانیم.
به همین دلیل به فکر راه اندازی این وبلاگ افتادم تا فناوری جدید آژاکس را که چندیست در محافل مختلف مورد بحث قرار می گیرد را با کمک شما بررسی کنم و از این پردازش به فراگیری این فناوری جدید بپردازیم.امید است که چنین شود.
+ نوشته شده در  چهارشنبه سی ام آذر 1384ساعت 15:55  توسط رضا نوجوان  |