«
»

Ajax: HTML ფორმის სერიალიზაცია POST რიქვესტისთვის

Dec 05 2007

ვაგრძელებ სერიალიზაციის თემას, და ამჯერად შევეხები 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 :)

ტეგები: ,

11 Responses to “Ajax: HTML ფორმის სერიალიზაცია POST რიქვესტისთვის”

  1. გიორგი says:
    December 5, 2007 at 1:57 am

    ძალიან კარგი პოსტინგია – MUST READ.

  2. DEVI says:
    December 11, 2007 at 1:54 am

    HI Code.ge! rogor xar? mokled erti cinadadeba maq, me maqvs saiti sadac moidzieb yvelafers kompiuterebis shesaxeb.tu survili gagichndeba banerebi gavcvalot…. ise male chemi saitsac blogis saxe miecema…. ;)
    mokled roca gadacyvet chemi imeili mocemulia da momcere… http://pcmania.ge

  3. იოსები says:
    December 11, 2007 at 2:15 am

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

  4. ირაკლი says:
    December 11, 2007 at 2:29 am

    კაი პოსტია სოსო-ჯან. მარა ამაზე ერთი წლის წინ წვალობდი, და აქამდე ვერ მოიცალე დასაპოსტად? :)

    ისე, არ გეწყინოს და შენი ცოდნის ხალხი უკვე, ასემბლერის პროფებივით დინოზავრები რო ხდებიან, ატყობ? :) Long live jQuery და მასში წარმატებით გადაჭრილი მსგავსი პრობლემები :P

    ჰეჰე

  5. იოსები says:
    December 11, 2007 at 2:33 am

    იკა, სორრი ბათ იმისათვის რომ ერთი ფორმა დავასაბმიტო მარტივ შემთხვევაში jQuery უნდა გამოვიყენო? :D ეგება jQuery – ს მსგავსის დაწერა მინდა ჩემით? არ უნდა ვიცოდე რა და როგორ არის? :D

    დინოზავრი რა შუაშია? ან ასემბლერი? მე JavaScript – ზე კოდირება მიყვარს და არა იმიტომ რომ jQuery არ მევასება ან jQuery ცუდია და ასე შემდეგ, თავად მიყვარს წერა თუ ამის საშუალება მაქვს და ნამდვილად არ მხიბლავს ის მომენტი როდესაც არ ვიცი გინდა jQuery გინდა სხვა რომელიმე ბიბლიოთეკა რომელიმე მსგავს ამოცანას როგორ აგვარებს :)

    P.S.

    საქმე საქმეზე რომ მიდგეს jQuery – თი იმისთანას ვიხმალავებ რესიგს შეშურდეს :P

  6. ირაკლი says:
    December 11, 2007 at 2:37 am

    კაია, მერე. მეც მაგას ვამბობ. საჭიროა 1-2 შენნაირი მარკშეიდერი. ჩემნაირ ზარმაცებს რო ჯქვერი გაეჭედოთ, ვინმეს ხო უნდა კითხონ :D და ეს ჯქვერიც ვინმემ ხო უნდა წეროს.

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

  7. იოსები says:
    December 11, 2007 at 2:45 am

    გავწითლდი :P

    ისე გული თუ გულობს საკუთარი jQuery – ს დაწერაც მოსულა, არც ისეთი რთულია, აგერ შენ მტკიცებულების სახეთი სულ რაღაც ერთი ამოსუნთქვით გაკეთებული ექსპერიმენტი http://www.code.ge/samples/code.htm

    :P :P :P

  8. DEVI says:
    December 11, 2007 at 9:01 am

    კაი, გმადლობ….
    მაშინ ბლოგის სისტემაზე რომ გადავალ მერე გავცვალოთ….

    საინტერესო საიტი გაქვს, გილოცავ….

    აბა ჰე… წავედი.

  9. ალეკო205 says:
    December 11, 2007 at 11:42 am

    სოსო შენი ჭირი ვარ :D
    ისა ამ კოდის ნაწილი გამოვიყენე რაღაც პატარა საქმეში და რა მაინტერესებს – როცა რესპონსი მოდის, ტექსტურის შემთხვევაში მოდის 1:1-ზე, ანუ თუ რაიმეს შევცვლი მაგალითად action.php-ში რესპონსშიც შეცვლილი მოდის, განსხვავებით img-სი – ანუ ტექსტისგან განსხვავებით სურათს ძველს მიბრუნებს. მოკლე ჭკუით ამისათვის შენს doRequest() ფუნქციაში

    req.setRequestHeader(“content-type”, “application/x-www-form-urlencoded”);

    ის მერე დავამატე

    req.setRequestHeader(“Cache-Control”, “no-cache, must-revalidate”);

    არ ვიცი რამდენად სწორად მოვიქეცი, მით უმეტეს რომ შედეგი მაინც ვერ მივიღე. რას მირჩევ?

  10. იოსები says:
    December 11, 2007 at 11:45 am

    როდესაც აბრუნებ სურათს, მასაც იგივენაირად მოექეცი როგორ რიქვესთ URI – ს, ანუ რაიმე fake პარამეტრია საჭირო როგორც მე მაქვს გამოყენებული nocache..

       <img src="myimage.gif?nocache=12351256" alt="" />
  11. ალეკო205 says:
    December 11, 2007 at 11:54 am

    აჰა.. კიდევ მადლობა :)

დატოვე კომენტარი:

ქართული კლავიატურა, ჩართვა/გამორთვა კლავიშით "~"