[عزف الموسيقى] DOUG لويد: لذلك أكثر واحد نوع من فكرة أن نوع من يندرج تحت مظلة جافا سكريبت هي ما يسمى AJAX. حتى هذه النقطة، لدينا التفاعل مع جافا سكريبت وقد تقتصر على دفع زر ويحدث شيء. وتحديدا، شيء ما يحدث غير مواقعنا الشكل والمظهر التغييرات. الصحيح؟ مثل على وجه الخصوص، في وثيقة نموذج الكائن الفيديو، لقد غيرت لون الخلفية. ولكن عندما فعلت ذلك، لم يكن لدي للقيام بأي طلبات إضافية خاصة. لم يكن لدي أن أطلب خادم ترسل لي صفحة جديدة. أنا مجرد تغيير ما كان بالفعل. لم يكن لديك لإعادة تحميل الصفحة الخاصة بي، والأمور تغيرت بالتأكيد، لذلك هذا أمر عظيم. ولكن هناك بالتأكيد بعض دليل تفاعل المستخدم المعنية. AJAX هو أسلوب بارد التي تسمح لنا لتحديث محتويات الصفحة، وليس فقط في الشكل و يشعر، دون إعادة شحن. 

وعلى وجه التحديد عندما كنت أقول تحديث محتوى الصفحة، أنا لا أقول أننا إعادة كتابة الصفحة باستخدام جافا سكريبت. أنا أقول نطلب الواقع مزيد من المعلومات من الخادم دون صفحتنا الحاجة إلى إعادة تحميل. 

الآن هذا النوع من قليلا من تقنية أكثر تقدما أننا بصدد الحديث حول في هذا الفيديو. ونحن في طريقنا لديك بعض التفاعل. ولكن عندما نفعل ذلك، أنا ذاهب ليكون تقديم طلبات إلى خادم الويب. في هذه الحالة، فقط ما هو تشغيل أباتشي خادم الويب الخاص بي. انا ذاهب الى أن تكون القرارات إضافية طلبات بينما أنا بزيارة صفحة ويب، ولكن سوف يتم تحديث صفحتي. 

انها مجرد الذهاب الى غير متزامن تحديث الصفحة الخاصة بي. وهذا هو، في الواقع، AJAX التي تقف على، غير متزامن جافا سكريبت وإكس إم إل. XML هو نوع آخر من العلامات لغة، ويمكنك فرز لل التفكير في الأمر تماما مثل HTML. انها ليست تماما نفس الشيء، ولكن انها في الاساس مجرد لغة الترميز. لذلك فمن غير متزامن جافا سكريبت ولغة ترميز. 

وذلك من أجل استخدام هذه AJAX technique-- AJAX ليست لغة برمجة منفصلة. انها مجرد نوع من مجموعة من techniques-- نحن تحتاج إلى إنشاء الخاصة كائن جافا سكريبت، التي يتم استدعاء مدعوم. الآن، فإنه من السهل جدا للقيام بذلك. نقول فقط فار، أيا كان نريد أن نسمي هذا الكائن، يساوي مدعوم الجديد. والآن حصلنا عليها الآن والنوع AJAX من وجوه، أو مدعوم وجوه، والتي سوف تسمح لل لنا لتحديث بشكل غير متزامن صفحتنا. 

بعد أن نكون قد حصلت على هذا جديدة وجوه، وهذا مدعوم، علينا أن نفعل شيئا لل السلوك onreadystatechange. Onreadystatechange السلوك هو في الحقيقة مجرد عند تقديم طلب إلى صفحة الويب، صفحة يذهب من خلال عدد من الخطوات. أولا، لم يتم إرسال الطلب. ثم، فإن الطلب أرسلت، ولكن لا تصرف عليها. ثم تم عمل طلب عليه. ثم الطلب إرسالها إليك. 

ثم، كان الطلب محملة بالكامل في الصفحة الخاصة بك. تلك هي ولايات مختلفة. ولذا فإننا بحاجة إلى تعيين لدينا كائن مدعوم جديد لتغيير عند تغيير حالة استعداد. وعادة، ونحن نفعل ذلك من خلال تحديد وظيفة غير معروفة والتى نحن على دراية من جافا سكريبت الآن، أن ويسمى عند تغيير حالة استعداد. انها حقا ليست أكثر من ذلك بكثير. نحن ذاهبون لمجرد أن تحدد ل وظيفة مجهول، نوع من مثل ما كنا نفعل في جافا سكريبت، حيث كنا لها وظيفة غير معروفة الاستجابة لفي نقرة، أو عندما كنا نفعل خريطة الكائنات المختلفة في صفيف. 

حدث شيء عندما تم النقر شيء. في هذه الحالة، انها مجرد شيء يحدث عندما تكون الدولة في صفحتنا التغييرات. هناك نوعان من الخصائص الأخرى التي يتم الفرز of-- انهم لا خصائص الوحيدة التي ملازمة لمدعوم، ولكنهم هم مهم جدا. هناك شيء يسمى ReadyState عن، والتي كما يمكنك تخمين ربما، غير المتعلقة onreadystatechange. وهو يروي في الواقع كنت ما هو في ReadyState. 0، 1، 2، 3، و 4 الاحتمالات هناك، وأنها نوع من تقريبا تتوافق مع ما كنت مجرد الحديث قبل حوالي الثانية. 

ثم وضع، الذي نأمل لو ذهب كل شيء جيد، هو 200، وهو باختصار ل، بطبيعة الحال، OK، ونحن على دراية من المتشعب. لذلك نحن على أمل أن الدولة مستعدة لدينا أربعة، ومركزنا هو 200. وإذا حالة استعداد لدينا أربعة، والاستجابة هو على استعداد لوضعها على الصفحة، والوضع هو 200، كنا قادرين على القيام كل شيء بنجاح، الآن يمكننا بشكل غير متزامن تحديث الصفحة لدينا دون الحاجة إلى إعادة تحميل المحتوى الكامل منه. 

بعد أن قمت بتعريف ما يحدث إلى سلوك onreadystatechange، ولقد تأكدت من أنه ReadyState عن هو 4 والحالة 200، ثم كل ما عليك القيام به هو فتح غير متزامن الطلب، مما يجعل مجرد وHTTP GET عموما الطلب. مجرد القيام برمجيا، بدلا من خلال متصفح الويب لدينا. ثم نرسل هذا الطلب. فماذا يعني هذا ربما تبدو وكأنها في السياق؟ حتى هنا وظيفة التي يتعامل مع طلبات AJAX. موافق؟ ولقد قال تعسفا أنها تقبل حجة. وهذا النوع من هيكل عظمي العام هنا. في البداية، وحصلنا على أنفسنا كائن مدعوم الجديد. ثم، ولست بحاجة لتعيين السلوك onreadystatechange. لذا فإنني سأقول عندما يتغير ReadyState عن، أريدك أن استدعاء هذه الدالة. 

وهو ذاهب الى تسأل السؤال، إذا في ReadyState هو 4، إذا كان قد تغير في ReadyState لتكون 4، وكان وضع 200، لذلك كان علينا طلب ناجحة، وأنا تريد أن تفعل شيئا إلى الصفحة. ونحن سوف نلقي نظرة على مثال ما قد يكون ذلك شيء في ثانية. حتى ذلك الحين، وأنا الآن قد حددت بلدي وظيفة مجهول، مهمتي استجابة كلما التغييرات ReadyState عن. 

حتى ذلك الحين أنا فقط بحاجة إلى فتح طلب، وذلك باستخدام طريقة فتح. وبعد ذلك، أبعث هذا الطلب. ودعونا نلقي نظرة على مثال ملموس أكثر ما AJAX يمكن القيام به على صفحات الويب لدينا. لذلك ليس لدي هنا بسيط جدا الصفحة دعت صفحة home.html. وأنا عندي يذهب للمعلومات هنا ونوعا من القائمة المنسدلة. 

وسوف نعيد النظر هذه في ثانية واحدة. ولكن أعتقد أنه يجب علينا الآن أن نلقي إلقاء نظرة على شفرة المصدر الفعلي. وهكذا، وانا ذاهب لفتح صفحة home.html. وسنرى ما يحدث. حتى في أعلى جدا هنا، ولدي بعض الاشياء جافا سكريبت أن يحدث. 

وهنا، وأنا على ما يبدو لديها وشعبة الذين ID هو infodiv، وبعض المعلومات سوف نذهب الى هناك. ثم لدي هذا النموذج. وداخل هذا شكل، لدي شيء يسمى حدد، الذي هو مجرد القائمة المنسدلة مع مجموعة من الخيارات المختلفة. وعلى ما يبدو عندما يتغير هذا عندما الخيار الذي تم اختياره له تغير، وانا ذاهب للاتصال بعض من وظيفة cs50Info، ثم انا ذاهب الى تمر في this.value، حيث يشير هذا إلى الخيار الذي تم اختياره، والقيمة هي واحدة من هذه هنا، والخيار قيمة = يساوي فارغة، "بلومبرغ" "بودين"، "تشان"، و "مالان". 

وذلك ما قد فعلا يحدث هنا عندما أفعل هذا؟ حسنا، دعونا نلقي ننظر blumberg.html. يبدو انها مجرد مقتطف من بعض الاكواد. في واقع الأمر، ما أنا على أمل سيحدث هنا وانا ذاهب لتكون قادرة على سد العجز هذه الاكواد مباشرة إلى صفحة الويب الخاصة بي دون الحاجة إلى إعادة تحميل الصفحة، بحيث أنه عندما اخترت هانا من القائمة المنسدلة القائمة، معلومات عن هانا، ولا سيما أن هذه المعلومات هنا في blumberg.html، هو ما يظهر على الصفحة. وأنا لم يكن لديك لتحديث. وإذا اخترت شخص آخر، أن معلوماتهم تظهر. كيف افعل هذا؟ مرة أخرى، وهذا يتطلب لنا استخدام بعض AJAX. وهكذا، ونحن سوف تفتح ajax.js. وهنا هو أن وظيفة، cs50Info. إذا كان اسم شيء، أعود. أنا لن تفعل أي شيء إذا وقد تم اختيار الخيار فارغا. خلاف ذلك، وانا ذاهب ل إنشاء مدعوم الجديد. ثم انا ذاهب الى القول، عندما تغييرات ReadyState عن، استدعاء هذه الدالة. 

وإذا في ReadyState هو 4 وكانت الحالة 200، هنا قليلا من مسج على خط 13. ولكن كل ما أفعله هو قائلا: تغيير محتويات infodiv ليكون ما عدت بمثابة رد من وجهة نظري HttpRequest. 

ما هي لغتي HttpRequest؟ حسنا، هذا صحيح هنا على خط 18 و 19. خط 18، وأنا إعداد الأساس وطلب GET لاسم + هتمل. ومرة أخرى، اسم هنا الحجة التي كانت مرت في كمعلمة إلى cs50Info. 

ذلك أساسا، أنا يمر في شخص ما اسم، وهي أن مجموعة من الخيارات الذي رأيناه في القائمة المنسدلة في النموذج. أنا الحصول على هذا الاسم. وأنا أقول أود منك ل يرجى الحصول بالنسبة لي أن file.html، ثم قم بإرسال هذا الطلب. 

وبحيث onreadystatechange يسير أن يكون الاستماع والانتظار والانتظار والانتظار، حتى في ReadyState هو 4، والوضع هو 200. لذلك فمن جاهزة للعمل، وكان الطلب ناجحا. ثم إذا كان كذلك، فإنه سيكون ل تغيير محتويات infodiv أن يكون النص الاستجابة التي حصلت على العودة. 

لذلك دعونا نرى كيف هذا قد عمل فعلا. ولذا فإننا سوف يتوجه الى متصفحي النافذة، وسوف نبحث هنا. لذلك دعونا نلقي نظرة على ما الذي يحدث هنا في AJAX. ولذا فإننا سوف اختيار شخص من القائمة المنسدلة. حتى في هذه الحالة، دعونا مجرد اختيار هانا. ولاحظ أن لهانا لقد تغيرت المعلومات، ولكن لم يكن لدي any-- بلدي لم يكن إعادة تحميل الصفحة بالكامل. بقي الاشياء. بقي معظم الاشياء. لم AJAX اختبار لا تغيير. الزر نفسه، وهذا القائمة المنسدلة لم تتغير. ولكن هناك معلومات لم تتغير. واعتمادا على كيفية بسرعة بلدي التحركات الكمبيوتر، كنت في الواقع قد نرى أن المحتوى يختفي ثم يظهر ثانية وحقا بسرعة. هذا المحتوى يجري حذف من infodiv، ومن ثم استبدالها طلب غير متزامن جديد. 

حتى لو كنت التبديل إلى أن أقول، Rob-- ومرة ​​أخرى، نلقي نظرة، وربما سنرى فعلا تختفي وتعود الى الظهور بسرعة. أنت ترى أن؟ كيف برزت فقط بعيدا، وبعد ذلك تعبئتها؟ هذا هو طلب AJAX نوع من الحدوث. وذلك اعتمادا على شخص اخترت، وأنا جعل المتزامن مختلفة طلب إلى ملف مختلف أن لدي في خدمة بلدي. ومحتويات بلدي infodiv تقوم بتحديث، استنادا إلى أي من هذه لقد اخترت. ولهذا حقا كل ما في AJAX. لأنها تتيح لنا لجعل هذه المتزامن طلبات والتحديثات لصفحة. دون الحاجة إلى تحديث الصفحة بأكملها، ونحن في طريقنا للحصول على جديد المحتوى من ذلك بجعل طلب العذبة الجديد إلى الملقم. وهكذا، يمكن أن تصبح صفحاتنا لا بأس به أكثر ديناميكية. 

وكلما تقدمنا ​​أكثر وأكثر تقدما، ل قد تحصل أشياء مثل مثلا، بريدك الالكتروني، حيث لم يكن لديك لفعل أي شيء. لم يكن لديك لفوق القائمة المنسدلة أو انقر فوق أي شيء، وفجأة، أحدث الخاص بك البريد الإلكتروني يظهر في الجزء العلوي. وهذا أيضا مجرد طلب اياكس. اياكس يطلب بك خادم، خادم البريد الإلكتروني، لإرسال أكثر من جميع المعلومات حول أحدث رسائل البريد الإلكتروني، وتغيير ما تراه على الشاشة ليكون أحدث لديك مجموعة من رسائل البريد الإلكتروني. وإذا كان لديك واحدة جديدة في هناك، ثم محتوى ذلك شعبة ستتغير لتعكس المحتوى المحدث. أنا دوغ ويد. هذا هو CS50.