.NET Tips | جستجوها: نتایج مشابه «پلاگین jquery جهت خواندن RSS»، صفحه: ۴

مطالب

افزونه جملات قصار jQuery

چندی قبل مطلبی را در مورد پردازش فایل‌های xml با استفاده از قابلیت Ajax جی کوئری نوشتم. در سایت پی‌سافت، تعدادی فایل XML از شعرا و جملات قصار و امثال آن موجود است (با تقدیر و تشکر از زحمات این عزیزان) که امروز قصد داریم از فایل XML جملات قصار آن یک افزونه jQuery درست کنیم تا آن‌ها را به صورت اتفاقی (random) در صفحه نمایش دهد:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       <title>XML</title>
       <script src='jquery-1.3.min.js' type='text/javascript'></script>
       <script type="text/javascript">
           var ourXml = '';
           function parseXml(xml){
               ourXml = xml; //for our timer               
               var i;
               var rnd = Math.floor(Math.random() * 130) + 1; //we have 130 entries
               for (i = 1; i < 5; i++) //M1 to M4
               {
                   $(xml).find("Ghesaar" + rnd + " > M" + i).each(function(){
                      $("#output").append($(this).text() +' ');
                   });
               }
           }
          
           //ajax loader
           $(document).ready(function(){
               $.ajax({
                   type: "GET",
                   url: "Ghesaar.xml",
                   dataType: "xml",
                   success: parseXml
               });
           });
          
           //timer
           window.setInterval(function(){
               $("#output").empty().hide();
               parseXml(ourXml);               
               $("#output").fadeIn("slow");
           }, 10000);
       </script>
   </head>
   <body>
           <span id="output" dir="rtl" style=" "/>
   </body>

</html>

توضیحات:
همه چیز از قسمت Ajax کد فوق شروع می‌شود. فایل Ghesaar.xml بارگذاری شده و به تابع parseXml ارسال می‌شود. در این تابع یک کپی از xml دریافت شده را نگهداری می‌کنیم تا در تایمری که بعدا جهت نمایش اتفاقی پیام‌ها درست خواهیم کرد، مجبور نشویم مجددا محتویات فایل xml را بارگذاری کنیم.
در تابع parseXml قصد داریم فایل xml ایی با فرمت زیر را پردازش کنیم:

  <Ghesaar10>
   <M1>ناامیدی، آخرین نتیجه گیری    </M1>
   <M2>بی خردان است</M2>
   <M3>
   </M3>
   <M4>« ضرب المثل انگلیسی »</M4>
 </Ghesaar10>

برای مثال در اینجا باید به دنبال Ghesaar10>M1 برای یافتن متن تگ M1 گشت و الی آخر. کلا چهار تگ داریم که در یک حلقه آن‌ها را استخراج خواهیم کرد. سپس یک عدد اتفاقی بین 1 تا 130 هم تولید کرده و بجای عدد پس از Ghesaar قرار می‌دهیم. یعنی هر بار به صورت اتفاقی یک مجموعه از جملات قصار، دریافت و پردازش خواهند شد. نهایتا این جملات استخراج شده را به یک span با id مساوی output‌ اضافه می‌کنیم.
تا اینجا فقط یکی از جملات قصار در هنگام بارگذاری صفحه نمایش داده خواهند شد. برای تکرار نمایش، از یک تایمر می‌توان کمک گرفت که کد آن‌را در بالا ملاحظه می‌کنید.
همین!

برای تبدیل آن به یک پلاگین/افزونه جی‌کوئری ، می‌توان به صورت زیر عمل کرد:


$.fn.ghesaar = function(options){
   var defaults = {
       interval: 1
   };   
   var options = $.extend(defaults, options);
  
   return this.each(function(){
       var obj = $(this);
       var ourXml = '';
       function parseXml(xml){
           ourXml = xml; //for our timer               
           var i;
           var rnd = Math.floor(Math.random() * 130) + 1; //we have 130 entries
           for (i = 1; i < 5; i++) //M1 to M4
           {
               $(xml).find("Ghesaar" + rnd + " > M" + i).each(function(){
                   obj.append($(this).text() + ' ');
               });
           }
       }
      
       //ajax loader       
       $.ajax({
           type: "GET",
           url: "Ghesaar.xml",
           dataType: "xml",
           success: parseXml
       });
      
       //timer
       window.setInterval(function(){
           obj.empty().hide();
           parseXml(ourXml);
           obj.fadeIn("slow");
       }, options.interval * 1000);
      
   });
  

};

فرمت این فایل ساده و استاندارد است. نام فایل jquery.ghesaar.js خواهد بود.
سپس قسمت استاندارد توسعه options اضافه می‌شود تا بتوان به تابع افزونه خود مقدار interval را پاس کرد تا از این حالت خشک و جمود خارج شود.
کل وقایع افزونه درون تابع زیر رخ می‌دهد:


   return this.each(function(){
...

});

اینجا همان کدهایی را که پیشتر توسعه دادیم بدون هیچ تغییری قرار می‌دهیم.
سپس در ابتدای کار شیء this که اشاره‌گری است به شیء انتخاب شده توسط جی‌کوئری را دریافت کرده و هرجایی را که قبلا $("#output") داشتیم، تبدیل به obj می‌کنیم. (یعنی این مورد هم به انتخاب کاربر خواهد شد)
جهت دریافت مقدار تنظیمی interval هم می‌توان از options.interval استفاده کرد.
به این صورت کد ما تبدیل به یک افزونه جی‌کوئری می‌شود.

اینبار نحوه‌ی استفاده از افزونه‌ی تولیدی به صورت زیر است: (عدد interval بر اساس ثانیه است)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       <title>XML</title>
       <script src='jquery-1.3.min.js' type='text/javascript'></script>
  <script src='jquery.ghesaar.js' type='text/javascript'></script>
       <script type="text/javascript">
           $(document).ready(function(){
               $("#output").ghesaar({interval:5});    
           });
          
       </script>
   </head>
   <body>
           <span id="output" dir="rtl" style=" "/>
   </body>

</html>

بهتر شد، نه؟!

به صورت ساده:
برای استفاده از آن، سه فایل jquery-1.3.min.js (یا نگارش جدیدتر آن)، jquery.ghesaar.js و Ghesaar.xml را باید آپلود کنید. چند سطری را که در قسمت head صفحه فوق مشاهده می‌نمائید باید اضافه شوند. سپس یک span یا div را جهت نمایش این جملات قصار به هر جایی از ساختار صفحه خود که علاقمند بودید اضافه کنید (id آن مهم است و در قسمت نمایش جملات قصار مورد جستجو قرار می‌گیرد).

فایل‌های این پروژه را از اینجا دریافت کنید.

‫۱۵ سال و ۱۰ ماه قبل، چهارشنبه ۱۶ بهمن ۱۳۸۷، ساعت ۱۶:۵۹

رضا محمدزاده

نظرات مطالب

ارسال فایل و تصویر به همراه داده‌های دیگر از طریق jQuery Ajax

سلام، من وقتی میخوام دیتا رو به سمت سرور ارسال کنم براساس مثال بالا مشکلی نداره فقط مشکلی که وجود داره اینه دیتای بازگشتی Response رو بصورت جیسون پاس نمیده بهم! من از Webmethod‌ها در asp.net استفاده میکنم و [ScriptMethod(ResponseFormat = ResponseFormat.Json)] رو هم اضافه کردم البته در کدهای دیگه که دارم مشکلی نیست اما این کد دیتا رو بصورت جیسون پاس نمیده

var formData = new FormData();
            formData.append('Organizations', $('#Organizations').val());
            formData.append('OrgNameInReports', $('#OrgNameInReports').val());
            formData.append('CenterTypes', $('#CenterTypes').val());
            formData.append('Users', $('#Users').val());
            formData.append('Comments', $('#Comments').val());
            formData.append('UserTypes', $('#UserTypes').val());

            jQuery.each($('#profile-img')[0].files, function (i, file) {
                formData.append('picture-' + i, file);
            });
            $.ajax({                
                url: 'SettingPages/OrgManagmentService.asmx/SaveNewOrgManager',
                type: 'POST',
                data: formData,
                 dataType: 'json',
                contentType: false,
                processData: false,

                beforeSend: function () {
                    Preloader();
                },
                complete: function (data) {
                    
                    RemovePreloader();
                },
                success: function (data, status) { 
                    data = JSON.stringify(data);
                    console.log(data);
                   

                },
                error: function (data, status,e) {
                    alert(status);
                }
            });

‫۴ سال و ۵ ماه قبل، سه‌شنبه ۹ اردیبهشت ۱۳۹۹، ساعت ۰۶:۵۱

وحید نصیری

مطالب

ثبت لینک‌های غیرتکراری

ثبت لینک‌های مختلف در یک سیستم (مثلا قسمت به اشتراک گذاری لینک‌ها) در ابتدای کار شاید ساده به نظر برسد؛ خوب، هر صفحه‌ای که یک آدرس منحصربفرد بیشتر ندارد. ما هش این لینک را محاسبه می‌کنیم و بعد روی این هش، یک کلید منحصربفرد را تعریف خواهیم کرد تا دیگر رکوردی تکراری ثبت نشود. همچنین چون این هش نیز طول کوتاهی دارد، جستجوی آن بسیار سریع خواهد بود. واقعیت این است که خیر! این روش ناکارآمدترین حالت پردازش لینک‌های مختلف است.
برای مثال لینک‌های http://www.site.com و http://www.site.com/index.htm دو هش متفاوت را تولید می‌کنند اما در عمل یکی هستند. نمونه‌ی دیگر، لینک‌های http://www.site.com/index.htm و http://www.site.com/index.htm#section1 هستند که فقط اصطلاحا در یک fragment با هم تفاوت دارند و از این دست لینک‌هایی که باید در حین ثبت یکی درنظر گرفته شوند، زیاد هستند و اگر علاقمند به مرور آن‌ها هستید، می‌توانید به صفحه‌ی URL Normalization در ویکی‌پدیا مراجعه کنید.
اگر نکات این صفحه را تبدیل به یک کلاس کمکی کنیم، به کلاس ذیل خواهیم رسید:

using System;
using System.Web;

namespace OPMLCleaner
{
    public static class UrlNormalization
    {
        public static bool AreTheSameUrls(this string url1, string url2)
        {
            url1 = url1.NormalizeUrl();
            url2 = url2.NormalizeUrl();
            return url1.Equals(url2);
        }

        public static bool AreTheSameUrls(this Uri uri1, Uri uri2)
        {
            var url1 = uri1.NormalizeUrl();
            var url2 = uri2.NormalizeUrl();
            return url1.Equals(url2);
        }

        public static string[] DefaultDirectoryIndexes = new[]
            {
                "default.asp",
                "default.aspx",
                "index.htm",
                "index.html",
                "index.php"
            };

        public static string NormalizeUrl(this Uri uri)
        {
            var url = urlToLower(uri);
            url = limitProtocols(url);
            url = removeDefaultDirectoryIndexes(url);
            url = removeTheFragment(url);
            url = removeDuplicateSlashes(url);
            url = addWww(url);
            url = removeFeedburnerPart(url);
            return removeTrailingSlashAndEmptyQuery(url);
        }

        public static string NormalizeUrl(this string url)
        {
            return NormalizeUrl(new Uri(url));
        }

        private static string removeFeedburnerPart(string url)
        {
            var idx = url.IndexOf("utm_source=", StringComparison.Ordinal);
            return idx == -1 ? url : url.Substring(0, idx - 1);
        }

        private static string addWww(string url)
        {
            if (new Uri(url).Host.Split('.').Length == 2 && !url.Contains("://www."))
            {
                return url.Replace("://", "://www.");
            }
            return url;
        }

        private static string removeDuplicateSlashes(string url)
        {
            var path = new Uri(url).AbsolutePath;
            return path.Contains("//") ? url.Replace(path, path.Replace("//", "/")) : url;
        }

        private static string limitProtocols(string url)
        {
            return new Uri(url).Scheme == "https" ? url.Replace("https://", "http://") : url;
        }

        private static string removeTheFragment(string url)
        {
            var fragment = new Uri(url).Fragment;
            return string.IsNullOrWhiteSpace(fragment) ? url : url.Replace(fragment, string.Empty);
        }

        private static string urlToLower(Uri uri)
        {
            return HttpUtility.UrlDecode(uri.AbsoluteUri.ToLowerInvariant());
        }

        private static string removeTrailingSlashAndEmptyQuery(string url)
        {
            return url
                    .TrimEnd(new[] { '?' })
                    .TrimEnd(new[] { '/' });
        }

        private static string removeDefaultDirectoryIndexes(string url)
        {
            foreach (var index in DefaultDirectoryIndexes)
            {
                if (url.EndsWith(index))
                {
                    url = url.TrimEnd(index.ToCharArray());
                    break;
                }
            }
            return url;
        }
    }
}

از این روش برای تمیز کردن و حذف فیدهای تکراری در فایل‌های OPML تهیه شده نیز می‌شود استفاده کرد. عموما فیدخوان‌های نه‌چندان با سابقه، نکات یاد شده در این مطلب را رعایت نمی‌کنند و به سادگی می‌شود در این سیستم‌ها، فیدهای تکراری زیادی را ثبت کرد.
برای مثال اگر یک فایل OPML چنین ساختار XML ایی را داشته باشد:

<?xml version="1.0" encoding="utf-8"?>
<opml xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" version="1.0">
  <body>
    <outline text="آی تی ایرانی">
    <outline type="rss" 
                           text="‫فید کلی آخرین نظرات، مطالب، اشتراک‌ها و پروژه‌های .NET Tips" 
                           title="‫فید کلی آخرین نظرات، مطالب، اشتراک‌ها و پروژه‌های .NET Tips" 
                           xmlUrl="https://www.dntips.ir/Feed/LatestChanges"
                           htmlUrl="https://www.dntips.ir/" />
    </outline> 
  </body>
</opml>

هر outline آن‌را به کلاس زیر می‌توان نگاشت کرد:

using System.Xml.Serialization;

namespace OPMLCleaner
{
    [XmlType(TypeName="outline")]
    public class Opml
    {
        [XmlAttribute(AttributeName="text")]
        public string Text { get; set; }

        [XmlAttribute(AttributeName = "title")]
        public string Title { get; set; }

        [XmlAttribute(AttributeName = "type")]
        public string Type { get; set; }

        [XmlAttribute(AttributeName = "xmlUrl")]
        public string XmlUrl { get; set; }

        [XmlAttribute(AttributeName = "htmlUrl")]
        public string HtmlUrl { get; set; }
    }
}

برای اینکار فقط کافی است از LINQ to XML به نحو ذیل استفاده کنیم:

var document = XDocument.Load("it-92-03-01.opml");
var results = (from node in document.Descendants("outline")
                           where node.Attribute("htmlUrl") != null && node.Parent.Attribute("text") != null 
                            && node.Parent.Attribute("text").Value == "آی تی ایرانی"
                           select new Opml
                           {
                               HtmlUrl = (string)node.Attribute("htmlUrl"),
                               Text = (string)node.Attribute("text"),
                               Title = (string)node.Attribute("title"),
                               Type = (string)node.Attribute("type"),
                               XmlUrl = (string)node.Attribute("xmlUrl")
                           }).ToList();

در این حالت لیست کلیه فیدهای یک گروه را چه تکراری و غیرتکراری، دریافت خواهیم کرد. برای حذف موارد تکراری نیاز است از متد Distinct استفاده شود. به همین جهت باید کلاس ذیل را نیز تدارک دید:

using System.Collections.Generic;

namespace OPMLCleaner
{
    public class OpmlCompare : EqualityComparer<Opml>
    {
        public override bool Equals(Opml x, Opml y)
        {
            return UrlNormalization.AreTheSameUrls(x.HtmlUrl, y.HtmlUrl);                
        }

        public override int GetHashCode(Opml obj)
        {
            return obj.HtmlUrl.GetHashCode();
        }
    }
}

اکنون با کمک کلاس OpmlCompare فوق که از کلاس UrlNormalization برای تشخیص لینک‌های تکراری استفاده می‌کند، می‌توان به لیست بهتر و متعادل‌تری رسید:

 var distinctResults = results.Distinct(new OpmlCompare()).ToList();

‫۱۰ سال و ۱۱ ماه قبل، یکشنبه ۱۰ آذر ۱۳۹۲، ساعت ۲۳:۴۵

علی یگانه مقدم

اشتراک‌ها

خواندن RSS در اندورید

تکه کدی برای خواندن RSS در اندروید به همراه مثال

‫۹ سال و ۸ ماه قبل، شنبه ۱۶ اسفند ۱۳۹۳، ساعت ۰۰:۱۹

وحید نصیری

نظرات اشتراک‌ها

منابع مطالعاتی Owin - قسمت دوم

در یکی از فیدخوان‌های آنلاین آدرس سایتش را وارد کنید. بعد قادر خواهید مطالب آن‌را از طریق فید سایت مطالعه کنید. فید خوان‌ها قابلیت auto discovery دارند. یعنی قادرند صفحه‌ی اصلی سایت را برای یافتن فید RSS آن اسکن کنند و link type=application/rss+xml‌ها را مورد استفاده قرار دهند.

‫۱۰ سال و ۸ ماه قبل، دوشنبه ۵ اسفند ۱۳۹۲، ساعت ۰۴:۵۷

مجتبی کاویانی

مطالب

JQuery Plugins #1

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

از کجا شروع کنیم

برای نوشتن پلاگین یک تابع با نام خاصیتی جدید را به jQuery.fn اضافه می‌نماییم.

jQuery.fn.myPlugin = function() {
//محتویات پلاگین را اینجا می‌نویسیم
};

اما، برای اینکه بتوانیم از میانبر $ در پلاگین استفاده نماییم و تداخلی با سایر کتابخانه‌ها نداشته باشد، از الگوی (IIFE (Immediately Invoked Function Expression D به صورت زیر استفاده می‌نماییم:

(function( $ ) {
  $.fn.myPlugin = function() {
  //محتویات پلاگین را اینجا می‌نویسیم
    };
})( jQuery );

محتوای پلاگین

حال می‌توانیم در تابع، کدهای پلاگین خود را بنویسیم. برای دسترسی به شیء پاس داده شده به پلاگین، از کلمه کلیدی this استفاده کرده و لازم نیست از (this)$ استفاده نماییم. در زیر یک پلاگین ساده تهیه شده است که با رفتن ماوس بر روی یک متن، خطی زیر آن می‌کشد:

(function($){
    $.fn.underline= function() {
        this.hover(function(){
            $(this).css( { text-decoration : underline })
        }, function(){
            $(this).css( { text-decoration : none } )
        });
    };
})(jQuery);
 
$("p").underline();

پلاگین بالا مقدار یا شیء ایی را بر نمی‌گرداند؛ اما اگر بخواهیم مقداری را برگردانیم از return استفاده می‌نماییم:

(function( $ ){

  $.fn.maxHeight = function() {
  
    var max = 0;

    this.each(function() {
      max = Math.max( max, $(this).height() );
    });

    return max;
  };
})( jQuery );

var tallest = $('div').maxHeight(); // بیشترین ارتفاع عنصر را برمی گرداند

حفظ خاصیت زنجیره‌ای پلاگین ها

در مثال بالا یک مقدار عددی برگردانده شده است؛ اما برای اینکه بتوانیم بصورت زنجیر وار خروجی پلاگین را به تابع یا هر پالاگین دیگری پاس دهیم از تابع each بصورت زیر استفاده می‌نماییم:

(function( $ ){

  $.fn.lockDimensions = function( type ) {  

    return this.each(function() {

      var $this = $(this);

      if ( !type || type == 'width' ) {
        $this.width( $this.width() );
      }

      if ( !type || type == 'height' ) {
        $this.height( $this.height() );
      }

    });

  };
})( jQuery );

$('div').lockDimensions('width').css('color', 'red');

در پلاگین بالا با از تابع each برای روی this و برگرداندن آن با return برای حفظ خاصیت زنجیره‌ای پلاگین استفاده می‌نماییم. در تابع each می‌بایست از (this)$ برای انجام عملیات بر روی شیء پاس داده شده استفاده کنیم. بدین صورت بعد از صدا زدن پلاگین، دوباره می‌توانیم از هر پلاگین یا تابع جی کوئری دیگری بر روی خروجی استفاده نماییم.

پیش فرض‌ها و تنظیمات

در پلاگین‌های پیشرفته‌تر می‌توانیم تنظیمات پیش فرضی را برای پلاگین در نظر بگیریم و این تنظیمات را به عنوان پارامتر ورودی از کاربر دریافت نماییم. جی کوئری دارای تابعی به نام extend است که امکان گسترش و ترکیب دو شیء را امکان پذیر می‌سازد به مثال زیر توجه نمایید:

(function( $ ){

  $.fn.tooltip = function( options ) {  

    var settings = $.extend( {
      'location'         : 'top',
      'background-color' : 'blue'
    }, options);

    return this.each(function() {        

      // Tooltip plugin code here

    });

  };
})( jQuery );

$('div').tooltip({
  'location' : 'left'
});

در این مثال، شیء settings با دو خاصیت location و background-color تعریف شده که با شیء options که از ورودی پلاگین دریافت نموده‌ایم با استفاده از تابع extend ترکیب شده است. خاصیت‌های که تعیین نشده باشند با مقادیر پیش فرض آن‌ها تکمیل می‌گردد.

ادامه دارد...

‫۱۱ سال و ۸ ماه قبل، دوشنبه ۷ اسفند ۱۳۹۱، ساعت ۱۹:۵۵

وحید نصیری

مطالب

غیرفعال کردن کش مرورگر هنگام استفاده از jQuery Ajax

برای استفاده از قابلیت‌های Ajax کتابخانه jQuery ، شش متد زیر در اختیار برنامه نویس‌ها است:


$.ajax(), load(), $.get(), $.getJSON(), $.getScript(), and $.post()

که در حقیقت 5 مورد آخر ذکر شده صرفا بیان اولین متد ajax فوق به نحوی دیگر می‌باشند و محصور کننده‌ توانایی‌های آن هستند.

برای مثال کد زیر زمان جاری را از سرور دریافت کرده و نتیجه را در سه تکست باکس قرار داده شده در صفحه نمایش می‌دهد.
ابتدا وب سرویس ساده زیر را در نظر بگیرید که زمان شمسی جاری را بر می‌گرداند:


using System;
using System.Globalization;
using System.Web.Script.Services;
using System.Web.Services;

namespace TestJQueryAjax
{
 [WebService(Namespace = "http://tempuri.org/")]
 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
 [System.ComponentModel.ToolboxItem(false)]
 [ScriptService]
 public class AjaxSrv : WebService
 {
     public class TimeInfo
     {
         public string Date { set; get; }
         public string Hr { set; get; }
         public string Min { set; get; }
     }

     [WebMethod(EnableSession = true)]
     [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
     public TimeInfo GetTime()
     {
         DateTime now = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day);
         PersianCalendar pc = new PersianCalendar();
         string today = string.Format("{0}/{1}/{2}",
                                         pc.GetYear(now),
                                         pc.GetMonth(now).ToString("00"),
                                         pc.GetDayOfMonth(now).ToString("00"));
         TimeInfo ti = new TimeInfo
         {
             Date = today,
             Hr = DateTime.Now.Hour.ToString("00"),
             Min = DateTime.Now.Minute.ToString("00")
         };
         return ti;
     }
 }
}

سپس اگر از تابع Ajax کتابخانه jQuery جهت دریافت زمان جاری از وب سرویس استفاده نمائیم، کد صفحه ما به صورت زیر خواهد بود:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestFillCtrls.aspx.cs"
 Inherits="TestJQueryAjax.TestFillCtrls" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>

 <script src="js/jquery.js" type="text/javascript"></script>

 <script type="text/javascript">
     function validate() {
         $.ajax({
             type: "POST",
             url: 'AjaxSrv.asmx/GetTime',
             data: '{}',
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             success:
                 function(msg) {                     
                     $("#<%=txtDate.ClientID %>").val(msg.d.Date);
                     $("#<%=txtHr.ClientID %>").val(msg.d.Hr);
                     $("#<%=txtMin.ClientID %>").val(msg.d.Min);
                 },
             error:
                 function(XMLHttpRequest, textStatus, errorThrown) {
                     alert("خطایی رخ داده است");
                 }
         });
         //debugger;
     } 
 </script>

</head>
<body>
 <form id="form1" runat="server">
 <div>
     <asp:TextBox ID="txtDate" runat="server" />
     <br />
     <asp:TextBox ID="txtHr" runat="server" />
     <br />
     <asp:TextBox ID="txtMin" runat="server" />
     <br />
     <asp:Button ID="btnGetTime" runat="server" Text="Click here!" UseSubmitBehavior="false"
             OnClientClick="validate();return false;" />
 </div>
 </form>
</body>
</html>

تنها نکته‌ی جدید این اسکریپت، نحوه‌ی استفاده از خروجی JSON وب متد ما است که از نوع TimeInfo تعریف شده است. خروجی نمونه این وب متد به صورت زیر می‌تواند باشد:


{"d":{"__type":"TestJQueryAjax.AjaxSrv+TimeInfo","Date":"1388/07/14","Hr":"12","Min":"59"}}

که نحوه‌ی دسترسی به اجزای آن‌را در متد validate‌ ملاحظه می‌نمائید.

باید به خاطر داشت که برای هر 6 متد Ajax ایی jQuery ، عملیات کش شدن اطلاعات در مرورگر کاربر به صورت پیش فرض فعال است. اما این نکته تنها زمانیکه dataType مورد استفاده از نوع script یا jsonp باشد، صادق نبوده و کش شدن به صورت خودکار غیرفعال می‌گردد.
روش سنتی غیرفعال کردن کش در حین عملیات اجکسی، استفاده از یک کوئری استرینگ متغیر در پایان url درخواستی است. به این صورت مرورگر درخواست صادره را جدید فرض کرده و از کش خود استفاده نمی‌نماید (همین مورد در حالت کش شدن تصاویر هم صادق است).
jQuery نیز همین عملیات را در پشت صحنه انجام داده اما تنظیم آن‌را به نحوی مطلوب‌تری ارائه می‌دهد. یا پارامتر cache را در تعریف متد ajax خود اضافه نموده و مقدار آن را مساوی false قرار دهید و یا جهت تاثیر گذاری بر روی کلیه متدهای مورد استفاده، پیش از استفاده از آن‌ها این تنظیم را مشخص سازید:


$.ajaxSetup({cache: false});

‫۱۵ سال و ۲ ماه قبل، سه‌شنبه ۱۴ مهر ۱۳۸۸، ساعت ۲۳:۵۸

شاهین کیاست

مطالب

Closure در JavaScript

در قسمت قبلی درباره علت نیاز به الگوهای طراحی در JavaScript و Function Spaghetti code صحبت شد. در این قسمت Closure در JavaScript مورد بررسی قرار می‌گیرد.

در JavaScript می‌توان توابع تو در تو نوشت (nested functions) ، زمانی که یک تابع درون تابع دیگر تعریف می‌شود تابع درونی به تمام متغیر‌ها و توابع تابع بیرونی (Parent) دسترسی دارد.

Douglas Crockford برای تعریف Closure می‌گوید :

an inner function always has access to the vars and parameters of its outer function, even after the outer function has returned

یک تابع درونی (nested) همیشه به متغیر‌ها و پارامتر‌ها تابع بیرونی دسترسی دارد ، حتی اگر تابع بیرونی مقدار برگردانده باشد.

تابع زیر را در نظر بگیرید :

// The getDate() function returns a nested function which refers the 'date' variable defined
// by outer function getDate()
function getDate() {
   var date = new Date();    // This variable stays around even after function returns

   // nested function
   return function () {
      return date.getMilliseconds();
   }
}

اکنون اگر به صورت زیر تابع getDate فراخوانی شود مشاهده می‌شود که تابع درونی (با کامنت nested function مشخص شده است.) به شیء date دسترسی دارد.

// Once getDate() is executed the variable date should be out of scope and it is, but since
// the inner function
// referenes date, this value is available to the inner function.
var dt = getDate();

alert(dt());
alert(dt());

خروجی هر 2 alert یک مقدار خواهد بود.

اگر از فردی که به تازگی رو به JavaScript آورده است خواسته شود تابعی بنویسد که میلی ثانیه‌ی زمان جاری را برگداند احتمالا همچین کدی تحویل می‌دهد :

        function myNonClosure() {
            var date = new Date();
            return date.getMilliseconds();
        }

در کد بالا پس از اجرای myNonClosure متغیر date از بین خواهد رفت ، این مسئله در دنیای JavaScript طبیعی هست.

این مثال را در نظر بگیرید :

var MyDate = function () {
    var date = new Date();
    var getMilliSeconds = function () {
        return date.getMilliseconds();
    }
}

var dt = new MyDate();

alert(dt.getMilliSeconds());  // This will throw error as getMilliSeconds is not accessible.

در صورت اجرای مثال بالا خطایی با این مضمون دریافت خواهد شد که getMilliSeconds دستیابی پذیر نیست. (کپسوله شده) برای اینکه آن را دستیابی پذیر کنیم کد را به این صورت تغییر می‌دهیم :

// This is closure 
var MyDate = function () {
    var date = new Date();   // variable stays around even after function returns
    var getMilliSeconds = function () {
        return date.getMilliseconds();
    };
    return {
        getMs : getMilliSeconds
    }
}

آنچه در تابع بالا انجام شده کپسوله سازی همه‌ی منطق کار (منطق کار در اینجا برگرداندن میلی ثانیه زمان جاری می‌باشد) در یک فضای نام به نام MyDate می‌باشد. همچنین فقط متد‌های عمومی در اختیار استفاده کننده این تابع قرار داده شده است. برای استفاده می‌توان بدین صورت عمل کرد :

var dt = new MyDate();
alert(dt.getMs());  // This should work.

در کد بالا برای توابع و متغیر‌های درونی یک container ایجاد کردیم که باعث جلوگیری از تداخل در نام متغیر‌ها با دیگر کد‌ها خواهد شد . (برای مشاهده‌ی تداخل‌ها به قسمت قبلی توجه کنید.)

اگر بخواهیم Closure را تشبیه کنیم ، Closure شبیه به کلاس‌ها در C# یا Java هست.

Closure یک حوزه (scope) برای متغیر‌ها و توابع درونی خودش ایجاد می‌کند.

jQuery بهترین مثال کاربردی برای Closure می‌باشد :

(function($) {

    // $() is available here

})(jQuery);

در ادامه این مفاهیم بیشتر توضیح داده می‌شودند ، اکنون می‌خواهیم مشکلی که در قسمت قبلی مطرح کردیم به کمک Closure حل کنیم :

در آن مثال گفته شد که اگر :

// file1.js
function saveState(obj) {
    // write code here to saveState of some object
    alert('file1 saveState');
}
// file2.js (remote team or some third party scripts)
function saveState(obj, obj2) {
     // further code...
    alert('file2 saveState");
}

اگر تابعی به نام saveState در 2 فایل مختلف داشته باشیم و این 2 فایل را بدین صورت در برنامه آدرس دهیم :

<script src="file1.js" type="text/javascript"></script>
<script src="file2.js" type="text/javascript"></script>

تابع saveState در فایل دوم تابع saveState فایل اول را override می‌کند. یک از توابع بالا را به صورت زیر باز نویسی می‌کنیم و منطق کار را کپسوله می‌کنیم :

function App() {
    var save = function (o) {
        // write code to save state here..
        // you have acces to 'o' here...
        alert(o);
    };

    return {
        saveState: save
    };
}

بدون نگرانی تداخل saveState با بقیه saveState‌ها در هر پلاگین یا فایل دیگری می‌توان از saveState می‌توان اینگونه استفاده کرد :

var app = new App();

app.saveState({ name: "rajesh"});

برای اطلاعات بیشتر در مورد Closure ها این لینک را بررسی کنید.

‫۱۲ سال و ۴ ماه قبل، یکشنبه ۴ تیر ۱۳۹۱، ساعت ۱۱:۴۸

وحید نصیری

مطالب

استفاده از jQuery Ajax جهت تعیین اعتبار یک فرم

فرض کنید تعیین اعتبار یکی از فیلدهای فرم نیاز به انجام محاسباتی در سمت سرور دارد و این‌کار را می‌خواهیم با استفاده از jQuery Ajax‌ انجام دهیم. مشکلی که در اینجا وجود دارد، این است که A در Ajax به معنای asynchronous است. یعنی زمانیکه کاربر دکمه submit را فشرد، دیگر برنامه منتظر این نخواهد شد که پاسخ کامل دریافت شود ، سایر پردازش‌ها صورت گیرد و سپس فرم را به سرور ارسال نماید (شبیه به ایجاد یک ترد جدید در برنامه‌های ویندوزی). مثال زیر را در نظر بگیرید:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestCustomValidation.aspx.cs"
 Inherits="TestJQueryAjax.TestCustomValodation" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>

 <script src="js/jquery.js" type="text/javascript"></script>

 <script type="text/javascript">
     function validate() {
         var number1 = $("#<%=txtNumber1.ClientID %>").val();
         var number2 = $("#<%=txtNumber2.ClientID %>").val();
         var result = false;         
         $.ajax({
             type: "POST",
             url: 'AjaxSrv.asmx/ValidateIt',
             data: '{"number1":' + number1 + ',"number2":' + number2 + '}',
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             success:
                 function(msg) {
                     if (msg.d) {
                         result = true;
                         alert('بسیار خوب');
                     }
                     else {
                         result = false;
                         alert('دوباره سعی کنید');
                     }
                 },
             error:
                 function(XMLHttpRequest, textStatus, errorThrown) {
                     result = false;
                     alert("خطایی رخ داده است");
                 }
         });
         //debugger;
         return result;
     } 
 </script>

</head>
<body>
 <form id="form1" runat="server">
 <div>
     number 1 :
     <asp:TextBox runat="server" ID="txtNumber1" />
     <br />
     number 2 :
     <asp:TextBox runat="server" ID="txtNumber2" />
     <br />
     <asp:Button ID="btnSubmit" Text="Submit" UseSubmitBehavior="false" runat="server"
         OnClientClick="if(!validate()){ return false;}" OnClick="btnSubmitClick" />
 </div>
 </form>
</body>
</html>

این مثال یک نوع اعتبار سنجی سفارشی را در حین submit با استفاده از وب سرویس زیر انجام می‌دهد (حاصلضرب دو عدد دریافتی را بررسی می‌کند که باید مساوی 10 باشند. البته هدف از این مثال ساده، آشنایی با نحوه‌ی انجام این نوع عملیات است که می‌تواند شامل کار با دیتابیس و غیره هم باشد. و گرنه بدیهی است این بررسی را با دو سطر کد جاوا اسکریپتی نیز می‌شد انجام داد):


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;

namespace TestJQueryAjax
{
 /// <summary>
 /// Summary description for AjaxSrv
 /// </summary>
 [WebService(Namespace = "http://tempuri.org/")]
 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
 [System.ComponentModel.ToolboxItem(false)]
 [ScriptService]
 public class AjaxSrv : System.Web.Services.WebService
 {
     [WebMethod(EnableSession = true)]
     [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
     public bool ValidateIt(int number1, int number2)
     {         
         return number1 * number2 == 10;
     }     
 }
}

در این مثال هنگام submit ، عملیات اعتبار سنجی با توجه به وضعیت asynchronous عملیات Ajax ، تمام و کمال رخ نداده ، یا اعتبار سنجی انجام نمی‌شود و یا پیغام خطایی را دریافت خواهیم کرد.

راه حل چیست؟
راه حل‌های فضایی بسیاری را در وب در این مورد می‌توان پیدا کرد؛ اما راه حل استاندارد آن در این حالت ویژه، استفاده از Ajax در حالت غیرهمزمان است. یعنی این فریم ورک Ajax را وادار کنیم که تا پایان عملیات مورد نظر، منتظر بماند و سپس فرم را ارسال کند. برای این منظور تنها کافی است یک سطر زیر را پیش از فراخوانی تابع Ajax ، اضافه و فراخوانی نمائیم:


$.ajaxSetup({async: false}) ;

نکته:
UseSubmitBehavior دکمه ما را به شکل زیر رندر می‌کند (دکمه به یک button معمولی (بجای حالت submit) تبدیل شده و سپس یک doPostBack را اضافه خواهد کرد):


<input id="btnSubmit" type="button" onclick="if(!validate()){ return false;};__doPostBack('btnSubmit','')" value="Submit" name="btnSubmit"/>

‫۱۵ سال و ۴ ماه قبل، یکشنبه ۱۱ مرداد ۱۳۸۸، ساعت ۰۱:۲۸

وحید نصیری

مطالب

استفاده از LINQ to XML جهت خواندن فیدهای RSS

مثال زیر را به عنوانی نمونه‌ای از کاربرد LINQ to XML برای خواندن فیدهای RSS که اساسا به فرمت XML هستند می‌توان ارائه داد.
ابتدا کد کامل مثال را در نظر بگیرید:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Xml.Linq;

namespace LinqToRSS
{
 public static class LanguageExtender
 {
     public static string SafeValue(this XElement input)
     {
         return (input == null) ? string.Empty : input.Value;
     }

     public static DateTime SafeDateValue(this XElement input)
     {
         return (input == null) ? DateTime.MinValue : DateTime.Parse(input.Value);
     }
 }

 public class RssEntry
 {
     public string Title { set; get; }
     public string Description { set; get; }
     public string Link { set; get; }
     public DateTime PublicationDate { set; get; }
     public string Author { set; get; }
     public string BlogName { set; get; }
     public string BlogAddress { set; get; }
 }

 public class Rss
 {
     static XElement selectDate(XElement date1, XElement date2)
     {
         return date1 ?? date2;
     }

     public static List<RssEntry> GetEntries(string feedUrl)
     {
         //applying namespace in an XElement
         XName xn = XName.Get("{http://purl.org/dc/elements/1.1/}creator");//{namespace}root
         XName xn2 = XName.Get("{http://purl.org/dc/elements/1.1/}date");

         var feed = XDocument.Load(feedUrl);
         if (feed.Root == null) return null;

         var items = feed.Root.Element("channel").Elements("item");
         var feedQuery =
             from item in items
             select new RssEntry
                        {
                            Title = item.Element("title").SafeValue(),
                            Description = item.Element("description").SafeValue(),
                            Link = item.Element("link").SafeValue(),
                            PublicationDate =
                                selectDate(item.Element(xn2), item.Element("pubDate")).SafeDateValue(),
                            Author = item.Element(xn).SafeValue(),
                            BlogName = item.Parent.Element("title").SafeValue(),
                            BlogAddress = item.Parent.Element("link").SafeValue()
                        };

         return feedQuery.ToList();
     }
 }

 class Program
 {
     static void Main(string[] args)
     {
         List<RssEntry> entries = Rss.GetEntries("http://weblogs.asp.net/aspnet-team/rss.aspx");
         if (entries != null)
             foreach (var item in entries)
                 Console.WriteLine(item.Title);

         Console.WriteLine("Press a key...");
         Console.ReadKey();
     }
 }
}

توضیحات:
1- در این مثال فقط جهت سهولت بیان آن در یک صفحه، تمامی کلاس‌های تعریف شده در یک فایل آورده شدند. این روش صحیح نیست و باید به ازای هر کلاس یک فایل جدا در نظر گرفته شود.
2- کلاس LanguageExtender از قابلیت extension methods سی شارپ 3 استفاده می‌کند. به این صورت کلاس XElement دات نت بسط یافته و دو متد به آن اضافه می‌شود که به سادگی در کدهای خود می‌توان از آن‌ها استفاده کرد. هدف آن هم بررسی نال بودن یک آیتم دریافتی و ارائه‌ی حاصلی امن برای این مورد است.
3- کلاس RssEntry به جهت استفاده در خروجی کوئری LINQ تعریف شد. می‌خواهیم خروجی نهایی، یک لیست جنریک از نوع RssEntry باشد.
4- متد اصلی برنامه، GetEntries است. این متد آدرس اینترنتی یک فید را دریافت کرده و پس از آنالیز، آن‌را به صورت یک لیست بر می‌گرداند.


<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/xsl" href="http://weblogs.asp.net/utility/FeedStylesheets/rss.xsl" media="screen"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:wfw="http://wellformedweb.org/CommentAPI/">
<channel>
 <title>Latest Microsoft Blogs</title>
 <link>http://weblogs.asp.net/aspnet-team/default.aspx</link>
 <description />
 <dc:language>en</dc:language>
 <generator>CommunityServer 2007 SP1 (Build: 20510.895)</generator>
 <item>
   <title>Comments on my recent benchmarks.</title>
   <link>http://misfitgeek.com/blog/aspnet/comments-on-my-recent-benchmarks/</link>
   <pubDate>Mon, 10 Aug 2009 23:33:59 GMT</pubDate>
   <guid isPermaLink="false">c06e2b9d-981a-45b4-a55f-ab0d8bbfdc1c:7166225</guid>
   <dc:creator>Misfit Geek: msft</dc:creator>
   <slash:comments>0</slash:comments>
   <wfw:commentRss xmlns:wfw="http://wellformedweb.org/CommentAPI/">http://weblogs.asp.net/aspnet-team/rsscomments.aspx?PostID=7166225</wfw:commentRss>
   <comments>http://misfitgeek.com/blog/aspnet/comments-on-my-recent-benchmarks/#comments</comments>
   <description>Overall I’ve been pretty impressed ...</description>
   <category domain="http://weblogs.asp.net/aspnet-team/archive/tags/ASP.NET/default.aspx">ASP.NET</category>
 </item>
</channel>
</rss>

برای نمونه خروجی یک فید می‌تواند به صورت فوق باشد. آیتم‌های آن به صورت قابل بیان است:

var items = feed.Root.Element("channel").Elements("item");

و نکته مهمی که اینجا وجود دارد، اعمال فضاهای نام بکار رفته در این فایل xml پیشرفته می‌باشد. برای اعمال فضاهای نام به یکی از دو روش زیر می‌توان عمل کرد:


XName.Get("{mynamespace}root");
//or
XName.Get("root", "mynamespace");

‫۱۵ سال و ۳ ماه قبل، شنبه ۲۴ مرداد ۱۳۸۸، ساعت ۰۰:۳۵