ვებ დიზაინი AJAX ტექნოლოგიის საფუძვლები. მოთხოვნის ობიექტის მიღება. AJAX-ის ძირითადი უპირატესობები და უარყოფითი მხარეები

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

მოდი დავიწყოთ! გთხოვთ გაითვალისწინოთ: ეს ვარაუდობს, რომ თქვენ უკვე იცით ძირითადი წინა ტექნოლოგიები, როგორიცაა HTML და CSS.

რა არის AJAX?

AJAX ნიშნავს ასინქრონულ JavaScript და XML. AJAX ეხება ერთზე მეტ ტექნოლოგიას და ეს არ არის ახალი. სინამდვილეში ეს არის ტექნოლოგიების ჯგუფი (HTML, CSS, Javascript, XML და ა.შ.), რომლებიც ერთმანეთთან არის დაკავშირებული თანამედროვე ვებ აპლიკაციების შესაქმნელად.

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

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

"JavaScript" არის პროგრამირების ენა, რომელიც გამოიყენება AJAX მოთხოვნის ობიექტის შესაქმნელად, ამ პასუხის გასაანალიზებლად და გვერდის DOM-ის განახლებისთვის.

კლიენტი იყენებს XMLHttpRequest ან XHR API სერვერზე მოთხოვნის გასაგზავნად. API (აპლიკაციის პროგრამის ინტერფეისი) არის მეთოდების ნაკრები, რომელიც განსაზღვრავს ორ დაინტერესებულ მხარეს შორის კომუნიკაციის წესებს. თუმცა, AJAX მოთხოვნიდან მიღებული მონაცემები შეიძლება იყოს ნებისმიერ ფორმატში, არა მხოლოდ XML.

როგორ მუშაობს AJAX

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

სურათი აღწერს სტანდარტულ AJAX სკრიპტს:

მომხმარებელს სურს ნახოს მეტი სტატია და ის აჭერს სასურველ ღილაკს. ეს მოვლენა იწვევს AJAX ზარს.

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

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

JavaScript აანალიზებს პასუხს და განაახლებს DOM-ის ნაწილს (გვერდის სტრუქტურა). ჩვენს მაგალითში განახლდება მხოლოდ გვერდითი ზოლი. გვერდის დანარჩენი ნაწილი უცვლელი რჩება.

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

ცოცხალი მაგალითი AJAX-ის გამოყენებით

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

პირველი, მოდით შევხედოთ როგორ მუშაობს Facebook და Twitter. გვერდის ქვემოთ გადახვევისას AJAX ატვირთავს ახალ შინაარსს. ასევე, თუ მოგწონთ ან არ მოგწონთ კითხვები და პასუხები Stack Overflow-ზე, AJAX კვლავ ამოქმედდება. როგორც კი რაიმეს აკრიფებთ საძიებო ზოლში Google-ში ან Youtube-ზე, ამოქმედდება მრავალი AJAX მოთხოვნა.

უფრო მეტიც, თუ გვინდა, შეგვიძლია თვალყური ადევნოთ ამ მოთხოვნებს. მაგალითად, Chrome-ის კონსოლში, ეს შეიძლება გაკეთდეს მაუსის მარჯვენა ღილაკით და გააქტიურებით Log XMLHttpRequests ფუნქცია.

როგორ შევქმნათ მოთხოვნა

ჩვენ უკვე ვთქვით, რომ XMLHttpRequest API გამოიყენება მოთხოვნის შესაქმნელად. გარდა ამისა, jQuery, ყველაზე პოპულარული JS ბიბლიოთეკა, აქვს Ajax-ის სხვადასხვა ფუნქციები და მეთოდები. სტატიების სერიაში ჩვენ განვიხილავთ სხვადასხვა მაგალითებს სუფთა JS-სა და JQuery-ში სერვერზე მოთხოვნების გაგზავნისთვის.

მოთხოვნის მართვა

სერვერიდან ამოღებული მონაცემები შეიძლება ინახებოდეს სხვადასხვა ფორმატში. XML, JSON, JSONP, უბრალო ტექსტი და HTML.

XML

XML (Extensible Markup Language) არის ერთ-ერთი ყველაზე პოპულარული ფორმატი აპლიკაციებს შორის მონაცემთა გაცვლისთვის. ფორმატი HTML-ის მსგავსია და სტრუქტურად იყენებს ტეგებს. თუმცა, XML-ში არ არის მზა ტეგები, ჩვენ თვითონ ვაყენებთ მათ. სტრუქტურის მაგალითი ქვემოთ:

მაიკ მეთიუ ავსტრალიური ინგლისური ესპანური ფრანგული რუსული

< person > < name >მაიკ< / name > < surname >მათე< / surname > < nationality >ავსტრალიელი< / nationality > < languages > < language >ინგლისური< / language > < language >ესპანური< / language > < language >ფრანგული< / language > < language >რუსული< / language > < / languages > < / person >

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

JSON

JSON (JavaScript Object Notation) მონაცემთა გაცვლის კიდევ ერთი პოპულარული ფორმატია. JSON-ში ზემოთ მოყვანილი მაგალითი ასე გამოიყურება:

("სახელი": "მაიკი", "გვარი": "მათიუ", "ეროვნება": "ავსტრალიური", "ენები": ["ინგლისური", "ესპანური", "ფრანგული", "რუსული"] )

"სახელი": "მაიკ" JSON რედაქტორი ონლაინ JSN რედაქტორში ჩვენი მაგალითი ასე გამოიყურება: შეზღუდვები AJAX მოთხოვნებში სანამ დაიწყებთ AJAX-ის გამოყენებას, უნდა იცოდეთ შეზღუდვების შესახებ. განვიხილავთ მხოლოდ ორ პრობლემას. პირველი არის შეცდომა Chrome-ის კონსოლში: შეცდომა ჩნდება, როდესაც მოთხოვნა მიუთითებს ადგილობრივ ფაილზე. ამ მაგალითში გვინდოდა წვდომა მონაცემები ლოკალური ფაილიდან (Demo.json), რომელიც არ არის შენახული სერვერზე. ამ პრობლემის მოსაგვარებლად, შეგიძლიათ დააინსტალიროთ ლოკალური სერვერი და შეინახოთ ფაილები იქ. მეორე პრობლემა: შეცდომა ჩნდება, როდესაც მოთხოვნიდან მიღებული მონაცემები ინახება ჩვენი გვერდისგან განსხვავებულ დომენზე (შეცდომა ცნობილია როგორც დომენის შეზღუდვის წესი). ჩვენს მაგალითში მონაცემები ინახება ლოკალურ სერვერზე და გვერდი ინახება Codepen სერვერზე. საბედნიეროდ, ეს შეცდომები შეიძლება მოგვარდეს. ერთი გზა არის CORS W3C-დან. მაგრამ ეს მექანიზმი მოითხოვს ცვლილებებს სერვერზე ფაილების კონფიგურაციაში. მაგალითად, ამ გვერდზე აღწერილია, თუ როგორ უნდა დააკონფიგურიროთ Apache სერვერი. კიდევ ერთი გზაა JSONP (JSON padding-ით). დასკვნა ეს მიმოხილვა მოგცემთ წარმოდგენას იმის შესახებ, თუ რა არის AJAX, სად შეიძლება შეგხვედროთ მას და რა პოტენციური პრობლემები არსებობს. ჩვენ ასევე განვიხილეთ მონაცემთა გაცვლის ყველაზე პოპულარული ფორმატები. შემდეგ სტატიაში განვიხილავთ სამუშაო მაგალითს. გნახავ!

ეს სტატია აღწერს AJAX-ს მახასიათებლისა და მაგალითის დონეზე. განიხილება ასინქრონული ურთიერთქმედების მახასიათებლები და გამოყენების მაგალითები, მაგრამ მინიმალური ტექნიკური დეტალებით.

ვიმედოვნებ, რომ ეს სასარგებლო იქნება იმის გასაგებად, თუ რა არის AJAX და რისთვის გამოიყენება.

რა არის AJAX? განხორციელების მაგალითი.

AJAX, ან უფრო გრძელი, ასინქრონული ჯ avascript ადა X ml არის სერვერთან ურთიერთობის ტექნოლოგია გვერდების გადატვირთვის გარეშე.

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

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

აქ არის ღილაკის კოდი ზემოთ მოცემულ მაგალითში:

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

სერვერის პასუხი აქ იქნება

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

ფუნქცია getXmlHttp())( var xmlhttp; try ( xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); ) catch (e) ( try ( xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); ) catch (E) ( xmlhttp = false; ) if (!xmlhttp && typeof XMLHttpRequest!=undefined") ( xmlhttp = new XMLHttpRequest();

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

ჩვენ აქ არ შევჩერდებით და პირდაპირ ხმის მიცემის ფუნქციაზე გადავალთ:

// javascript ხმის მიცემის კოდი მაგალითის ფუნქციიდან vote() ( // (1) შექმენით ობიექტი სერვერის მოთხოვნისთვის var req = getXmlHttp() // (2) // span ღილაკის გვერდით // გამოჩნდება შესრულების პროგრესი var statusElem = document.getElementById("vote_status") req.onreadystatechange = ფუნქცია() ( // onreadystatechange გააქტიურებულია სერვერის პასუხის მიღებისას, თუ (req.readyState == 4) ( // თუ მოთხოვნა დასრულებულია მიმდინარეობს statusElem.innerHTML = req.statusText // სტატუსის ჩვენება (არ მოიძებნა, OK..) if(req.status == 200) ( // თუ სტატუსი არის 200 (OK) - უპასუხეთ მომხმარებლის გაფრთხილებას(" სერვერის პასუხი: "+req.responseText); ) // აქ შეგიძლიათ დაამატოთ სხვა მოთხოვნის შეცდომის დამუშავებით) ) // (3) დააყენეთ კავშირის მისამართი req.open("GET", "/ajax_intro/vote.php", true // მოთხოვნის ობიექტი მომზადებულია: მითითებულია მისამართი და იქმნება onreadystatechange ფუნქცია // სერვერის პასუხის დასამუშავებლად // (4) req.send(null); statusElem.innerHTML = "ველოდები სერვერის პასუხს..." )

ხმის მიცემით გამოყენებული შესრულების ნაკადი საკმაოდ ტიპიურია და ასე გამოიყურება:

ფუნქცია ქმნის XmlHttpRequest ობიექტს

ანიჭებს სერვერის პასუხის დამმუშავებელს onreadystatechange-ს

ხსნის კავშირს ღია

აგზავნის მოთხოვნას გაგზავნის ზარის გამოყენებით (სერვერის პასუხი მიიღება onreadystatechange ფუნქციით, რომელიც მუშაობს ასინქრონულ რეჟიმში)

აჩვენებს ვიზიტორს პროცესის სტატუსის ინდიკატორს

სერვერის დამმუშავებელი, რომელსაც მიმართულია AJAX მოთხოვნა (მაგალითად ეს არის vote.php) არსებითად არ განსხვავდება ჩვეულებრივი გვერდისგან. XmlHttpRequest-ის მიერ გაგზავნილი AJAX მოთხოვნა არ განსხვავდება ჩვეულებრივი მოთხოვნისაგან.

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

AJAX-ის მნიშვნელობა არის ტექნოლოგიების ინტეგრაცია

AJAX ტექნოლოგია იყენებს კომბინაციას:

• (X)HTML, CSS ინფორმაციის წარდგენისა და სტილისთვის
• DOM-მოდელი, ოპერაციები, რომლებზედაც შესრულებულია javascript-ით კლიენტის მხარეს, რათა უზრუნველყოს დინამიური ჩვენება და ინფორმაციასთან ურთიერთქმედება.
• XMLHttpმოთხოვნა ვებ სერვერთან ასინქრონული კომუნიკაციისთვის. ზოგიერთ AJAX ჩარჩოში და ზოგიერთ სიტუაციაში XMLHttpRequest-ის ნაცვლად გამოიყენება IFrame, SCRIPT ტეგი ან სხვა მსგავსი ტრანსპორტი.
• JSON ხშირად გამოიყენება მონაცემთა გაცვლისთვის, მაგრამ ნებისმიერი ფორმატი იმუშავებს, მათ შორის მდიდარი HTML, ტექსტი, XML და ზოგიერთი EBML

ტიპიური AJAX აპლიკაცია შედგება მინიმუმ ორი ნაწილისგან.

პირველი მუშაობს ბრაუზერში და ჩვეულებრივ იწერება JavaScript-ში, მეორე კი სერვერზეა და იწერება, მაგალითად, Ruby, Java ან PHP.

მონაცემთა გაცვლა ხდება ამ ორ ნაწილს შორის XMLHttpRequest (ან სხვა ტრანსპორტის) საშუალებით.

რა გავაკეთო AJAX-ით?

AJAX-ის აზრი არის ინტერაქტიულობა და სწრაფი რეაგირების დრო.

მცირე კონტროლი

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

სერვერიდან მონაცემების დინამიური ჩატვირთვა.

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

მისი გამოჩენის დროს, ეს იყო ერთადერთი ღია ელექტრონული ფოსტის სერვისი, რომელიც იყენებდა AJAX-ს შემდეგი ფუნქციებისთვის.

• ფორმის შეყვანის შეცდომების შემოწმება გაგზავნამდე

  მომხმარებლის სახელი იგზავნება სერვერზე და შემოწმების შედეგი ბრუნდება გვერდზე.

• "მყისიერი" ჩამოტვირთვა

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

• წერილების ავტომატური „მიწოდება“ ღია საქაღალდეში

  დროდადრო სერვერზე იგზავნება მოთხოვნა და ახალი ასოების ჩამოსვლის შემთხვევაში ისინი ბრაუზერში ჩნდება.

• ავტომატური დასრულება

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

შედეგი: ფართო პოპულარობა, მაღალი მოთხოვნა ანგარიშებზე გახსნის დღიდან.

სინქრონული მოდელი VS ასინქრონული მოდელი

ჩვეულებრივ პროგრამირებაში ყველა ოპერაცია სინქრონულია, ანუ ისინი სრულდება ერთმანეთის მიყოლებით.

შედარებით რომ ვთქვათ, ჩვენ ასე ვიქცევით:

ჩამოაგდეს სათევზაო ჯოხი

ელოდება მის დაკბენას

ბიტი - ჩართეთ დაწნული ჯოხის გამკაცრება

ასინქრონული მიდგომით ჩვენ:

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

ჩამოაგდეს სათევზაო ჯოხი

ჩვენ სხვა საქმეებს ვაკეთებთ

ნაკბენის დეტექტორი ამოქმედდება, რაც იწვევს ტრიალი ღეროს უკან დახევას

ანუ სინქრონულ შემთხვევაში სათევზაო ჯოხი მუდმივად იპყრობს ჩვენს ყურადღებას. თევზის დაჭერა თანმიმდევრული პროცესია.

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

ასინქრონული პროგრამირება უფრო რთულია, ვიდრე სინქრონული პროგრამირება და თავდაპირველად ის უჩვეულოა, რადგან ის წინასწარრა იმუშავებს მოცემულია შემდეგ.
ანუ, პროგრამა „რა უნდა გააკეთოს, როცა კბენს“ უნდა იყოს დაყენებული ნაკბენის დაწყებამდე და ზოგადად უცნობია არის თუ არა თევზი წყალსაცავში.

არსებობს ტექნიკა, რომელიც აადვილებს ასინქრონულ პროგრამირებას, მაგალითად, Deferred ობიექტი (Twisted, Dojo, Mochikit), მაგრამ ეს ცალკე სტატიაში იქნება განხილული.

სინქრონული და ასინქრონული მოდელი AJAX-ში

დავუბრუნდეთ ჩვენს ცხვრებს: ბრაუზერს, სერვერს და, ვთქვათ, მონაცემთა ბაზას.

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

ყველა პროცესი ხორციელდება თანმიმდევრობით, ერთმანეთის მიყოლებით.

ქსელის შეფერხებები შედის ლოდინის დროს, რომელიც ნაცრისფერია მითითებული დიაგრამაზე.

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

ასინქრონულ მოდელში მოთხოვნა იგზავნება („სატყუარა დაყენებულია“) და შეგიძლიათ სხვა რამეზე გადასვლა. როდესაც მოთხოვნა დასრულებულია ("becked") - ის წინასწარ იხსნება
პროგრამისტის მიერ მომზადებული ფუნქცია („აწიე სპინინგი“) სერვერის შეტყობინების საჩვენებლად.

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

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

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

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

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

ასინქრონული მოდელის მახასიათებლები

• რთული განხორციელება
  • ბრაუზერის არასაკმარისი შესაძლებლობები (javascript)
  • ასინქრონული მოდელის გამართვა უფრო რთულია
• რასის პირობები
  • შესრულების განუსაზღვრელი თანმიმდევრობა
  • თქვენ შეგიძლიათ შეასრულოთ მრავალი ერთდროული დავალება („თევზის ჯოხები“), მაგრამ პირველი დაწყებული დავალება შეიძლება ბოლოს დასრულდეს.
• რეაქცია მყისიერია, მაგრამ რა შედეგი მოჰყვება უცნობია. შეცდომების დამუშავება უფრო რთულია
  • კომუნიკაციის შეცდომები - გათიშვა და ა.შ.
  • მომხმარებლის შეცდომები - მაგალითად, არ იყო საკმარისი პრივილეგიები
• მთლიანობის კონტროლი (bugproof)
  • მაგალითად, რედაქტორმა გაგზავნა ასინქრონული მოთხოვნა ხის ტოტის წაშლის შესახებ. მასზე დამატება უნდა გამორთოთ სერვერის პასუხის მოსვლამდე. თუ მოულოდნელად არ იყო საკმარისი პრივილეგიები, მაშინ ოპერაცია ჩაიშალა.
• ინტერაქტიულობა
• სწრაფი ინტერფეისი

არსებობს მხოლოდ ორი უპირატესობა, მაგრამ რა უპირატესობები! თამაში სანთლად ღირს.

ასინქრონული გადაწევა"n"ჩაშვება.

ზოგჯერ ასინქრონული ოპერაციებისთვის საჭიროა სხვადასხვა "ყურის ხრიკების" გაკეთება. მაგალითად, გსურთ გააკეთოთ drag"n"drop ხეზე, ანუ გადაიტანეთ სტატიები ერთი განყოფილებიდან მეორეში მაუსის საშუალებით და ისე, რომ მათ შეცვალონ თავიანთი მშობელი სერვერზე მონაცემთა ბაზაში.

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

როგორმე უნდა ვაჩვენოთ, რომ პროცესი დაიწყო, მაგრამ შედეგი იქნება „რა იქნება...“. როგორ? ასინქრონულ მოდელში, მაუსის მაჩვენებელს არ შეუძლია უბრალოდ გადაიტანოს ობიექტზე, გადაიქცევა საათად.

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

მოძველებული კონტექსტი, მოძველებული კონტექსტი

drag"n"drop-ის მაგალითი ასევე ეხება "მოძველებული კონტექსტის" პრობლემას - მოძველებული კონტექსტი.

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

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

რედაქტირების პოლიტიკა

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

ჩაკეტვა და/ან ვერსიის კონტროლი

ჩაკეტვა - რედაქტირებული დოკუმენტების დაბლოკვა.

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

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

კონტექსტის ავტომატური განახლება

მოძველებული შინაარსის პრობლემა შეიძლება მოგვარდეს 99%-ით მყისიერი ავტომატური განახლებით.

ბრაუზერი ინარჩუნებს მუდმივ კავშირს სერვერთან (ან აკეთებს დროდადრო მაკორექტირებელ მოთხოვნებს) - და საჭირო ცვლილებები იგზავნება ამ არხის საშუალებით.

მაგალითად, ზოგჯერ ახალი სტატიები იტვირთება ღია ხის ტოტში, ხოლო ახალი ასოები ზოგჯერ იტვირთება ღია ფოსტის ინტერფეისში.

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

AJAX (ასინქრონული JavaScript და XML) არის ტექნოლოგია, რომელიც უზრუნველყოფს სერვერის დინამიურ მოთხოვნებს, რომლის დროსაც არ არის საჭირო გვერდის გადატვირთვა. საიტი ფუნქციონირებს მასშტაბების უფრო სწრაფად, რადგან მთელი გვერდი არ საჭიროებს რეგულარულად განახლებას, ამიტომ მისი გამოყენება უფრო მოსახერხებელი ხდება მომხმარებლისთვის, მაგრამ არა საძიებო სისტემებისთვის.

მსგავსი ტექნოლოგიების დიდი რაოდენობით გამოყენება დაიწყო გასული საუკუნის შორეულ 90-იან წლებში. მაგალითად, 1996 წელს IFRAME HTML ელემენტი დაინერგა Internet Explorer 3 ბრაუზერში და ორი წლის შემდეგ მაიკროსოფტმა დანერგა Remote Scripting მექანიზმი.

თუმცა, თავად ტერმინი "ასინქრონული JavaScript და XML" მსოფლიოსთვის ცნობილი გახდა მხოლოდ 2005 წლის გამთენიისას, როდესაც ჯესი გარეტმა გამოაქვეყნა სტატია სათაურით "Ajax: ახალი მიდგომა ვებ აპლიკაციებისადმი". თავის მასალაში გარეტმა დეტალურად აღწერა, თუ როგორ იქმნება ინტერნეტ აპლიკაციები Google Maps-ისა და Gmail-ისთვის. მან დარწმუნებით განაცხადა, რომ ეს იყო აპლიკაციებში მომხმარებლებისთვის ხელმისაწვდომი შესაძლებლობების სწრაფი განვითარების დასაწყისი.

ჯესი ჯეიმს გარეტი

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

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

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

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

როგორ მუშაობს ტექნოლოგია

კონკრეტულად რომ გავიგოთ როგორ მუშაობს AJAX, მოდით გადავხედოთ 4 კრიტიკულ ნაბიჯს:

ვიზიტორი წვდება AJAX-ს.

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

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

მაგალითად, შეიძლება დაგჭირდეთ მონაცემთა ბაზაში მდებარე ზოგიერთი ფაილის ან ინფორმაციის ჩამოტვირთვა.

მონაცემთა ბაზიდან პასუხის მიღების შემდეგ, სერვერი აგზავნის მონაცემებს ბრაუზერში.


JavaScript იღებს პასუხს და შიფრავს მას მომხმარებლისთვის წასაკითხ ფორმატში.

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

XMLHttpReques ობიექტის გარეშე ინფორმაციის გაცვლა შეუძლებელია, ამიტომ ის წინასწარ განთავსდება თავად გვერდზე. ობიექტი მოქმედებს როგორც კავშირი სერვერსა და ბრაუზერს შორის. თავად მოთხოვნები გადადის სისტემიდან სერვერზე POST ან GET ფორმატში. GET ტიპი თავისებურად ეხება სერვერზე მდებარე დოკუმენტს და არგუმენტად იღებს საიტის მისამართს. მოთხოვნის შეწყვეტის თავიდან ასაცილებლად, შეიქმნა JavaScript Escape-ის ძლიერი ფუნქცია მსგავსი შემთხვევების თავიდან ასაცილებლად.

პასუხის გასაგზავნად, სერვერი იყენებს სტანდარტულ JSON ან XML ტექსტს. JSON დოკუმენტის მიღებისას ის მაშინვე გამოჩნდება ეკრანზე. მაგრამ მომხმარებელს ასევე მოეთხოვება შეასრულოს კოდი, რომელსაც ის იღებს, რის შემდეგაც წარმოიქმნება JavaScript ობიექტი. და თუ ტექსტი იგზავნება XML ფორმატში, ის ჯერ უნდა შეიცვალოს HTML-ით და შემდეგ გამოჩნდეს გვერდზე.

რა უპირატესობები აქვს AJAX-ს?

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

ამცირებს ტრაფიკს.

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

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

დაქვეითებულია უსაფრთხოების დონე.

AJAX-ის დაყენებით ნებისმიერ მომხმარებელს შეუძლია გვერდის წყაროს კოდის ნახვა და ეს არ არის უსაფრთხო.

როგორ არის AJAX ინდექსირებული საძიებო სისტემებით?

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

ყველა # სიმბოლოს შემდეგ, ჩაწერეთ ნიშნები! . მაგალითად, ბმული http://mysite.com/#catalog

შეცვლა

http://www.mysite.com/#!კატალოგი

თითოეული AJAX გვერდის HTML ვერსიებზე წვდომა კონკრეტულ URL-ებზე.

ამისათვის შეცვალეთ მნიშვნელობა, რომელიც მათში დავაყენეთ „#! "-ს"?_escaped_fragment_=". შედეგი იქნება

http://www.mysite.com/?_escaped_fragment_=catalog

• ზოგიერთი შინაარსი შეიძლება არ იყოს ინდექსირებული რობოტების მიერ;
• ყველა გვერდს აქვს იგივე url;
• ზოგიერთი გვერდი შეიძლება განსხვავებულად გამოჩნდეს საძიებო ბოტებში, ვიდრე მომხმარებლებისთვის.

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

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

დასკვნა

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

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

ზოგადი ინფორმაცია

რას ნიშნავს AJAX? რას ნიშნავს ეს? ეს აბრევიატურა არის აბრევიატურა. ის დგას ასინქრონული Javascript და XML. ხშირად შეგიძლიათ ნახოთ ან მოისმინოთ ინფორმაცია, რომ ეს ახალი ტექნოლოგიაა. მაგრამ ეს არ არის მთლიანად სიმართლე. ფაქტია, რომ Javascript და XML საკმაოდ დიდი ხანია არსებობს, Ajax კი ამ ტექნოლოგიების სინთეზია. ის ყველაზე ხშირად გამოიყენება ტერმინ ვებ 2.0-თან ერთად და ეხება განვითარების მოწინავე ტექნიკის გამოყენებას.

რა არის განსაკუთრებული?

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

აიაქსის უპირატესობები

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

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

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

საიტის სერვერის ნაწილი აქტიურად ურთიერთობს მომხმარებელთან.

მოსახერხებელი გამოსაყენებლად მთელი რიგი იდეების განსახორციელებლად.

მონაცემთა გაცვლა

ვთქვათ, გჭირდებათ გამოხმაურების ფორმა, რომლითაც შეგიძლიათ კლიენტების რჩევა. როგორ შეიძლება ამის გაკეთება? პირველ რიგში, თქვენ უნდა იზრუნოთ ინფორმაციის „გადამზიდავზე“. ამისათვის თქვენ უნდა შექმნათ XMLHttpRequest ობიექტი. ის მოქმედებს როგორც შუამავალი სერვერსა და მომხმარებლის ბრაუზერს შორის. ამ ობიექტის გამოყენებით გაიგზავნება მოთხოვნები, ასევე მიიღება მათზე პასუხები. მონაცემთა პირდაპირი გაცვლისთვის ჩვენ გვჭირდება AJAX PHP. ამ ინსტრუმენტთა ნაკრების დანერგვა შესაძლებელია GET ან POST მოთხოვნის გამოყენებით. ამ შემთხვევაში, საჭირო არგუმენტები პირდაპირ URL-ის მეშვეობით გადაიცემა. ამავდროულად, ამოქმედდება ფუნქცია, რომ მონაცემთა გადაცემა არ შეფერხდეს. მაგრამ რომელი AJAX მოთხოვნის განხორციელება? რეკომენდებულია POST-ის გამოყენება. მისი წყალობით შეგიძლიათ შეუზღუდავი რაოდენობის მონაცემების გადაცემა, რაც ასევე გაცილებით რთულია.

ოპერაციული პრინციპი

როგორ მუშაობს ასინქრონული Javascript და XML პრაქტიკაში? მოდით გავიგოთ ეს მაგალითით. რაც შეეხება შენობის სტრუქტურას, აუცილებელია იმის უზრუნველყოფა, რომ კლიენტის ნაწილი უზრუნველყოფს ყველა საჭირო ფუნქციონირებას მონაცემთა უსაფრთხო გაცვლისთვის. მან უნდა უზრუნველყოს არჩეული გზებით ინფორმაციის გადაცემის საჭირო მეთოდები. სერვერის ნაწილმა უნდა უზრუნველყოს მიღებული მონაცემების დამუშავება და მასზე დაყრდნობით ახალი ინფორმაციის გენერირება, რათა შემდგომში გადასცეს კლიენტს. ამ ტიპის ყველაზე გავრცელებული ურთიერთქმედება არის მონაცემთა ბაზასთან მუშაობა. ადრე ჩვენ უკვე აღვნიშნეთ მრავალი ბიზნეს ვებსაიტის ისეთი ელემენტი, როგორც უკუკავშირის ფორმა. Ajax-ის უპირატესობა ამ შემთხვევაში არის ის, რომ იგი ახორციელებს მონაცემთა ასინქრონულ გადაცემას. სხვა სიტყვებით რომ ვთქვათ, ინფორმაციის გაგზავნისას მომხმარებელს შეუძლია შეასრულოს ყველა საჭირო მოქმედება. თითოეული კონკრეტული შემთხვევის სპეციფიკაზე ფოკუსირებით, აუცილებელია გადაწყვიტოს, საჭიროა თუ არა საიტის ვიზიტორის ინფორმირება ამ პროცესის შესახებ. უკუკავშირის იგივე ფორმასთან დაკავშირებით, უნდა ითქვას, რომ ამ შემთხვევაში შეგიძლიათ დაწეროთ „ოპერატორი პასუხს ბეჭდავს“ ან მსგავსი რამ.

სერვერის პასუხი

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

სერვერზე მოთხოვნის გაკეთება და პასუხის დამუშავება

მოქმედებების მთელი თანმიმდევრობა ასე გამოიყურება:

პირველი ნაბიჯი არის შექმნათ და დაადასტუროთ, რომ არსებობს XMLHttpRequest.

შემდეგ სერვერთან კავშირი დაწყებულია.

ჩვენ მას თხოვნას ვუგზავნით.

ველოდებით მონაცემების მოსვლას და დამუშავებას.

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

სერვერის პროგრამირების ენები

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

სერვერის დაყენება

რა პროგრამებია საჭირო AJAX-ის სრულად მუშაობისთვის? რას მოგვცემს ეს? რისთვის არიან ისინი? ამ კითხვებზე პასუხის მისაღებად, თქვენ უნდა გაეცნოთ შემდეგ ჩამონათვალს:

HTML/XHTML.ისინი საჭიროა იმისათვის, რომ სერვერმა ამოიცნოს გვერდის განლაგება.

CSS.ეს ინსტრუმენტი აუცილებელია გვერდის დიზაინის ვიზუალური შერჩევისთვის.

DOM.ის საჭიროა იმისათვის, რომ უზრუნველყოს გვერდზე დინამიური ცვლილებები მომხმარებლის ქმედებების საპასუხოდ.

XML.საჭიროა კლიენტსა და სერვერს შორის მონაცემების გასაგზავნად.

JavaScript.საჭიროა Ajax-ის ძრავის შესაქმნელად და ინტერაქტიულობის უზრუნველსაყოფად.

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

გამოიყენეთ საიტზე

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

მონაცემთა ბაზის შესახებ

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

ვმუშაობთ ძრავზე

როგორ მოხდება ყველაფერი? ასე რომ, ხდება გარკვეული მოვლენა, რომელიც გამოიძახებს სპეციალურ ფუნქციას. ის მოამზადებს GET ან POST მონაცემებს, რომლებიც გაიგზავნება. შემდეგ გამოიძახება ფუნქცია, რომელიც დარეკავს სერვერის სკრიპტის URL-ზე. მან უნდა უზრუნველყოს XMLHttpRequest ობიექტის შექმნა. მასზე მითითება უნდა ინახებოდეს ცვლადში. სერვერზე მონაცემების გაგზავნის შემდეგ, თქვენ უნდა დაელოდოთ მისგან პასუხს. ამისთვის შეგიძლიათ ჩართოთ „მოსმენა“ ინფორმაციის მიღებამდე (თუ იცით, რა ჩამოვა და როდის) ან მიაწოდოთ ფუნქცია, რომელიც ყოველთვის მზად იქნება მონაცემების მისაღებად. პირველი ვარიანტი ნაკლებად საიმედოა საგანგებო სიტუაციის შემთხვევაში. მეორე განხორციელება უფრო ძვირია რესურსების თვალსაზრისით. თუმცა, თუ ეს კეთდება მხოლოდ ერთი ცვლადის მიმართ, ეს არ იმოქმედებს სწრაფ ინტერნეტზე. მაგრამ თუ ისინი ასობით და ათასობით არიან და ისინი ზომით დიდია, მაშინ ეს სხვა საკითხი იქნება. აქედან გამომდინარე, აუცილებელია ბალანსის ძიება არსებული რესურსების გამოყენებასა და ეფექტურობას შორის. ყოველივე ამის შემდეგ, უნდა გესმოდეთ, რომ ყველას არ აქვს 16 GB ოპერატიული მეხსიერება. ამისათვის შეიძლება დაწესდეს გარკვეული ლოდინის დრო, რის შემდეგაც ჩასმულია წინა მონაცემები ან ინფორმაცია, რომ სერვერი მოცემულ დროს მიუწვდომელია.

თავისებურებები

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

დასკვნა

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

AJAX ნიშნავს Asynchronous Javascript And XML, რაც ნიშნავს ასინქრონულ JavaScript და XML. AJAX საშუალებას გაძლევთ განაახლოთ HTML გვერდის მონაცემები მისი სრული გადატვირთვის გარეშე. გარდა ამისა, ტექნოლოგია საშუალებას გაძლევთ იმუშაოთ ინტერნეტ გვერდებთან ასინქრონულად.

ანუ, სანამ JavaScript ურთიერთქმედებს ვებ სერვერთან, მომხმარებელს შეუძლია განაგრძოს მუშაობა ვებ გვერდზე. AJAX ტექნოლოგიის გამოყენების მაგალითია Google Suggest

. Google Suggest მუშაობს იმაში, რომ როდესაც თქვენ აკრეფთ სიტყვას ან ფრაზას საძიებლად, JavaScript მიდის Google-ის მონაცემთა ბაზაში და სთხოვს მას 10 ყველაზე პოპულარულ მოთხოვნას, რომლებიც იწყება იგივე ასოებით. და შემდეგ აჩვენებს ამ სიას გვერდის გადატვირთვის გარეშე.

AJAX ტექნოლოგიის ფუნქციონირების პრინციპების გასათვალისწინებლად, ჩვენ განვახორციელებთ Google Suggest-ის მსგავს მექანიზმს ჩვენს ვებგვერდზე. ვთქვათ, გვაქვს ტუროპერატორის ვებსაიტი. საიტს აქვს შემოთავაზებების საძიებო ველი ქვეყნის სახელით. მოდით დავამატოთ ჩამოსაშლელი სია ამ ველში ავტომატური შევსებით შეყვანილი ასოების მიხედვით. დავიწყოთ ამ პრობლემის მოგვარება. მაშინვე ვიტყვი, რომ ამ ამოცანის განსახორციელებლად საჭიროა HTML-ის ცოდნა და ცოტა JavaScript (არ არის აუცილებელი იყო ექსპერტი). PHP გამოყენებული იქნება სერვერის ენად.

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

მოძებნეთ შეთავაზებები.

არდადეგები ზღვაზე

მოძებნეთ შეთავაზებები:

შემდეგი, ჩვენ დავწერთ JavaScript ფუნქციებს, რომლებიც გაგზავნის მოთხოვნებს სერვერზე და განაახლებს გვერდს. იმისათვის, რომ არ მოგვიწიოს HTML დოკუმენტის გადატვირთვა, ჩვენ გვჭირდება Ajax ტექნოლოგია. მოდით დავიწყოთ. შექმენით ajax.js ფაილი, მოათავსეთ ის იმავე საქაღალდეში, როგორც index.html და გახსენით ტექსტურ რედაქტორში.

პირველ რიგში, თქვენ უნდა შექმნათ ობიექტი, რომელიც გაგზავნის მოთხოვნებს სერვერზე და მიიღებს პასუხებს. ეს ობიექტი განსხვავებულად იქმნება სხვადასხვა ბრაუზერში. ჩვენ დავწერთ უნივერსალურ ფუნქციას, რომელიც უნდა მუშაობდეს სხვადასხვა ბრაუზერში. დაამატეთ შემდეგი JavaScript კოდი თქვენს ajax.js ფაილში.

/*ცვლადი მოთხოვნის ობიექტის შესანახად*/
var მოთხოვნა;
/*მოთხოვნის ობიექტის შექმნის ფუნქცია*/
ფუნქცია CreateRequest()
{
var მოთხოვნა=null;
სცადე
{
//მოთხოვნის ობიექტის შექმნა Firefox, Opera, Safari-სთვის
მოთხოვნა = new XMLHttpRequest();
}
დაჭერა (ე)
{
//მოთხოვნის ობიექტის შექმნა Internet Explorer-ისთვის
სცადე
( request=new ActiveXObject("Msxml2.XMLHTTP");
}
დაჭერა (ე)
{
request=new ActiveXObject("Microsoft.XMLHTTP");
}
}
დაბრუნების მოთხოვნა;
}

თქვენ უნდა აჩვენოთ შედეგების სია ყოველ ჯერზე, როდესაც შეცვლით საძიებო ველს. ამისათვის ჩვენ გამოვიყენებთ JavaScript მოვლენის დამმუშავებელს. ჩვენ აღმოვაჩენთ ცვლილებებს კლავიატურის ყოველი მოვლენის კლავიშების დროს. ამისათვის, index.html ფაილის ჩვენს HTML კოდში, იმ ხაზში, სადაც იქმნება საძიებო ველი სახელწოდებით ქვეყანა, დაამატეთ onkeyup="KeyPress(this.value)" ატრიბუტი:

ანუ რომელიმე კლავიშის დაჭერისას გამოიძახება JavaScript KeyPress() ფუნქცია, რომელსაც პარამეტრად გადაეცემა საძიებო სტრიქონში შეყვანილი სიმბოლოები. KeyPress() ფუნქციამ უნდა შეასრულოს შემდეგი ამოცანები:

• შექმენით ახალი მოთხოვნის ობიექტი CreateRequest() ფუნქციის გამოძახებით;
• შექმენით URL, რომელსაც უნდა დაუკავშირდეთ შედეგების მისაღებად;
• მოთხოვნის ობიექტის კონფიგურაცია სერვერთან კავშირის დასამყარებლად;
• გაგზავნეთ მოთხოვნა სერვერზე.

დავიწყოთ KeyPress() ფუნქციის შექმნა. ახალი მოთხოვნის ობიექტის შესაქმნელად, უბრალოდ უნდა მივცეთ მოთხოვნის ცვლადს ადრე შექმნილი CreateRequest() ფუნქციის მიერ დაბრუნებული მნიშვნელობა. და იმისთვის, რომ უსაფრთხოდ ვიყოთ, მოდით შევამოწმოთ მოთხოვნის ცვლადი. თუ ის არის NULL, მაშინ მოთხოვნის ობიექტი ვერ შეიქმნა. ამ პრობლემის გადასაჭრელად JavaScript კოდი ასე გამოიყურება:

ფუნქცია KeyPress (ტერმინი) (
მოთხოვნა=CreateRequest();

if (მოთხოვნა==null)
{
დაბრუნება;
}
}

შემდეგი, თქვენ უნდა უთხრათ მოთხოვნის ობიექტს, რომელი JavaScript ფუნქცია დაამუშავებს სერვერის პასუხს. ამისათვის თქვენ უნდა მიანიჭოთ onreadystatechange თვისებას შესაბამისი ფუნქციის სახელი. ეს თვისება ეუბნება ბრაუზერს, რომელი ფუნქცია უნდა იმუშაოს, როცა მოთხოვნის მზად მდგომარეობა იცვლება. ჩვენი LoadResults() ფუნქცია დაამუშავებს პასუხს.

ფუნქციას დაამატეთ შემდეგი ხაზი: request.onreadystatechange = LoadResults; . გაითვალისწინეთ, რომ ფუნქციის სახელის შემდეგ არ არის ფრჩხილები.

მაშინ მოდით დავაყენოთ კავშირი. ამისათვის თქვენ ჯერ უნდა უთხრათ ობიექტს სად უნდა გაგზავნოს ეს მოთხოვნა. მოდით შევქმნათ სკრიპტის URL, რომელიც გამოთვლის შედეგებს და მიაკუთვნებს მას url ცვლადს. ვთქვათ, რომ php სკრიპტი country.php იქნება პასუხისმგებელი სერვერის მხრიდან შედეგების გამოთვლაზე. მაშინ ჩვენი URL ასე გამოიყურება: var url = "country.php" + "?s=" + encodeURIcomponent(term) + "&sid=" + Math.random(); , სადაც ცვლადი s შეიცავს საძიებო ველში შეყვანილ სიმბოლოებს და sid-ს ენიჭება შემთხვევითი ნომერი, რათა ბრაუზერმა არ მოახდინოს გვერდის ქეშირება. დაამატეთ ეს ხაზი KeyPress() ფუნქციის სხეულს.

შემდეგი, თქვენ უნდა მოაწყოთ კავშირი მოთხოვნის ობიექტის open("GET", url, true) მეთოდის გამოყენებით. ამ მეთოდს აქვს სამი პარამეტრი. "GET" პარამეტრი განსაზღვრავს, თუ როგორ უნდა გაგზავნოს მონაცემები სერვერზე. ჩვენ ვიყენებთ GET მეთოდს, რადგან საძიებო სტრიქონში შეყვანილი სიმბოლოები გადაეცემა სერვერის სკრიპტს URL-ის საშუალებით.

მეორე პარამეტრი განსაზღვრავს სერვერის სკრიპტის URL-ს. ჩვენ ვინახავთ url მისამართს url ცვლადში, ამიტომ მეორე პარამეტრში ვაზუსტებთ ამ ცვლადს. მესამე პარამეტრს შეიძლება ჰქონდეს ორი მნიშვნელობა: true - ასინქრონული რეჟიმი და false - სინქრონული რეჟიმი. ჩვენი აპლიკაცია იმუშავებს ასინქრონულ რეჟიმში, ამიტომ ჩვენ ვაზუსტებთ true .
{
კავშირის ინიციალიზაციის შემდეგ, თქვენ უნდა შექმნათ კავშირი და მოიძიოთ შედეგები. ამისათვის თქვენ უბრალოდ უნდა გამოძახოთ send(null) ფუნქცია მოთხოვნის ობიექტზე. null პარამეტრი მიუთითებს, რომ მოთხოვნა არ შეიცავს მონაცემებს.
მოთხოვნა=CreateRequest();
ყველა ცვლილების განხორციელების შემდეგ KeyPress(this.value) ფუნქცია ასე გამოიყურება:
if (მოთხოვნა==null)
{
დაბრუნება;
}
ფუნქცია KeyPress (ტერმინი)
/*ახალი მოთხოვნის ობიექტის შექმნა*/
/*თუ შეუძლებელი იყო მოთხოვნის ობიექტის შექმნა, მაშინ ვასრულებთ ფუნქციის შესრულებას*/
/* URL-ის შექმნა*/
var url = "country.php" + "?s=" + encodeURIcomponent(term) + "&sid=" + Math.random();
/* დააყენეთ მოთხოვნის ობიექტი კავშირის დასამყარებლად*/
მოთხოვნა.გაგზავნა(null);
}

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

პირველ რიგში, თქვენ უნდა შეამოწმოთ მზადყოფნის მიმდინარე მდგომარეობა. მზად სტატუსი ინახება მოთხოვნის ობიექტის readyState თვისებით. როდესაც მოთხოვნა დამუშავდება, მზად არის 4. ანუ, თუ request.readyState == 4, მაშინ შეგიძლიათ დაამუშავოთ პასუხი:

ფუნქცია LoadResults()
{


/*პასუხის დამუშავება*/
}
}

ფუნქცია LoadResults()
{
/* მზადყოფნის სტატუსის შემოწმება*/
if (request.readyState == 4)(
/*მოთხოვნის სტატუსის შემოწმება*/
if (request.status == 200)(
/*ყველაფერი კარგადაა, პასუხის დამუშავება*/
}
}
}

თუ მოთხოვნის სტატუსისა და სტატუსის შემოწმება წარმატებით დასრულდა, მაშინ შეგიძლიათ დაიწყოთ სერვერიდან მიღებული მონაცემების დამუშავება. მონაცემების მიღება შეგიძლიათ ორი გზით: request.responseText - მონაცემების მიღება ტექსტის სახით, ან request.responseXML - მონაცემთა მიღება XMLDocument ობიექტის სახით.

ვთქვათ, ჩვენი სერვერი აგზავნის პასუხს მძიმეებით გამოყოფილი ქვეყნების ტექსტური სიის სახით. შემდეგ ვიღებთ მონაცემებს: var answer = request.responseText . შემდეგ ჩვენ ვამუშავებთ მონაცემებს და ვაჩვენებთ მათ ფენაში id="ძიების შედეგებით" .

ფუნქცია LoadResults()
{
/* მზადყოფნის სტატუსის შემოწმება*/
if (request.readyState == 4)(
/*მოთხოვნის სტატუსის შემოწმება*/
if (request.status == 200)(
მე არ შევუდგები მონაცემთა დამუშავების დეტალებს, მაგრამ უბრალოდ მივცემ ფუნქციის კოდს კომენტარებით:
//გახადეთ ძიების შედეგების ფენა ხილული
ShowDiv ("ძიების შედეგები");
// შედეგების გასუფთავება
ClearResults();
//მონაცემების მიღება
var პასუხი = request.responseText;
//ტექსტის სტრიქონის მასივში გადაყვანა
var array = პასუხი.split(",");
//დაადგენს მასივის ზომას
var count = მასივი.სიგრძე;

//ძიების შედეგების ფენის პოვნა
//დოკუმენტის ობიექტის მოდელში ცხრილის შექმნა
var tbl = document.createElement("ცხრილი");
var tblbody = document.createElement("tbody");
var tblRow, tblCell, tblNode;
// გამეორება მასივის ყველა ელემენტში
for(var i = 0; i (
var text = მასივი[i];
//შექმენით ცხრილის რიგები და დაამატეთ ისინი მის სხეულში
tblRow = document.createElement("tr");
tblCell = document.createElement("td");
//უჯრედების ატრიბუტებისა და ფუნქციების დაყენება
tblCell.onmouseover = ფუნქცია())(this.className="mouseOver";);
tblCell.onmouseout = ფუნქცია())(this.className="mouseOut";);
tblCell.setAttribute("საზღვარი", "0");
tblCell.onclick = ფუნქცია())(Replace(this);
tblNode = document.createTextNode(ტექსტი);
tblCell.appendChild(tblNode);
tblRow.appendChild(tblCell);
}
//დაამატე მისი სხეული მაგიდაზე
tbl.appendChild(tblbody);
//მაგიდის განთავსება ფენაში
div.appendChild(tbl);
}
}
}

და კიდევ რამდენიმე JavaScript დამხმარე ფუნქცია ეკრანზე შედეგების ჩვენებისთვის:

/*გახადეთ შედეგების ფენა ხილული*/
ფუნქცია ShowDiv(id)
{
თუ (დოკუმენტი.შრეები) დოკუმენტი.ფენები.visibility="ჩვენება";
else document.getElementById(id).style.visibility="visible";
}

/*გახადე ფენა შედეგებით უხილავი*/
ფუნქცია HideDiv(id)
{
თუ (დოკუმენტი.ფენები) დოკუმენტი.ფენები.visibility="დამალვა";
else document.getElementById(id).style.visibility="დამალული";
}

/*გასუფთავება შედეგები*/
ფუნქცია ClearResults ()
{
/* ამოიღეთ არსებული რიგები შედეგების ცხრილიდან
var div = document.getElementById("ძიების შედეგები");
var counter = div.childNodes.length;
for(var i = counter-1; i >= 0; i--)
{
div.removeChild(div.childNodes[i]);
}
}

/* შეცვალეთ მნიშვნელობა შეყვანის ველში მაუსის დაწკაპუნებით არჩეული მნიშვნელობით*/
ფუნქცია Replace (tblCell)
{
var inputbox = document.getElementById("ქვეყანა");
inputbox.value = tblCell.firstChild.nodeValue;
// შედეგების გასუფთავება
HideDiv ("ძიების შედეგები");
}

ასევე ჩვენს html ფაილში index.html ტეგებს შორის და დაამატეთ შემდეგი CSS წესები:

.mouseOut (ფონი: #ffffff; ფერი: #0000000; )
.mouseOver (ფონი: #ccccff; ფერი: #0000000; )
მაგიდა (სიგანე: 250 პიქსელი)

სულ ესაა. ამ სტატიაში ჩვენ გადავხედეთ Ajax-ის ტექნოლოგიის საფუძვლებს მაგალითის გამოყენებით.