Code.ge Blog » Ajax http://www.code.ge ბლოგი ვებ პროგრამირებისა და ტექნოლოგიების შესახებ Fri, 03 Dec 2010 12:05:16 +0000 en hourly 1 http://wordpress.org/?v=3.0.2 jQuery – მორიგი დიდი აღიარება 2 http://www.code.ge/posts/jquery-%e1%83%9b%e1%83%9d%e1%83%a0%e1%83%98%e1%83%92%e1%83%98-%e1%83%93%e1%83%98%e1%83%93%e1%83%98-%e1%83%90%e1%83%a6%e1%83%98%e1%83%90%e1%83%a0%e1%83%94%e1%83%91%e1%83%90-2 http://www.code.ge/posts/jquery-%e1%83%9b%e1%83%9d%e1%83%a0%e1%83%98%e1%83%92%e1%83%98-%e1%83%93%e1%83%98%e1%83%93%e1%83%98-%e1%83%90%e1%83%a6%e1%83%98%e1%83%90%e1%83%a0%e1%83%94%e1%83%91%e1%83%90-2#comments Mon, 29 Sep 2008 05:59:23 +0000 იოსები http://www.code.ge/?p=148 თითქმის ერთი წელი გავიდა მას შემდეგ რაც jQuery – ს დიდ აღიარებაზე დავპოსტე. ამ JavaScript ბიბლიოთეკას ჩემი ადვოკატობა ნამდვილად არ ესაჭიროება, მაგრამ, ამჯერად მისი აღიარების ძალიან მნიშვნელოვან ფაქტს აქვს ადგილი და არ შემიძლია არ დავწერო :)

jQuery – ს ოფიციალურ ბლოგზე ბოლო პოსტი ამ ღირსშესანიშნავ მოვლენას ეძღვნება: jQuery, Microsoft, and Nokia

Microsoft თავის ცნობილ ASP.NET Ajax ფრეიმვორკს სწორედ jQuery – თი გააფართოვებს და იგი გავრცელდება ვიჟუალ სტუდიოსთან ერთად. Nokia კი თავის Web Run-Time – ს გაამდიდრებს ამ ბიბლიოთეკით.

ასევე ამ თემას ეხება და ძალიან საინტერესოა GWTQuery(jQuery – ის მსგავსი იმპლემენტაცია) რომელიც GWT – ს ბოლო რელიზის პრეზენტაციის დროს აშკარად აქცენტირებული იყო :)

მანამდე რომ YUI – შიც დაამატეს ე.წ “query selector” – ის იმპლემენტაცია მაგაზე აღარაფერს ვამბობ… მთავარი ერთია, რომ ის მიდგომა რომელიც შეიმუშავა ჯონ რეზიგმა, დომინანტი აღმოჩნდა დღევანდელ JavaScript ბიბლიოთეკების გადატვირთულ ბაზარზე. არადა როგორ მწარედ მახსოვს რამდენჯერ მიკამათია მწარედ როგორც .Net – ის, ასევე GWT – სა და YUI – ს თაყვანისმცემლებთან jQuery – ის უპირატესობაზე… მაგრამ უშედეგოდ :D თუმცა როგორც იტყვიან აღდგომა და ხვალეო, დრომ ყველაფერი დაამტკიცა და თავის ადგილზე დააყენა…

Long Live jQuery :D

]]> http://www.code.ge/posts/jquery-%e1%83%9b%e1%83%9d%e1%83%a0%e1%83%98%e1%83%92%e1%83%98-%e1%83%93%e1%83%98%e1%83%93%e1%83%98-%e1%83%90%e1%83%a6%e1%83%98%e1%83%90%e1%83%a0%e1%83%94%e1%83%91%e1%83%90-2/feed 14 Ajax: HTML ფორმის სერიალიზაცია POST რიქვესტისთვის http://www.code.ge/posts/ajax-html-%e1%83%a4%e1%83%9d%e1%83%a0%e1%83%9b%e1%83%98%e1%83%a1-%e1%83%a1%e1%83%94%e1%83%a0%e1%83%98%e1%83%90%e1%83%9a%e1%83%98%e1%83%96%e1%83%90%e1%83%aa%e1%83%98%e1%83%90-post-%e1%83%a0%e1%83%98 http://www.code.ge/posts/ajax-html-%e1%83%a4%e1%83%9d%e1%83%a0%e1%83%9b%e1%83%98%e1%83%a1-%e1%83%a1%e1%83%94%e1%83%a0%e1%83%98%e1%83%90%e1%83%9a%e1%83%98%e1%83%96%e1%83%90%e1%83%aa%e1%83%98%e1%83%90-post-%e1%83%a0%e1%83%98#comments Wed, 05 Dec 2007 08:10:44 +0000 იოსები http://www.code.ge/javascript/ajax-html-%e1%83%a4%e1%83%9d%e1%83%a0%e1%83%9b%e1%83%98%e1%83%a1-%e1%83%a1%e1%83%94%e1%83%a0%e1%83%98%e1%83%90%e1%83%9a%e1%83%98%e1%83%96%e1%83%90%e1%83%aa%e1%83%98%e1%83%90-post-%e1%83%a0%e1%83%98 ვაგრძელებ სერიალიზაციის თემას, და ამჯერად შევეხები HTML ფორმის სერიალიზაციას. HTML ფორმის სერიალიზაციაში იგულისხმება მისი ველების სახელებისა და მნიშვნელობების ჩვეულებრივ პარამეტრი/მნიშვნელობა(parameter/value) სტრიქონში გადაყვანა. ეს ფორმატი ყველასთვის კარგად არის ცნობილი და მას აქვს ტრადიცულად შემდეგი სახე:

param1=value1&param2=value2&param3=value3

ანუ პარამეტრი/მნიშვნელობა წყვილების ერთობლიობა, სადაც წყვილის გამოყოფად გამოიყენება & სიმბოლო.

რა საჭიროა ფორმის ველებისა და მნიშნველობების ასეთი ფორმატში გადაყვანა? ეს მნიშვნელოვანი და აუცილებელია XMLHttpRequest (XHR) კონტექსტში. ცნობილია რომ ე.წ. “Ajax” აპლიკაციებში ფართოდ სწორედ ეს ობიექტი გამოიყენება, და უშუალოდ მისი მეშვეობით ხორციელდება ასინქრონული რიქვესტები(მოთხოვნები?) სერვერზე. გამომდინარე იქედან რომ XHR სერვერვთან კომუნიკაციისათვის იყენებს ჩვეულებრივ HTTP პროტოკოლს, მისი მეშვეობით სევერზე მონაცემების გაგზავნა შეგვიძლია ტრადიციულად ან POST ან GET მეთოდით.

ცნობილია რომ GET მეთოდის გამოყენება რეკომენდირებულია ისეთ შემთხვევაში, როდესაც სერვერზე გასაგზავნი ინფორმაცია არის ძალიან მცირე. რადგან ამ მეთოდის გამოყენებისას სერვერზე გასაგზავნი ყველა პარამეტრი იგზავნება URI – ს მეშვეობით ცხადია რომ გარკვეული შეზღუდვა ინფორმაციის ზომაზე არსებობს.

რაც შეეხება POST მეთოდს, იგი გამოიყენება ისეთ შემთხვევაში როდესაც სერვერზე გასაგზავნი ინფორმაციის ოდენობა არის დიდი. გამომდინარე იქედან რომ GET მეთოდისაგან განსხვავებით ამ ინფორმაციის გაგზავნა სერვერზე ხდება არა URI – ს მეშვეობით არამედ ის იდება უშუალოდ HTTP – ს ტანში ეს შეზღუდვა გარკვეულწილად იხსენბა.

ტრადიციული გზით(იგულისხმება XHR – ის გარეშე) ფორმის სერვერზე გაგზავნის შემთხვევაში ზემოთთქმული ხორციელდება ავტომატურად, ბრაუზერის მიერ. თუმცა XHR – ს მსგავსი რამ არ შეუძლია და ასეთ შემთხვევაში პარამეტრების შესაბამისი მომზადება და ობიექტის მეთოდებისათვის მათი გადაცემის პასუხისმგელობა მთლიანად პროგრამისტს ეკისრება.

GET მეთოდის შემთხვევაში ეს არ წარმოადგენს პრობლემას, ზემოთ მოხსენიებული მიზეზის გამო და ასეთი URI – ს აწყობა საკმაოდ მარტივია თუნდაც პრიმიტიული ხელოვნური მეთოდით. მაგრამ POST მეთოდის გამოყენების შემთხვევაში საქმე ოდნავ უფრო რთულად არის. როგორც ზემოთ აღვნიშნე XHR – ში ფორმის ელემენტების HTTP ტანში ჩადება ავტომატურად არ ხდება… ამისათვის საჭიროა 1) ფორმის ყველა ელემენტისაგან ჯერ ავაწყოთ & სიმბოლოთი გაყოფილი პარამეტრი/მნიშვნელობა ტიპის სტრიქონი; 2) XHR – ის send მეთოდს გადავცეთ ეს სტრიქონი პარამეტრად.

ეს ყველაფერი საკმაოდ მარტივია და დროა შევუდგეთ პრობლემის რეალურად გადაჭრას.


ფორმის სერიალიზაციისათვის საკმარისია ქვემოთ მოყვანილი JavaScript ფუნქციის გამოყენება, რომელიც პარამეტრად ღებულობს ფორმას, მისი ველების საფუძველზე აწყობს პარამეტრი/მნიშნველობა ტიპის სტრიქონს და აბრუნებს მას:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function formToParams(form) {

    var fld, type, params = [], encode = encodeURIComponent;
   
    for (var i = 0; i<form .elements.length; i++) {
        if (form.elements[i].name) {
            fld = form.elements[i]; type = fld.type;
            if (/^checkbox|radio$/i.test(type)) {
                if (fld.checked) {
                    params.push(fld.name + "=" + encode(fld.value));
                }
            } else if (type == 'select-one') {
                params.push(fld.name + "=" + encode(fld.value || fld.options[fld.selectedIndex].text));
            } else if (type == 'select-multiple') {
                var opts = fld.options;
                for (var j=0; j<opts.length; j++) {
                    if (opts[j].selected) {
                        params.push(fld.name + "=" + encode((opts[j].getAttribute("value") || opts[j].text)));
                    }
                }
            } else {
                if (!/^button|reset|file|undefined$/i.test(type)) {
                    params.push(fld.name + "=" + encode(fld.value));
                }
            }
        }
    }
   
    return params.join('&');
   
}

ამ პატარ ფუნქციის მეშვეობით უკვე შესაძლებელია ნებისმიერი ფორმის სერიალიზაცია, საკმარისია მას გადავცეთ მხოლოდ ჩვენთვის სასურველი HTML ფორმის ობიექტი. ერთადერთი მნიშვნელოვანი დეტალი აქ არის encodeURIComponent ფუნქციის გამოყენება, რომლის მეშვეობითაც ხდება მნიშვნელობის ე.წ. კოდირება(?). ეს აუცილებელია რათა არ მოხდეს მნიშვნელობების დამახინჯება.

შემდეგ ეტაპზე საჭიროა მეთოდი რომელიც XHR – ის მეშვეობით სასურველ მისამართზე გაგზავნის სერიალიზებულ ფორმას:

1
2
3
4
5
6
7
8
9
function doRequest(config) {        
    var req = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    req.open(config.method, config.url, true);
    req.onreadystatechange = function() {
        config.callback(req);
    };
    req.setRequestHeader("content-type", "application/x-www-form-urlencoded");
    req.send(config.params);        
}

ეს ფუნქცია პარამეტრად ღებულობს ერთ config ობიექტს. რომელსაც შესაძლებელია გააჩნდეს მსგავსი სახე:

{
    method: 'POST',
    url: 'http://mydomain.com/actionurl.php',
    params: 'param1=value1&param2=value2',
    callback: function(req) {
        if (req.readyState == 4 && req.status == 200) {
            //do something with result
        }
    }
}

კონფიგურაციის ობიექტი ძალიან მარტივია. მას აქვს შემდეგი თვისებები:

  • method – სასურველი HTTP მეთოდი;
  • url – მისამართი რომელზეც გვსურს ინფორმაციის გაგზავნა;
  • params – პარამეტრი/მნიშვნელობა ტიპის სტრიქონი სტრიქონი;
  • callback – ფუნქცია რომელიც ავტომატურად იქნება გამოძახებული XHR ობიექტის onreadystatechange ხდომილების დროს;

რაც შეეხება ამ ფუნქციების გამოყენების რეალურ მაგალითს მას შესაძლებელია ჰქონდეს მსგავსი სახე:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function test(button) {
    var params = formToParams(button.form);
    document.getElementById('result').innerHTML = params;
    doRequest({
        method: button.form.method,
        url: button.form.action + '?nocache=' + (new Date()).getTime(),
        params: params,
        callback: function(req) {
            if (req.readyState == 4 && req.status == 200) {
                //do something here
            }
        }
      });
}

ამ ფუნქციას პარამეტრად გადაეცემა ჩვეულებრივი button ტიპის input ელემენტი. ეს ელემენტი ფლობს საჭირო ინფორმაციას ფორმის შესახებ. ხოლო ფორმას თავის მხრივ გააჩნია საკმაო ინფორმაცია(method, action ატრიბუტები) იმისათვის რომ ავაწყოთ პარამეტრების ობიექტი. ამ ფუნქციაში ყურადღებას იმსახურებს url პარამეტრის მნიშვნელობის აგება. ფორმის action ატრიბუტის მნიშვნელობას ვამატებთ nocache პარამეტრს რომლის მნიშვნელობაც არის მიმდინარე დრო. ეს აუცილებელია იმისათვის რათა IE – ში თავიდან ავირიდოთ კეშირება.

ამ ფუნქციებისა და ინფორმაციის მეშვეობით ძალიან მარტივია რეალური მუშა მაგალითის აგება სადაც დავინახავთ რეალურ შედეგს, თუმცა მანამდე შეგიძლიათ ნახოთ ამ პოსტისათვის შექმნილი რეალური მუშა მაგალითი და დააკოპიროთ მისი კოდი.

ამ მაგლითისათვის სერვერის მხარეს გამოიყენება ერთი PHP ფაილი რომელშიც გამოყენებულია ქვემოთ მოყვანილი კოდი:

1
2
3
echo '<pre>';
print_r($_POST);
echo '</pre>';

enjoy :)

]]> http://www.code.ge/posts/ajax-html-%e1%83%a4%e1%83%9d%e1%83%a0%e1%83%9b%e1%83%98%e1%83%a1-%e1%83%a1%e1%83%94%e1%83%a0%e1%83%98%e1%83%90%e1%83%9a%e1%83%98%e1%83%96%e1%83%90%e1%83%aa%e1%83%98%e1%83%90-post-%e1%83%a0%e1%83%98/feed 11 JavaScript: ობიექტის JSON სერიალიზაცია http://www.code.ge/posts/javascript-object-to-json-serialization http://www.code.ge/posts/javascript-object-to-json-serialization#comments Tue, 04 Dec 2007 10:26:42 +0000 იოსები http://www.code.ge/javascript/javascript-object-to-json-serialization JSON (JavaScript Object Notation) – ნოტაცია დღესდღეობით ფართოდ გამოყენებადი და ძალიან მოხერხებული საშუალებაა ინფორმაციის გაცვლისათვის. გამომდინარე იქედან რომ იგი არის ჩვეულებრივი სტრიქონი, იგი არ არის დამოკიდებული არც ენაზე და არც პლატფორმაზე.

JSON თანაბარი წარმატებით გამოიყენება ისეთი მაღალი დონის ენებში როგორიც არის: Java, PHP, Ruby, C#, JavaScript და ა.შ. გარდა ამისა იგი არის ერთერთი შეუცვლელი ნაწილი თანამედროვე Ajax აპლიკაციებისა და ფართოდ გამოიყენება კლიენტსა და სერვერს შორის ინფორმაციის მიმოცვლისათვის.


პრობლემა

მიუხედავად იმისა რომ JSON – ს საფუძვლად უდევს JavaScript ობიექტი, ამ ენას არ გააჩნია არანაირი საშუალება იმისათვის რომ ობიექტი გარდაქმნას JSON სტრიქონად. ბუნებრივია ეს აუცილებელია რადგან პირდაპირ JavaScript ობიექტის გაგზავნა/მიღება http პროტოკოლის მეშვეობით შეუძლებელია. გაგზავნისათვის საჭიროა ამ ობიექტის სერიალიზაცია(ანუ სტრიქონულ ფორმატში გადაყვანა, ხოლო მიღების დროს JSON სტრიქონის, უკან JavaScript ობიექტში გადაყვანა.

JSON სტრიქონის გადაყვანა ობიექტში, ძალიან მარტივია. ამისათვის საკმარისია JavaScript – ის eval ფუნქციის გამოყენება და გამზადებული ობიექტი ხელთ გვაქვს. თუმცა ობიექტის ხელახალი სერიალიზაცია JSON – ში ასეთი მარტივი არ არის.


გამოსავალი

იმისათვის რომ მოვახდინოთ ობიექტის სერიალიზაცია შესაძლებელია გამოვიყენოთ ქვემოთ მოყვანილი გზებიდან ერთერთი.

მაგალითში გამოყენებული იქნება შემდეგი სახის ობიექტი:

var myObj = {
    id: 'some-unique-id',
    name: 'obj-name',
    values: [1, 2, true, false, null, 'some string'],
    nested: {
        name: 'nested obj name',
        value: {name: 'other nested obj'}
    }
}
  • JSON სტრიქონის ხელოვნურად აწყობა

    ასეთ შემთხვევაში, როდესაც საქმე გვაქვს მარტივ ობიექტთან, მისი ხელოვნური გზით სერიალიზაცია დიდ პრობლემას არ წარმოადგენს… თუმცა ეს მაინც არასასიამოვნო პროცესია.

    მაგალითად ზემოთ ნაჩვენები ობიექტის JSON სტრიქონად გარდაქმნისათვის საჭიროა მსგავსი მანიპულაციები:

    1
    2
    3
    4
    5
    6
    7
    var json = [];
    json.push('{id: "' + myObj.id + '",');
    json.push('name: "' + myObj.name + '",');
    json.push('values: [');
    for (var i = 0; i < myObj.values.length; i++) {
       json.push(myObj.values[i] + ',');
    }

    და ასე შემდეგ… რა თქმა უნდა ეს კოდი მოყვანილია პირობით მაგალითად თუ რა არის საჭირო ასეთ გზით JSON სტრიქონის ასაწყობად, და იგი ნათლად ასახავს თუ რამდენად არაეფექტური, შრომატევადი და რაც ყველაზე მნიშვნელოვანია შეცდომებისათვის განწირულია ასეთი მიდგომა.

  • JSON სერიალიზაცია სპეციალური უნივერსალური მეთოდის მეშვეობით
    განსხვავებით წინა მაგალითისგან, ეს გზა არის გამართლებული, რეკომენდირებული და ასეთი გზით შეცდომების დაშვების ალბათობა დადის მინიმუმზე. იმ შემთხვევაშიც კი თუ აღმოჩენილი იქნება სერიალიზაციის შეცდომა, მისი ძებნა მოგვიწევს მხოლოდ ერთ ადგილას, და მისი აღმოფხვრა აისახება მთლიან შედეგზე, რაც ნიშნავს იმას რომ დაშვებული შეცდომების ძებნა არ არის საჭირო ბევრ ადგილას რაც გარდაუვალი იქნებოდა ობიექტების სერიალიზაციის ზემოთ ნაჩვენები მიდგომის გამოყენების შემთხვევაში.

    ობიექტის სერიალიზაციის კოდი:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    function serialize(o, l) {
       
        var res = [], tmp = [], l = l || 1, key;
       
        var repeat = function(str, count) {
            var tmp = [];
            for (var i = 0; i < count; i++) {
                tmp.push(str);
            }
            return tmp.join('');
        }
       
        for (var k in o) {
            key = o.constructor == Object ? k + ': ' : '';
            if (o[k] != undefined) {
                if (o[k].constructor == Object) {
                    tmp.push(repeat("\t", l) + key + serialize(o[k], l+1));
                } else if (o[k].constructor == Array) {
                    tmp.push(repeat("\t", l) + key + serialize(o[k], l+1));
                } else {
                    if (o[k].constructor == String) {
                        tmp.push(repeat("\t", l) + key + '"' + o[k] + '"');
                    } else {
                        tmp.push(repeat("\t", l) + key + o[k]);
                    }
                }
            } else if (o[k] === null) {
                tmp.push(repeat("\t", l) + key + 'null');
            }
        }
       
        res.push((o.constructor == Object ? '{' : '[') + "\n");
        res.push(tmp.join(",\n"));
        res.push("\n" + repeat("\t", (l - 1)) + (o.constructor == Object ? '}' : ']'));
           
        return res.join('');
       
    }

    ამ ფუნქციის გამოყენება ძალიან მარტივია, და განსხვავებით წინა მაგალითისგან ობიექტის სერიალიზაციისათვის საკმარისია შემდეგი კოდი:

    1
    2
    3
    var json = serialize(myObj);
    //json ცვლადის მნიშნველობა არის სწორად ფორმირებული JSON სტრიქონი
    //რომლის გაგზავნაც შესაძლებელია სერვერზე.

    ნაჩვენები კოდი ძალიან მარტივია, იგი არის ჩვეულებრივი რეკურსიული ფუნქცია რომელიც იქცევა ობიექტის თვისებების მნიშვნელობების მიხედვით, საბოლოო ჯამში კი აბრუნებს სწორად ფორმირებულ JSON სტრიქონს. აღასანიშნავია ის რომ ამ მეთოდს შეგვიძლია გადავცეთ ნებისმიერი სირთულის ობიექტი, ხოლო შედეგად მივიღებთ JSON სტრიქონს. ასევე აღსანიშნავია რომ ეს მეთოდი სტრიქონის ფორმირებისათვის იყენებს ახალი ხაზის(\n) და ტაბულაციის(\t) სიმბოლოებს, რაც მნიშვნელოვანია მიღებული შედეგის კითხვადობის თვალსაზრისით.

რაც შეეხება დესერიალიზაციას JavaScript – ში, და სერიალიაზაცია/დესერიალიზაციას სერვერულ ენებში:

  • JavaScript 
    //eval ფუნქციის გამოყენებით
var myObj = eval(jsonString);

    თუმცა JavaScript – ში გაუგებრობების თავიდან ასაცილებლად, json სტრიქონის დესერიალიზაციისას მართებულია მოვიქცეთ შემდეგნაირად:

    try {
    //სტრიქონი მოვაქციოთ ფრჩხილებში
    var myObj = eval('(' + jsonString + ')');
} catch(e) {
    //სხვა, შესაბამისი მოქმედებები
}

    ამ შემთხვევაში ორი თავდაცვითი მექანიზმი გამოვიყენეთ: 1) JSON სტრიქონი მოვაქციეთ ფრჩხილებში; 2) კოდი შევასრულეთ try/catch ბლოკის შიგნით, რადგან თუ eval ფუნქციას გადავცემთ არაკორექტულ სტრიქონს მისი ობიექტად გარდაქმნა ვერ მოხერხდება რაც გამოიწვევს შეცდომას, ხოლო try/catch ბლოკი ამ შემთხვევაში საუკეთესო გამოსავალია შესაძლო გაუმართავობის სწორად დასამუშავებლად;

  • PHP 
    //PHP5 - ს აქვს ორი შესაბამისი ფუნქცია
//სერიალიზაცია
$arr = array('key1'=>'value2', 'key2'=>'value2');
$json = json_encode($arr);
//დესერიალიზაცია
$deserialized = json_decode($json);

სხვადასხვა ენებში არსებობს შესაბამისი ბიბლიოთეკები JSON მანიპულაციისათვის, და მათი გამოყენება ისეთივე მარტივია როგორც ზემოთ ნაჩვენები მაგალითები.

]]> http://www.code.ge/posts/javascript-object-to-json-serialization/feed 10 “Ajax upload” & XML response http://www.code.ge/posts/ajax-upload-and-xml-response http://www.code.ge/posts/ajax-upload-and-xml-response#comments Tue, 22 May 2007 13:44:48 +0000 იოსები http://www.code.ge/javascript/ajax-upload-and-xml-response “Ajax upload” ანუ ფაილის ატვირთვა სერვერზე Ajax მიდგომით როგორც ასეთი მითია და სინამდვილეში არავითარი Ajax upload არ არსებობს გამომდინარე იქედან რომ ფაილის ატვირთვა სერვერზე სინამდვილეში არ ხდება XMLHttpRequest(XHR) ობიექტის გამოყენებით(და ეს შეუძლებელია ამ მომენტისათვის), ნაცვლად ამისა ამ ამოცანის გადასაჭრელად გამოიყენება დამალული iframe ელემენტი რაც ქმნის შესაბამის ილუზიას რომ ფაილის ატვირთვა ხდება ე.წ. “Ajax” მეთოდით.

დღესდღეობით ეს გამოსავალი ერთადერთია და რაც ყველაზე მნიშვნელოვანია იგი მუშაობს და მუშაობს ძალიან კარგად, თუმცა არსებობს ერთი დეტალი რომელიც საკმაოდ პრობლემატურია. პრობლემა მდგომარეობს სერვერიდან დაბრუნებულ პასუხში(response).

Ajax აპლიკაციის შექმნის ერთერთი აუცილებელი პირობაა სწორედ XHR ობიექტის გამოყენება. აღნიშნული ობიექტის მუშაობა არაფრით განსხვავდება ბრაუზერის მუშაობისგან, მისი მოვალეობაა სერვერზე მოთხოვნის გაგზავნა და შესაბამისად პასუხის მიღება. სერვერიდან დაბრუნებული პასუხი შეიძლება იყოს სამ ძირითად ფორმატში. ესენია:

  1. ჩვეულებრივ ტექსტი(plain text): ძირითადად გამოიყენება შედარებით მარტივ შემთხვევებში და სწრაფი რეზულტატის მისაღწევად;
  2. სწორად ფორმირებული XML დოკუმენტი: გამოიყენება სერვერიდან კომპლექსური პასუხების დასაბრუნებლად, პასუხი წარმოადგენს XHR ობიექტს responseXML თვისების მნიშვნელობას და იგი არის გამზადებული DOM ობიექტი რომელთან მუშაობაც თავისუფლად შესაძლებელია JavaScript – ის DOM მეთოდების მეშვეობით;
  3. Java Script Object Notation(JSON) ფორმატი: ასევე გამოიყენება კომპლექსურ შემთხვევებში და ეს ფორმატი წარმოადგენს გამზადებულ JavaScrip ობიექტს;

სამივე ჩამოთვლილ ფორმატს გააჩნია თავისი უპირატესობები და უარყოფითი მხარეები. XML და JSON ფორმატს შორის არჩევანი ალბათ უფრო გემოვნების საკითხია და უმარავი მომხრე და მოწინააღმდეგე ჰყავს ამ ორივე ფორმატს, მე პირადად XML ფორმატის გამოყენების მომხრე ვარ და მიდმივად ამ ფორმატით ვმუშაობ.

რაში გამოიხატება პრობლემა? როდესაც მოთხოვნა/პასუხი მთლიანად მუშავდება XHR ობიექტის გამოყენებით ყველაფერი ბუნებრივად და კარგად მუშაობს თუმცა როდესაც საჭიროა ისეთი HTML ფორმის გამოყენება რომლის მეშვეობითაც უნდა მოხდეს ფაილების ატვირთვა სერვერზე XHR გამოუყენებელი ხდება და იძულებული ვხდებით გამოვიყენოთ iframe ელემენტი. iframe – ს გამოყენების შემთხვევაში სერვერიდან პასუხი უნდა დაბრუნდეს HTML ფორმატში ნაცვლად ფორმირებული XML დოკუმენტისა, ეს აუცილებელია რადგან წინააღმდეგ შემთხვევაში ვერ შევძლებთ დაბრუნებული პასუხის კონტროლს(მე პირადად სხვა გზას ვერ მივაგენი). ჩამოტვირთული HTML დოკუმენტის გაკონტროლება კი ძალიან მარტივია, თუმცა აქ სხვა პრობლემას ვაწყდებით, კერძოდ კი HTML დოკუმენტში XML დოკუმენტის ჩაშენება არ შეიძლება(IE – ს გააჩნია მსგავსი შესაძლებლობა ე.წ. XML islands, მაგრამ სხვა ბრაუზერებში მსგავსი რამ არ მუშაობს). ერთადერთი გამოსავალია რომ სერვერიდან HTML – სთან ერთად დავაბრუნოთ XML დოკუმენტი მხოლოდ სტრიქონის სახით.


სტრიქონიდან XML დოკუმენტის მიღება

დავუშვათ XHR ობიექტის გამოყენების შემთხვევაში პასუხი სერვერიდან ბრუნდება მსგავსი XML დოკუმენტის სახით:

<response>
    <item><![CDATA[This Is data]]></item>
</response>

ასეთ შემთხვევაში დაბრუნებული პასუხი გამზადებულ DOM ობიექტია და მასთან მუშაობა პირდაპირ შესაძლებელია შესაბამისი მეთოდების გამოყენებით. ხოლო iframe – ს გამოყენების შემთხვევაში სერვერიდან იგივე XML დოკუმენტის დაბრუნება გვიწევს შემდეგი სახით:

1
2
3
4
5
6
7
8
9
<html>
<head>
</head>
<body> 
  <div id="response">
    &lt;response&gt;&lt;item&gt;&lt;![CDATA[This Is data]]&gt;&lt;/item&gt;&lt;/response&gt;
  </div>
</body>
</html>

ეს არის ჩვეულებრივი HTML დოკუმენტი რომელსაც გააჩნია ერთი div ელემენტი იდენტიფიკატორით response. სწორედ მასშია მოთავსებული XML დოკუმენტი, თუმცა განსხვავებით ზემოთ ნაჩვენები XML დოკუმენტისგან მასში არსებული ტეგის გამხსნელი < და დამხური > სიმბოლოები გარდაქმნიალია შესაბამის &lt; და &gt; სიმბოლოებში რათა თავიდან ავიცილოთ გაუგებრობები.

ამ სტრიქონის წაკითხვა და გარდაქმნა შესაბამისად XML დოკუმენტში შესაძლებელია შემდეგი JavaScript – ის მეშვეობით:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/*
 *put this code after "response" div
 */

//dom object
var dom = null;

//retrive string from "response" element
var content = document.getElementById('response').innerHTML;

//replace &lt; and &gt; back to  <> symbols
content = content.replace(/&lt;/gi, '<');
content = content.replace(/&gt;/gi, '>');

//if current browser is IE ( :D )
if (window.ActiveXObject) {
  dom = new ActiveXObject("Microsoft.XMLDOM");
  dom.async = false;
  dom.loadXML(content);
} else { //all other browsers
  var parser = new DOMParser();
  dom = parser.parseFromString(content, "text/xml");
}

//read document element into response variable
var response = dom.documentElement;

//retrive first element from document and alert it's tag name
alert(response.firstChild.tagName);

ამ ჯავასკრიპტ კოდის ჩასმა(და დაბრუნება) შესაძლებელია ზემოთ ნაჩვნებ HTML დოკუმენტთან ერთად… მისი მუშაობის დეტალები მითითებულია კოდის კომენტარებში.

ეს მიდგომა კრიტიკულად მნიშვნელოვანია ისეთ შემთხვევებში როდესაც საჭიროა სერვერიდან მიღებული პასუხის დამუშავება ერთი სტანდარტული გზით, და იგი თავიდან გვაცილებს ყოველი ცალკეული შემთხვევებისათვის ახალი ე.წ. Response Processor – ების წერის აუცილებლობას.

]]> http://www.code.ge/posts/ajax-upload-and-xml-response/feed 5