[संगीत बजाना] डौग लॉयड: एक तो अधिक धारणा की तरह है कि एक तरह से की छतरी के नीचे गिर जाता है जावास्क्रिप्ट AJAX कहा जाता है। इस बिंदु तक, हमारे जावास्क्रिप्ट के साथ बातचीत एक धक्का तक ही सीमित कर दिया गया है बटन और कुछ होता है। और विशेष रूप से, कुछ ऐसा होता है हमारी वेबसाइट देखते हैं और बदलाव महसूस होता है। है ना? विशेष रूप से की तरह, में दस्तावेज़ ऑब्जेक्ट मॉडल वीडियो, मैं पृष्ठभूमि का रंग बदल गया। मैंने वैसा ही किया लेकिन, जब मैं नहीं था किसी विशेष अतिरिक्त अनुरोधों को क्या करना है। मुझे लगता है कि अनुरोध करने के लिए नहीं था सर्वर मुझे एक नया पेज भेजें। मैं सिर्फ मैं पहले से ही था क्या बदल गया है। मैं अपने पेज को फिर से लोड करने के लिए नहीं था और बातें निश्चित रूप से बदल गया है, इसलिए यह बहुत अच्छा है। लेकिन वहाँ निश्चित रूप से कुछ मैनुअल उपयोगकर्ता बातचीत शामिल किया गया। AJAX के लिए अनुमति देता है कि एक शांत तकनीक है हमें एक पेज की सामग्री को अद्यतन करने के लिए, और नहीं बस देखो और पुन: लोड के बिना, लग रहा है। 

और जब विशेष रूप से मैं एक पेज की सामग्री को अद्यतन करने का कहना है, मुझे लगता है हमें फिर से लिखना नहीं कह रहा हूँ जावास्क्रिप्ट का उपयोग पेज। मुझे लगता है हम वास्तव में अनुरोध कह रहा हूँ सर्वर से अधिक जानकारी हमारे पेज को फिर से लोड करने के लिए बिना। 

का एक सा का अब उस तरह एक और अधिक उन्नत तकनीक हम बात करने जा रहे हैं कि इस वीडियो में के बारे में। हम कुछ बातचीत करने के लिए जा रहे हैं। लेकिन जब हम करते हैं, मैं जा रहा हूँ वेब सर्वर करने के लिए अनुरोध कर रही है। इस मामले में, बस क्या मेरी अपाचे वेब सर्वर चल रहा है। मैं अतिरिक्त बनाने जा रहा हूँ अनुरोधों मैं एक वेब पेज दौरा कर रहा हूँ, जबकि लेकिन मेरे पेज ताज़ा नहीं होगा। 

यह सिर्फ करने के लिए जा रहा है asynchronously मेरा पेज को अपडेट करें। और कहा कि, वास्तव में, है AJAX के लिए खड़ा है, जो अतुल्यकालिक जावास्क्रिप्ट और XML है। एक्सएमएल मार्कअप का एक और प्रकार है भाषा, और आप की तरह कर सकते हैं बस HTML की तरह लगता है। यह काफी एक ही बात नहीं है, लेकिन यह मूल रूप से सिर्फ एक मार्कअप भाषा है। तो यह एक अतुल्यकालिक है जावास्क्रिप्ट और एक मार्कअप भाषा। 

तो इस का उपयोग करने के लिए AJAX technique-- AJAX एक अलग प्रोग्रामिंग भाषा नहीं है। यह एक के बस की तरह है techniques-- हम के सेट एक विशेष बनाने की जरूरत है जावास्क्रिप्ट वस्तु, जो एक XMLHttpRequest कहा जाता है। अब, यह यह करने के लिए बहुत आसान है। हम सिर्फ इतना कहना वर, जो कुछ भी हम इस वस्तु को कॉल करना चाहते हैं, नई XMLHttpRequest के बराबर होती है। और अब हम अब प्राप्त किया है वस्तु का एक AJAX तरह, या एक XMLHttpRequest अनुमति देगा जो वस्तु, हमें asynchronously हमारे पेज को अद्यतन करने के लिए। 

हम इस नए मिल गया है के बाद वस्तु, इस XMLHttpRequest, हम करने के लिए कुछ करना है अपने onreadystatechange व्यवहार। Onreadystatechange व्यवहार वास्तव में सिर्फ है आप एक अनुरोध बनाने के लिए जब एक वेब पेज के लिए, पेज कदम के एक नंबर के माध्यम से चला जाता है। सबसे पहले, एक अनुरोध भेजा नहीं गया है। फिर, अनुरोध किया गया है भेजा है, लेकिन इस पर कार्रवाई नहीं की। फिर अनुरोध पर कार्रवाई की गई है। फिर अनुरोध है आप को वापस भेजा जा रहा है। 

फिर, अनुरोध है पूरी तरह से अपने पेज में भरा हुआ है। उन विभिन्न राज्यों में हैं। और इसलिए हम अपने निर्धारित करने की आवश्यकता नई XMLHttpRequest वस्तु जब तैयार राज्य में परिवर्तन बदलने के लिए। और आम तौर पर, हम से यह करते हैं एक गुमनाम समारोह को परिभाषित जो हम से परिचित हो अब जावास्क्रिप्ट, कि जब तैयार राज्य में परिवर्तन कहा जाता है। ऐसा लगता है कि वास्तव में बहुत ज्यादा नहीं है। हम सिर्फ एक को परिभाषित करने जा रहे हैं गुमनाम समारोह है, की तरह क्या पसंद हम में क्या कर रहे थे जावास्क्रिप्ट, जहां हम करेंगे एक गुमनाम समारोह है क्लिक पर एक का जवाब है, या हम का एक नक्शा कर रहे थे जब एक सरणी में विभिन्न वस्तुओं। 

कुछ हुआ जब कुछ क्लिक किया था। इस मामले में, यह सिर्फ कुछ है क्या हो रहा है, जब हमारे पेज के राज्य परिवर्तन। दो अन्य संपत्तियों रहे हैं क्रमबद्ध of-- वे नहीं कर रहे हैं कि हैं कि केवल गुण XMLHttpRequest के लिए निहित, लेकिन वे बहुत महत्वपूर्ण होते हैं। ReadyState बुलाया कुछ भी नहीं है, जो आप शायद अनुमान लगा सकते हैं, onreadystatechange से संबंधित है। यह वास्तव में आपको बताता है readyState है क्या। 0, 1, 2, 3, और 4 हैं वहाँ संभावनाएं और वे एक तरह से मोटे तौर पर के अनुरूप क्या मैं तो बस एक दूसरे के बारे में पहले बात कर रहा था। 

और फिर स्थिति, जो उम्मीद है कि सब कुछ ठीक चला गया, कम है, जो 200 है के लिए, ज़ाहिर है, ठीक है, हम http से परिचित रहे हैं। इसलिए हम उम्मीद कर रहे हैं कि हमारे लिए तैयार राज्य चार है, और हमारी स्थिति 200 है। और हमारे लिए तैयार राज्य यदि चार, और प्रतिक्रिया है पर रखा जा करने के लिए तैयार है पेज, और स्थिति 200 है, हम ऐसा करने में सक्षम थे सब कुछ सफलतापूर्वक अब हम asynchronously कर सकते हैं हमारे पेज को अपडेट फिर से लोड करने के लिए बिना इसके बारे में संपूर्ण सामग्री। 

हम क्या होता है परिभाषित करने के बाद onreadystatechange व्यवहार करने के लिए, और हम उस की जाँच की है readyState , 4 और स्थिति 200 है फिर हम सब करने की ज़रूरत है एक अतुल्यकालिक ऊपर खुला अनुरोध, बस जो कर रही है एक HTTP आम तौर पर अनुरोध मिलता है। बस प्रोग्राम के लिए यह कर रही है, बजाय हमारे वेब ब्राउज़र के माध्यम से की। और फिर हम उस अनुरोध भेजें। तो क्या हो सकता है इस करता है संदर्भ में की तरह लग रही हो? तो यहाँ एक समारोह है कि AJAX अनुरोध के साथ संबंधित है। ठीक है? और मैं मनमाने ढंग से कहा है यह एक तर्क स्वीकार करता है। और यह एक का एक तरह से यहां सामान्य कंकाल। बहुत शुरुआत में, हम मिल अपने आप को एक नया XMLHttpRequest वस्तु। फिर, मैं स्थापित करने की जरूरत onreadystatechange व्यवहार। और इसलिए मैं कहने जा रहा हूँ जब readyState परिवर्तन, मैं आपको इस समारोह कॉल करना चाहते हैं। 

पूछने के लिए जा रहा है जो सवाल है, readyState यदि readyState बदल गया है, तो 4 4 हो जाएगा, और स्थिति 200 थी, इसलिए हम मैं एक सफल अनुरोध किया था पेज के लिए कुछ करना चाहते हैं। और हम देख लेंगे का एक उदाहरण पर क्या कुछ है कि एक दूसरे में हो सकता है। तो फिर, अब मैं परिभाषित किया है मेरी गुमनाम समारोह, मेरी प्रतिक्रिया समारोह जब भी readyState बदल जाता है। 

तो फिर मैं सिर्फ एक को खोलने की जरूरत ओपन विधि का उपयोग कर, अनुरोध करते हैं। और फिर, मुझे लगता है कि अनुरोध भेजें। और चलो पर एक नजर डालते हैं एक और अधिक ठोस उदाहरण क्या की AJAX हमारे वेब पन्नों पर कर सकते हैं। तो मैं यहाँ एक बहुत ही सरल है पेज home.html बुलाया। और मैं एक सूचना चला जाता मिल गया है यहाँ और ड्रॉप-डाउन मेनू में किसी प्रकार का। 

और हम एक दूसरे में इस पर फिर से आना हूँ। लेकिन मुझे लगता है कि अब हम एक लेना चाहिए वास्तविक स्रोत कोड को देखो। और हां, मैं home.html को खोलने के लिए जा रहा हूँ। और हम पर क्या हो रहा है देखेंगे। यहाँ बहुत शीर्ष पर तो, मुझे लगता है हो रहा है कि कुछ जावास्क्रिप्ट सामान। 

और यहाँ, मैं जाहिरा तौर पर है जिसका आईडी infodiv है एक div, और कुछ जानकारी वहाँ जाने के लिए जा रहा है। और फिर मैं इस फार्म का है। और इस के अंदर फार्म, मैं कुछ है एक का चयन करें, जो बुलाया सिर्फ एक ड्रॉप-डाउन मेनू है विभिन्न विकल्पों में से एक समूह के साथ। और कहा कि, जब बदलता है जाहिरा तौर पर जब चयनित किया गया है कि विकल्प है बदल गया है, मैं फोन करने के लिए जा रहा हूँ कुछ समारोह cs50Info, और फिर मैं जा रहा हूँ this.value में पारित, जहां यह करने के लिए संदर्भित करता है जो विकल्प का चयन किया गया था, और मूल्य, यहाँ विकल्प इन में से एक है मूल्य = बराबर होती है खाली, "ब्लमबर्ग," "बोडेन," "चान" और "मालन।" 

तो क्या वास्तव में हो सकता है जब मैं यह कर यहां होता है? ठीक है, चलो एक ले चलो blumberg.html को देखो। यह सिर्फ एक की तरह लग रहा है कुछ HTML का टुकड़ा। और वास्तव में, मैं क्या उम्मीद कर रहा हूँ यहाँ होने जा रहा है मैं प्लग करने के लिए सक्षम होने के लिए जा रहा हूँ है अपने वेब पेज में सीधे इस HTML फिर से लोड करने के लिए बिना पेज, इस तरह की है कि जब मैं ड्रॉप-डाउन से हन्ना चुनें मेनू, हन्ना के बारे में जानकारी, विशेष रूप से, इस जानकारी में यहां blumberg.html में, पेज पर पता चलता है। और मुझे लगता है ताज़ा करने के लिए नहीं है। और मैं किसी और को चुना है, तो उनकी जानकारी में दिखा सकते हैं। मैं यह कैसे करूं? फिर, यह आवश्यकता हमें कुछ AJAX का उपयोग करने के लिए। और हां, तो हम ajax.js. खोल देता हूँ और यहाँ, cs50Info कि समारोह है। नाम कुछ भी नहीं है, तो मैं लौट आते हैं। मैं अगर कुछ भी करने के लिए नहीं जा रहा हूँ खाली विकल्प चुना गया है। अन्यथा, मैं जा रहा हूँ एक नए XMLHttpRequest पैदा करते हैं। और फिर मैं, जब कहने जा रहा हूँ readyState परिवर्तन, इस समारोह में कहते हैं। 

और readyState है यदि 4 और स्थिति 200 है, यहां एक छोटा सा है 13 लाइन पर jQuery की। लेकिन मैं कह रहा है क्या कर रहा हूँ, सब infodiv की सामग्री को बदलने मैं एक के रूप में वापस मिल गया, जो कुछ भी किया जाना है मेरी HttpRequest से प्रतिक्रिया। 

मेरी HttpRequest क्या है? खैर, यह सही है यहां लाइन 18 और 19 पर। रेखा 18, मैं मूल रूप से तैयारी कर रहा हूँ एक नाम + .html के लिए अनुरोध मिलता है। और फिर, नाम यहाँ है था कि तर्क cs50Info करने के लिए एक पैरामीटर के रूप में पारित कर दिया। 

तो बुनियादी तौर पर, मैं किसी का में गुजर रहा हूँ विकल्पों में से है कि सेट था, जो नाम हम में देखा था कि ड्रॉप-डाउन मेनू के रूप में। मुझे लगता है कि नाम हो रही है। और मुझे लगता है कि मैं करने के लिए आप चाहेंगे कह रहा हूँ मेरे लिए उस file.html प्राप्त करें, और फिर उस अनुरोध भेजें। 

और इतना है कि onreadystatechange जा रहा है सुनने और इंतज़ार और इंतज़ार कर रहा हो और readyState, जब तक इंतजार कर 4 है, और स्थिति 200 है। तो यह कार्य किया जा करने के लिए तैयार है और अनुरोध सफल रहा था। अगर यह होता है और फिर, यह जा रहा है infodiv की सामग्री को बदलने मैं वापस आ गया है कि प्रतिक्रिया पाठ किया जाना है। 

तो चलो यह कैसे देखते हैं वास्तव में काम हो सकता है। इसलिए हम अपने ब्राउज़र के लिए सिर पर हूँ खिड़की, और हम यहाँ देख लेंगे। तो चलो पर एक नजर डालते हैं क्या AJAX में यहाँ पर जा रहा है। इसलिए हम किसी को चुन लेंगे ड्रॉप-डाउन मेनू से। इस मामले में तो, चलो सिर्फ हन्ना चुनें। और सूचना है कि हन्ना के जानकारी बदल गया है, लेकिन मैं any-- नहीं था मेरा पेज पूरी तरह से फिर से लोड नहीं किया। सामान पर रोक लगा दी। सामान के अधिकांश रुके थे। AJAX का टेस्ट बदल नहीं किया था। बटन ही है, इस ड्रॉप-डाउन मेनू बदल नहीं किया था। लेकिन जानकारी वहाँ परिवर्तन किया है। और कैसे पर निर्भर करता है जल्दी से मेरे कंप्यूटर चलता है, आप वास्तव में सामग्री देखना है कि हो सकता है गायब हो जाता है और उसके बाद वास्तव में पुन: दिखाई जल्दी से। यही कारण है कि जा रही सामग्री है infodiv से नष्ट कर दिया, और फिर एक साथ बदल दिया नई अतुल्यकालिक अनुरोध। 

मैं कहना जा करने के लिए यह स्विच करते हैं तो, Rob-- और फिर से एक बार देख ले, और हो सकता है कि हम वास्तव में इसे देखेंगे गायब हो जाते हैं और जल्दी से फिर से बाहर निकलना। आपने देखा? कैसे यह अभी दूर popped और फिर यह refilled? यही कारण है कि AJAX अनुरोध है जगह ले जाने की तरह है। और इतने पर निर्भर करता है व्यक्ति मैं मैं कर रहा हूँ, चुनें एक अलग अतुल्यकालिक बनाने एक अलग फाइल करने के लिए अनुरोध मैं अपने सर्वर पर है। और की सामग्री को मेरी infodiv अद्यतन कर रहे हैं, मैं चुन लिया है इनमें से कौन सा पर आधारित है। तो यह है कि वास्तव में सभी AJAX के लिए वहाँ है। यह हमें इन अतुल्यकालिक बनाने के लिए अनुमति देता है अनुरोध, एक पृष्ठ पर अद्यतन। करने के लिए बिना पूरे पृष्ठ ताज़ा, हम नए पाने के लिए जा रहे हैं बनाकर यह से सामग्री सर्वर के लिए एक नया ताजा अनुरोध। और हां, तो हमारे पृष्ठों बन सकता है बहुत थोड़ा अधिक गतिशील। 

और हम और अधिक पाने के रूप में और अधिक उन्नत, आप की तरह बातें मिल सकता है कहते हैं, आपके ईमेल इनबॉक्स, जहां आप कुछ भी करने की जरूरत नहीं है। आप एक क्लिक की जरूरत नहीं है ड्रॉप-डाउन मेनू या कुछ भी, क्लिक करें और अचानक, अपने नवीनतम ईमेल शीर्ष पर पता चलता है। वह भी सिर्फ एक अजाक्स अनुरोध है। अजाक्स अनुरोध है आपके सर्वर, ईमेल सर्वर, सभी जानकारी पर भेजने के लिए अपने नवीनतम ईमेल के बारे में, और आप पर क्या देख बदल रहा है स्क्रीन ईमेल के अपने नवीनतम स्थापना की जाएगी। और आप एक नया एक में हो, तो कि div के देखते, तो सामग्री प्रतिबिंबित करने के लिए बदल जाएगा अद्यतन सामग्री। मैं डौग लॉयड हूँ। इस CS50 है।