[მუსიკის დაკვრა] DOUG LLOYD: ასე რომ, კიდევ ერთი ერთგვარი მოსაზრება, რომ ერთგვარი მოდის ქოლგის ქვეშ JavaScript რაღაც მოუწოდა AJAX. მანამდე ამ ეტაპზე, ჩვენი ურთიერთქმედება JavaScript უკვე შემოიფარგლება დააყენებს ღილაკს და რამე მოხდება. კერძოდ, ის, რაც ხდება ჩვენი ვებ გამოიყურება და გრძნობს ცვლილებები. მარჯვენა? ისევე, როგორც კერძოდ, დოკუმენტი ობიექტის მოდელი ვიდეო, მე შეიცვალა ფონის ფერი. მაგრამ, როდესაც მე, რომ მე არ მაქვს რაიმე სპეციალური დამატებითი მოთხოვნები. მე არ უნდა მოითხოვოს, რომ სერვერზე გამომიგზავნოთ ახალი გვერდი. უბრალოდ შეიცვალა, რაც მე უკვე ჰქონდა. მე არ გაქვთ განაახლეთ ჩემი გვერდი, და რამ ნამდვილად შეიცვალა, ასე რომ დიდი. მაგრამ იქ აუცილებლად რაღაც სახელმძღვანელო მომხმარებლის ურთიერთქმედების ჩართული. AJAX არის მაგარი ტექნიკა, რომელიც საშუალებას ჩვენს განაახლოთ გვერდი შინაარსი, და არა მხოლოდ სახეს და ვგრძნობ, განახლების გარეშე. 

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

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

ეს უბრალოდ აპირებს asynchronously განაახლოს ჩემი გვერდი. და ეს არის, ფაქტობრივად, რომელიც AJAX დგას, არის ასინქრონული JavaScript და XML. XML სხვა სახის markup ენის, და თქვენ შეგიძლიათ დაალაგოთ ვფიქრობ, რომ ეს, ისევე, როგორც HTML. ეს არ არის საკმაოდ იგივე, მაგრამ ეს, ძირითადად, მხოლოდ ენა. ასე რომ, ეს არის ასინქრონული JavaScript და ენა. 

ასე რომ, რათა გამოიყენონ ეს AJAX ხერხი AJAX არ არის ცალკე პროგრამირების ენაზე. ეს მხოლოდ ერთგვარი კომპლექტი techniques-- ჩვენ უნდა შეიქმნას სპეციალური JavaScript ობიექტი, რომელიც ეწოდება XMLHttpRequest. ახლა, ეს ძალიან ადვილია ამის გაკეთება. ჩვენ უბრალოდ, ვამბობთ var, რაც ჩვენ გვინდა, რომ ეს ობიექტი, უდრის new XMLHttpRequest. და ახლა ჩვენ უკვე გაქვთ მიღებული აიაქსი სახის ობიექტი, ან XMLHttpRequest ობიექტი, რომელიც საშუალებას გვაძლევს asynchronously განაახლოს ჩვენი გვერდი. 

მას შემდეგ, რაც ჩვენ მიღებული ამ ახალი ობიექტი, ამ XMLHttpRequest, ჩვენ უნდა გავაკეთოთ რაღაც, რომ მისი onreadystatechange ქცევა. Onreadystatechange ქცევა მართლაც მხოლოდ როდესაც თქვენ მიიღოს თხოვნა ვებ გვერდი, გვერდი გადის მთელი რიგი ნაბიჯები. პირველი, თხოვნით არ გაიგზავნა. ამის შემდეგ, თხოვნით უკვე გაგზავნილი, მაგრამ არა რეაგირება. მაშინ მოთხოვნა უკვე რეაგირება. მაშინ მოთხოვნა მიმდინარეობს დააბრუნეს თქვენ. 

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

რაღაც მოხდა, როდესაც რაღაც დააწკაპებთ. ამ შემთხვევაში, უბრალოდ რაღაც მაშინ, როცა სახელმწიფო ჩვენი გვერდი ცვლილებები. არსებობს ორი სხვა თვისებები რომ ერთგვარი of-- ისინი არ ერთადერთი თვისებები, რომლებიც თანდაყოლილი XMLHttpRequest, მაგრამ ისინი საკმაოდ მნიშვნელოვანია. არსებობს რაღაც მოუწოდა readyState, რომელიც, როგორც თქვენ ალბათ შეუძლია გამოიცნოს, არის დაკავშირებული onreadystatechange. ეს ფაქტიურად გიჩვენებთ ის, რაც readyState არის. 0, 1, 2, 3, და 4 შესაძლებლობები არსებობს, და ისინი ერთგვარი უხეშად შეესაბამება რა მე უბრალოდ ვსაუბრობთ მეორე წინ. 

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

მას შემდეგ, რაც ჩვენ განსაზღვრული, თუ რა ხდება რომ onreadystatechange ქცევა, და ჩვენ შემოწმდება, რომ readyState არის 4 და სტატუსი 200, მაშინ ყველა ჩვენ უნდა გავაკეთოთ არის გახსენით ასინქრონული თხოვნა, რომელიც მხოლოდ მიღების HTTP- ის ზოგადად მოთხოვნით. უბრალოდ აკეთებს ამას პროგრამულად, ნაცვლად მეშვეობით ჩვენი ბრაუზერში. და მაშინ ჩვენ გააგზავნოთ მოთხოვნა. ასე რომ, რას ნიშნავს ეს, შესაძლოა, ჰგავს კონტექსტში? ასე რომ, აქ არის ფუნქცია, რომელიც ეხება AJAX მოითხოვს. OK? და მე თვითნებურად განაცხადა ეს იღებს არგუმენტი. და ეს ერთგვარი ზოგადი ჩონჩხი აქ. თავიდანვე, მივიღებთ საკუთარ თავს ახალი XMLHttpRequest ობიექტი. ამის შემდეგ, მე უნდა მითითებული onreadystatechange ქცევა. ასე რომ, მე ვაპირებ ვთქვა როდესაც readyState ცვლილებები, მე მინდა მოვუწოდო ამ ფუნქციას. 

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

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

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

და აქ, მე აშკარად აქვს div რომლის ID არის infodiv, ზოგიერთი ინფორმაცია აპირებს იქ. და მაშინ მე ამ ფორმით. და შიგნით ამ ფორმა, მე მაქვს რაღაც ე.წ. აირჩიეთ, რომელიც მხოლოდ ჩამოსაშლელი მენიუ ერთად bunch სხვადასხვა პარამეტრები. და როგორც ჩანს, როდესაც, რომელიც ცვლის, როდესაც ვარიანტი, რომელიც უკვე შერჩეული აქვს შეიცვალა, მე ვაპირებ მოვუწოდო ზოგიერთი ფუნქცია cs50Info, და შემდეგ მე ვაპირებ გაივლის this.value, სადაც ეს ეხება რომელი ვარიანტი შეირჩა, და მნიშვნელობა ერთ-ერთი ასეთი აქ, ვარიანტი მნიშვნელობა = ტოლია ცარიელი, "ბლუმბერგის" "Bowden", "chan" და "Malan." 

ასე რომ, რა შეიძლება რეალურად მოხდება აქ, როდესაც ამის გაკეთება? ისე, მოდით მიიღოს შევხედოთ blumberg.html. როგორც ჩანს, ეს მხოლოდ snippet ზოგიერთი HTML. და სინამდვილეში, რაც მე იმ იმედით მოხდება აქ მე ვაპირებ, რომ შეძლებს plug ამ Html პირდაპირ ჩემი ვებ გვერდი გარეშე განაახლეთ გვერდი, ისეთი, რომ როდესაც მე აირჩიოს Hannah საწყისი ჩამოსაშლელი მენიუ, ინფორმაცია იმის შესახებ, Hannah, კერძოდ, ეს ინფორმაცია აქ blumberg.html, არის ის, რაც აჩვენებს up გვერდზე. და მე არ უნდა ამოცნობა. და თუ მე აირჩია სხვისი, მათი ინფორმაციით, გამოჩნდება. როგორ შემიძლია ამის გაკეთება? ისევ და ისევ, ეს მოითხოვს ჩვენთვის გამოიყენოს ზოგიერთი AJAX. ასე რომ, ჩვენ ყველაფერს ქმნის ajax.js. აქ არის, რომ ფუნქცია, cs50Info. თუ სახელი არაფერია, მე დაბრუნებას. მე არ ვაპირებ არაფრის თუ ცარიელი ვარიანტი აირჩია. წინააღმდეგ შემთხვევაში, მე ვაპირებ შექმნა ახალი XMLHttpRequest. და მაშინ მე ვაპირებ ვთქვა, როდესაც readyState ცვლილებები, დარეკეთ ამ ფუნქციას. 

და თუ readyState არის 4 და მდგომარეობა არის 200, აქ არის ცოტა of jQuery on line 13. მაგრამ ყველა მე ვაკეთებ ამბობს, შეცვლის შინაარსი infodiv უნდა იყოს, რაც მე მივიღე, როგორც პასუხი ჩემი HttpRequest. 

რა არის ჩემი HttpRequest? ისე, რომ მარჯვენა აქ ხაზი 18 და 19. Line 18, მე ძირითადად ემზადება ოჯახის თხოვნით სახელწოდება + .html. ისევ და ისევ, სახელი აქ არის არგუმენტი, რომ იყო შევიდა, როგორც პარამეტრი cs50Info. 

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

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

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

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

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