AJAX ან Ajax არის ასინქრონული JavaScript და XML. იგი გამოიყენება სერვერთან მონაცემების გაცვლისა და ვებგვერდის ნაწილის განახლებისთვის, კლიენტის მხრიდან მთელი ვებგვერდის გადატვირთვის გარეშე. არსებული ვებგვერდის ჩვენება და ქცევა საერთოდ არ ერევა მონაცემების გაცვლისა და განახლებისას. Ajax ასევე განიხილება ტექნოლოგიების ჯგუფად, რომელსაც გააჩნია HTML, CSS, DOM და JavaScript, რომლებიც გამოიყენება მარკირების, სტილისა და მომხმარებლის ნებართვისათვის ვებგვერდზე არსებულ ინფორმაციაზე. ამ სტატიაში ის გაჩვენებთ თუ როგორ უნდა დაწეროთ მარტივი პროგრამა Ajax– ით ეტაპობრივად Notepad ++ - ის გამოყენებით. საჭიროა HTML, DOM, JavaScript და ადგილობრივი ვებ სერვერის ან დისტანციური ვებ სერვერის ზოგიერთი ძირითადი ცოდნა. WampServer გამოიყენება ამ სტატიაში ტესტისთვის.
ნაბიჯები
მეთოდი 1 დან 2: კოდირება
ნაბიჯი 1. მოამზადეთ სურათი Ajax პროგრამის დასაწერად
შეინახეთ სურათი იმავე საქაღალდეში, სადაც შეინახავთ თქვენს html და ტექსტურ ფაილებს, რომლებიც აჩვენებენ Ajax პროგრამას. ამ სტატიაში, "ProgramInAjax" დირექტორია დაყენებულია "wamp" საქაღალდეში "www" დირექტორია, სადაც თქვენ დააინსტალირეთ WampServer.
ნაბიჯი 2. გახსენით ნებისმიერი ტექსტური რედაქტორი
ამ სტატიაში ტექსტური რედაქტორის სახით გამოიყენება Notepad ++.
ნაბიჯი 3. შექმენით ახალი ფაილი ტექსტურ რედაქტორში
ჩაწერეთ შემდეგი:
Ოჰ ოჰ! სად წავიდა ყვითელი ყვავილი?
თქვენ შეგიძლიათ ჩაწეროთ რაც გსურთ html taghere– ში.
ნაბიჯი 4. შეინახეთ ფაილი როგორც ტექსტური დოკუმენტი სახელწოდებით “ajax-data.txt
” სინამდვილეში, თქვენ შეგიძლიათ დაასახელოთ ფაილი, როგორც გსურთ, მაგრამ დარწმუნდით, რომ შეიყვანეთ ერთი და იგივე ფაილის კოდი ამ ხაზის კოდირებაში:
xmlhttp.open ("GET", "ajax-data.txt", true);
თუმცა, HTML tagis გამოიყენება სათაურისთვის ისე, რომ ის უფრო დიდი და უხილავი იყოს.
ნაბიჯი 5. შექმენით ახალი ფაილი ვებგვერდისთვის
ეს ფაილი განკუთვნილია HTML ფაილისთვის, რათა ნახოთ Ajax პროგრამა ვებ ბრაუზერში.
ნაბიჯი 6. დააკოპირეთ შემდეგი კოდი:
ჩემი პირველი აიაქსის პროგრამა ჩემ მიერ განათავსეთ აიაქსის კოდი ქვემოთ.დააწკაპუნეთ ქვემოთ მოცემულ ღილაკზე, რომ ყვავილი გაქრეს
ნაბიჯი 7. შეინახეთ ფაილი
დააჭირეთ მენიუს ზოლზე შენახვის ღილაკს. "შენახვა როგორც" ყუთი ღიაა. შეიყვანეთ თქვენი დოკუმენტის სახელი. ამ სტატიაში ფაილის სახელი არის "ინდექსი".
ნაბიჯი 8. დააწკაპუნეთ ჩამოსაშლელ ისარზე ფაილის გაფართოების ასარჩევად
ველში "შენახვა როგორც ტიპი", დააწკაპუნეთ ჩამოსაშლელ ისარზე, ფაილის ასარჩევად.
ნაბიჯი 9. აირჩიეთ „ჰიპერ ტექსტის მარკირების ენის ფაილი
” დარწმუნდით, რომ მას აქვს "html" ფრჩხილის შიგნით. დააწკაპუნეთ შენახვაზე "html" არჩევის შემდეგ.
ნაბიჯი 10. შეამოწმეთ HTML ფაილი ვებ ბრაუზერში
გახსენით ვებ გვერდი ბრაუზერში. გადადით "გაშვებაზე" მენიუს ზედა ზოლში. დააწკაპუნეთ მასზე და აირჩიეთ „Chrome- ში გაშვება“ან თქვენს სისტემაში დაინსტალირებული ნებისმიერი ბრაუზერი. ამ სტატიაში ტესტირებისთვის გამოიყენება Google Chrome. თქვენ შეიძლება გქონდეთ სხვა ბრაუზერი დაინსტალირებული Notepad ++ - ში. თქვენ შეგიძლიათ აირჩიოთ თქვენი საყვარელი ბრაუზერი. კიდევ ერთი ვარიანტი, შეგიძლიათ დააწკაპუნოთ WampServer ხატულას ეკრანის ბოლოში სამუშაო ზოლებში და შეარჩიოთ "Localhost". თქვენ უნდა ნახოთ თქვენი დირექტორია იქ და დააწკაპუნოთ ინდექსის ფაილზე.
ნაბიჯი 11. დააწკაპუნეთ სურათის ქვემოთ არსებულ ღილაკზე სკრიპტის შესამოწმებლად
ნაბიჯი 12. თქვენი საბოლოო ვებ გვერდი
თქვენი ვებ გვერდი უნდა განახლდეს იმ მონაცემებით, რომლებიც თავიდანვე შეიყვანეთ ტექსტურ ფაილში. ყვავილი და სათაური უნდა შეიცვალოს ახალი სათაურით სახელწოდებით ოჰ ოჰ! სად წავიდა ყვითელი ყვავილი?”
მეთოდი 2 დან 2: კოდის ახსნა
ნაბიჯი 1. სხეულის განყოფილება
HTML ორგანოს აქვს "div" განყოფილება და ერთი ღილაკი. ეს განყოფილება გამოყენებული იქნება სერვერიდან დაბრუნებული ინფორმაციის საჩვენებლად. ღილაკი იძახებს ფუნქციას სახელწოდებით "loadXMLDoc ()", თუ მასზე დააწკაპუნებთ.
ჩემი პირველი აიაქსის პროგრამა ჩემ მიერ სურათი მიდის აქ Ajax პროგრამის შესამოწმებლად.დააწკაპუნეთ ქვემოთ მოცემულ ღილაკზე, რომ ყვავილი გაქრეს
ღილაკი მიდის აქ
ნაბიჯი 2. ხელმძღვანელის განყოფილება
HTML ფაილის სათაურის ნაწილს აქვს სკრიპტის ტეგი, რომელიც შეიცავს "loadXMLDoc ()" ფუნქციას.
ჩემი პირველი აიაქსის პროგრამა ჩემ მიერ განათავსეთ აიაქსის კოდი ქვემოთ.
ნაბიჯი 3. მეტი ახსნა
აიაქსის ყველაზე მნიშვნელოვანი რამ არის XMLHttpRequest ობიექტი. იგი გამოიყენება სერვერთან მონაცემების გაცვლისთვის და ყველა თანამედროვე ბრაუზერი მხარს უჭერს ობიექტს.
- XMLHttpRequest () ობიექტის შესაქმნელად სინტაქსი ცვლადია = ახალი XMLHttpRequest (); მაგრამ ამავე დროს Internet Explorer- ის (IE5 და IE6) ძველი ვერსიების შესაქმნელად სინტაქსი, რომელიც იყენებს ActiveX ობიექტს, არის ცვლადი = ახალი ActiveXObject ("Microsoft. XMLHTTP");.
- იმისათვის, რომ გაუმკლავდეს ყველა თანამედროვე ბრაუზერს, მან უნდა შეამოწმოს თუ არა ბრაუზერები მხარს XMLHttpRequest ობიექტს. თუ ასეა, ის ქმნის XMLHttpRequest ობიექტს. თუ არა, ის შექმნის ActiveX ობიექტს მისთვის.
- შემდეგ ის გაგზავნის მოთხოვნას სერვერზე. გამოყენებული იქნება XMLHttpRequest ობიექტის მეთოდი სახელწოდებით "ღია ()" და "გაგზავნა ()". xmlhttp.open ("GET", "ajax_info.txt", ჭეშმარიტი); xmlhttp.send ();.
Რჩევები
- შედეგის გადახედვის კიდევ ერთი ვარიანტი, შეგიძლიათ გახსნათ თქვენი საყვარელი ბრაუზერი და ჩაწეროთ "localhost/ProgramInAjax" ვებ მისამართების ზოლში, რომ ნახოთ ვებ გვერდი. თქვენ უნდა გქონდეთ საშუალება ნახოთ ვებ გვერდი, თუ თქვენს HTML ფაილს დაასახელებთ „index.html“.
- უფრო ხშირად შეინახეთ თქვენი html ფაილი თქვენი მუშაობის დროს. Ctrl და S ერთდროულად დაჭერით ფანჯრის მომხმარებლებისთვის დაზოგავთ მეტ დროს.
- დარწმუნდით, რომ დაამატეთ შენახული HTML ფაილი იმავე ადგილას, სადაც არის თქვენი სურათი და მონაცემთა ტექსტური ფაილი.
- როდესაც თქვენ ასახელებთ ფაილს, ის ასოებისადმი მგრძნობიარეა, როდესაც ამ სახელებს დაამატებთ კოდში. მაგალითად, "myImage" განსხვავდება "MyImage" ან "myimage".
