[เล่นเพลง]
>> DOUG LLOYD: ดังนั้นอีกหนึ่ง การเรียงลำดับของความคิดที่ว่า
การจัดเรียงของตกอยู่ภายใต้ร่มของ JavaScript จะสิ่งที่เรียกว่าอาแจ็กซ์
จนมาถึงจุดนี้ของเรา การมีปฏิสัมพันธ์กับ JavaScript
ได้รับการ จำกัด ที่จะผลักดัน ปุ่มและสิ่งที่เกิดขึ้น
และโดยเฉพาะอย่างยิ่ง สิ่งที่เกิดขึ้น
เป็นเว็บไซต์ของเรามองและความรู้สึกเปลี่ยนแปลง
ขวา?
เช่นเดียวกับในโดยเฉพาะอย่างยิ่งใน วัตถุวิดีโอรูปแบบเอกสาร
ผมเปลี่ยนสีพื้นหลัง
แต่เมื่อผมไม่ว่าผมไม่ได้มี ที่จะทำการร้องขอพิเศษใด ๆ เป็นพิเศษ
ฉันไม่ได้มีการขอให้ เซิร์ฟเวอร์ส่งหน้าใหม่
ฉันเพิ่งเปลี่ยนสิ่งที่ฉันมีอยู่แล้ว
ฉันไม่ได้มีการโหลดหน้าเว็บของฉัน และสิ่งที่เปลี่ยนแปลงแน่นอน
เพื่อให้เป็นที่ดี
แต่มีบางอย่างแน่นอน โต้ตอบกับผู้ใช้คู่มือการมีส่วนร่วม
AJAX เป็นเทคนิคที่ช่วยให้เย็น เราจะปรับปรุงเนื้อหาของหน้าเว็บ
และไม่เพียง แต่รูปลักษณ์และ ความรู้สึกโดยไม่ต้องโหลด
>> และโดยเฉพาะอย่างยิ่งเมื่อผม กล่าวว่าการปรับปรุงเนื้อหาของหน้าเว็บ,
ผมไม่ได้บอกว่าเราเขียน หน้าโดยใช้ JavaScript
ฉันขอบอกว่าเราจริง ข้อมูลเพิ่มเติมจากเซิร์ฟเวอร์
โดยไม่ต้องมีหน้าของเราต้องโหลด
>> ตอนนี้การเรียงลำดับของบิตของ เทคนิคที่สูงขึ้น
ที่เรากำลังจะพูดคุย เกี่ยวกับในวิดีโอนี้
เรากำลังจะมีการทำงานร่วมกันบางอย่าง
แต่เมื่อเราทำฉันจะเป็น ทำให้การร้องขอไปยังเว็บเซิร์ฟเวอร์
ในกรณีนี้เพียงแค่สิ่งที่เป็น ใช้เซิร์ฟเวอร์ Apache เว็บของฉัน
ฉันจะได้รับการเพิ่มเติม การร้องขอขณะที่ฉันกำลังไปที่หน้าเว็บ
แต่หน้าของฉันจะไม่ฟื้นฟู
>> มันเป็นเพียงแค่ไป ถ่ายทอดสดการปรับปรุงหน้าเว็บของฉัน
และนั่นคือในความเป็นจริง AJAX ซึ่งย่อมาจาก,
เป็น Asynchronous JavaScript และ XML
XML เป็นชนิดของมาร์กอัปอื่น ภาษาและคุณสามารถเรียงลำดับของ
คิดว่ามันเป็นเพียงเช่น HTML
ก็ไม่เชิงสิ่งเดียวกัน แต่ ก็เพียงพื้นภาษามาร์กอัป
ดังนั้นจึงไม่ตรงกัน JavaScript และภาษามาร์กอัป
>> ดังนั้นเพื่อที่จะใช้นี้ AJAX technique-- AJAX
ไม่ได้เป็นภาษาโปรแกรมที่แยกต่างหาก
มันเป็นเพียงแค่การจัดเรียงของ ชุดของเรา techniques--
จำเป็นต้องสร้างพิเศษ วัตถุ JavaScript ซึ่ง
เรียกว่า XMLHttpRequest
ตอนนี้มันเป็นเรื่องง่ายมากที่จะทำเช่นนี้
เราก็บอกว่า var สิ่งที่ เราต้องการที่จะเรียกวัตถ​​ุนี้
เท่ากับใหม่ XMLHttpRequest
และตอนนี้เราได้รับในขณะนี้ เรียง AJAX ของวัตถุ
หรือ XMLHttpRequest วัตถุซึ่งจะช่วยให้
ที่เราจะถ่ายทอดสดการปรับปรุงหน้าของเรา
>> หลังจากที่เราได้รับใหม่นี้ วัตถุ XMLHttpRequest นี้
เราต้องทำอะไรบางอย่างกับมัน พฤติกรรม onreadystatechange
onreadystatechange พฤติกรรมที่เป็นจริงเพียง
เมื่อคุณทำคำขอ ไปยังหน้าเว็บหน้า
ผ่านไปหลายขั้นตอน
ครั้งแรกที่มีการร้องขอยังไม่ได้ส่ง
แล้วขอได้รับ ส่ง แต่ไม่ได้ดำเนินการใด ๆ
คำขอจากนั้นได้รับการดำเนินการใด ๆ
จากนั้นขอเป็น ถูกส่งกลับมาให้คุณ
>> จากนั้นขอเป็น อย่างเต็มที่ในการโหลดหน้าเว็บของคุณ
เหล่านี้คือรัฐที่แตกต่าง
และเพื่อให้เราต้องตั้งของเรา วัตถุ XMLHttpRequest ใหม่
ที่จะเปลี่ยนเมื่อมีการเปลี่ยนแปลงสถานะพร้อม
และมักจะเราทำเช่นนี้โดย กำหนดฟังก์ชั่นที่ไม่ระบุชื่อซึ่ง
เราคุ้นเคยกับการจาก จาวาสคริปต์ในขณะนี้ว่า
เรียกว่าเมื่อมีการเปลี่ยนแปลงสถานะพร้อม
มันจริงๆไม่มากขึ้นกว่าที่
เรากำลังจะได้รับการกำหนด ฟังก์ชั่นที่ไม่ระบุชื่อเรียงลำดับของสิ่งที่ชอบ
ที่เรากำลังทำใน จาวาสคริปต์ที่เราจะ
มีฟังก์ชั่นที่ไม่ระบุชื่อ ตอบสนองต่อการคลิก,
หรือเมื่อเรากำลังทำแผนที่ของ วัตถุต่างๆในอาร์เรย์
>> บางสิ่งบางอย่างที่เกิดขึ้นเมื่อ สิ่งที่ถูกคลิก
ในกรณีนี้มันเป็นสิ่งที่เป็นเพียงแค่ ที่เกิดขึ้นเมื่อรัฐของหน้าของเรา
การเปลี่ยนแปลง
มีสองคุณสมบัติอื่น ๆ ที่มีการจัดเรียง of-- พวกเขาไม่ได้
คุณสมบัติเท่านั้นที่มี โดยธรรมชาติเพื่อ XMLHttpRequest,
แต่พวกเขากำลังคนที่สำคัญสวย
มีบางอย่างที่เรียกว่า readyState, ซึ่งเป็นคุณอาจจะสามารถคาดเดา
ที่เกี่ยวข้องกับ onreadystatechange
มันจริงจะบอกคุณ สิ่งที่ readyState เป็น
0, 1, 2, 3, และ 4 ความเป็นไปได้ที่นั่น
และพวกเขาเรียงลำดับของประมาณ สอดคล้องกับสิ่งที่
ฉันเป็นเพียงการพูดคุยเกี่ยวกับที่สองที่ผ่านมา
>> และสถานะแล้วซึ่ง หวังว่าถ้าทุกอย่างก็โอเค
200 ซึ่งเป็นระยะสั้น สำหรับของหลักสูตรตกลง
ที่เราคุ้นเคยกับการจาก Http
ดังนั้นเราหวังว่ารัฐพร้อมของเรา สี่และสถานะของเราคือ 200
และถ้ารัฐพร้อมของเรา เป็นสี่และการตอบสนอง
พร้อมที่จะถูกวางบน หน้าและสถานะเป็น 200
เราสามารถที่จะทำ ทุกอย่างประสบความสำเร็จ
ตอนนี้เราสามารถถ่ายทอดสด อัปเดตหน้าของเรา
โดยไม่ต้องโหลด เนื้อหาทั้งหมดของมัน
>> หลังจากที่เราได้กำหนดไว้ว่าเกิดอะไรขึ้น พฤติกรรม onreadystatechange ที่
และเราได้ตรวจสอบว่า readyState คือ 4 และสถานะเป็น 200
แล้วสิ่งที่เราต้องทำคือ เปิดไม่ตรงกัน
คำขอซึ่งเป็นเพียงการทำ แบบ HTTP โดยทั่วไปได้รับการร้องขอ
เพียงแค่ทำมันทางโปรแกรม แทนผ่านเว็บเบราเซอร์ของเรา
และจากนั้นเราส่งคำขอที่
ดังนั้นสิ่งที่ไม่อาจจะ มีลักษณะเหมือนในบริบท?
ดังนั้นนี่คือฟังก์ชั่นที่ ข้อเสนอที่มีการร้องขอ AJAX
ตกลง?
และฉันได้กล่าวโดยพลการ จะยอมรับการโต้แย้ง
และนี่จัดเรียงของที่ โครงกระดูกทั่วไปที่นี่
ที่จุดเริ่มต้นที่เราได้รับ ตัวเองเป็นวัตถุ XMLHttpRequest ใหม่
แล้วฉันต้องตั้ง พฤติกรรม onreadystatechange
และเพื่อที่ฉันจะพูดว่า เมื่อมีการเปลี่ยนแปลง readyState,
ฉันต้องการให้คุณเรียกใช้ฟังก์ชันนี้
>> ซึ่งเป็นไปได้ที่จะถาม คำถามถ้า readyState
คือ 4, ถ้า readyState มีการเปลี่ยนแปลง จะเป็น 4 และสถานะเป็น 200
ดังนั้นเราจึงมีการร้องขอที่ประสบความสำเร็จผม ต้องการที่จะทำบางสิ่งบางอย่างไปยังหน้า
และเราจะมาดู ตัวอย่างของสิ่งที่
บางสิ่งบางอย่างที่อาจจะมีในครั้งที่สอง
ดังนั้นแล้วตอนนี้ผมได้กำหนดไว้ ฟังก์ชั่นที่ไม่ระบุชื่อของฉัน
ฟังก์ชั่นตอบสนองของฉันเมื่อใดก็ตามที่ การเปลี่ยนแปลง readyState
>> ดังนั้นแล้วฉันก็ต้องเปิด ขอใช้วิธีการเปิด
แล้วฉันส่งขอให้
และให้ดูที่ ตัวอย่างที่เป็นรูปธรรมมากขึ้น
ของสิ่งที่ AJAX สามารถทำได้บนหน้าเว็บของเรา
ดังนั้นผมจึงมีที่นี่ที่ง่ายมาก หน้าเรียกว่า home.html
และผมได้มีข้อมูลไป ที่นี่และการเรียงลำดับของเมนูแบบเลื่อนลงบางส่วน
>> และเราจะทบทวนนี้ในหนึ่งวินาที
แต่ผมคิดว่าตอนนี้เราควรใช้เวลา ดูรหัสที่มาที่เกิดขึ้นจริง
ดังนั้นฉันจะเปิด home.html
และเราจะเห็นสิ่งที่เกิดขึ้น
ดังนั้นขึ้นที่ด้านบนมากที่นี่ผมมี บางสิ่ง JavaScript ที่เกิดขึ้น
>> และที่นี่ผมเห็นได้ชัดว่ามี div ที่มี ID เป็น infodiv,
และข้อมูลบางส่วน จะไปที่นั่น
แล้วผมมีรูปแบบนี้
และภายในนี้ รูปแบบที่ผมมีบางสิ่งบางอย่าง
เรียกว่าเลือกที่ เป็นเพียงเมนูแบบเลื่อนลง
กับพวงของตัวเลือกที่แตกต่างกัน
และเห็นได้ชัดเมื่อที่มีการเปลี่ยนแปลงเมื่อ ตัวเลือกที่ได้รับการคัดเลือกมี
การเปลี่ยนแปลงฉันจะเรียก บางฟังก์ชั่น cs50Info,
แล้วฉันจะไป ผ่านใน this.value,
ที่นี้หมายถึง ตัวเลือกที่ถูกเลือก
และความคุ้มค่าเป็นหนึ่งในเหล่านี้ที่นี่เป็นตัวเลือก value = เท่ากับที่ว่างเปล่า "Blumberg"
"โบว์", "จัง" และ "ลัน."
>> ดังนั้นสิ่งที่อาจจะจริง เกิดขึ้นที่นี่เมื่อผมทำเช่นนี้?
ดีลองมา ดู blumberg.html
ดูเหมือนว่ามันเป็นเพียง ตัวอย่างของบาง Html
และในความเป็นจริงสิ่งที่ฉันหวัง ที่จะเกิดขึ้นที่นี่
เป็นที่ฉันจะสามารถที่จะเสียบ Html นี้โดยตรงลงในหน้าเว็บของฉัน
โดยไม่ต้องโหลด หน้าเช่นว่าเมื่อ
ฉันเลือกที่ฮันนาห์จากแบบหล่นลง เมนูข้อมูลเกี่ยวกับฮันนาห์
โดยเฉพาะอย่างยิ่งข้อมูลนี้ ที่นี่ใน blumberg.html,
คือสิ่งที่ปรากฏขึ้นบนหน้า
และผมก็ไม่ได้มีการฟื้นฟู
และถ้าผมเลือกคนอื่น ข้อมูลของพวกเขาจะแสดงให้เห็นถึง
ฉันจะทำเช่นนี้ได้อย่างไร?
อีกครั้งนี้ต้องใช้ เราใช้ AJAX บาง
ดังนั้นเราจะเปิด ajax.js.
และนี่คือฟังก์ชั่นที่ cs50Info
ถ้าชื่ออะไรผมกลับมา
ผมไม่ได้ไปทำอะไรถ้า ตัวเลือกที่ว่างเปล่าได้รับการคัดเลือก
มิฉะนั้นผมกำลังจะไป สร้างใหม่ XMLHttpRequest
และแล้วฉันจะบอกว่าเมื่อ การเปลี่ยนแปลง readyState เรียกฟังก์ชั่นนี้
>> และถ้าเป็น readyState 4 และสถานะเป็น 200
ที่นี่นิด ๆ หน่อย ๆ ของ jQuery ในบรรทัดที่ 13
แต่ทั้งหมดที่ฉันทำไม่ว่าจะเป็น เปลี่ยนเนื้อหาของ infodiv
จะเป็นสิ่งที่ฉันได้กลับมาเป็น การตอบสนองจาก HttpRequest ของฉัน
>> HttpRequest ของฉันคืออะไร
ดีที่เหมาะสม ที่นี่ในบรรทัดที่ 18 และ 19
สาย 18 ผมเตรียมพื้น GET คำขอสำหรับชื่อ + .html
และอีกครั้งที่นี่เป็นชื่อ อาร์กิวเมนต์ที่เป็น
ผ่านเป็นพารามิเตอร์ที่จะ cs50Info
>> ดังนั้นโดยทั่วไปฉันกำลังผ่านในของคน ชื่อซึ่งเป็นชุดของตัวเลือกที่
ที่เราเห็นใน เมนูแบบเลื่อนลงในรูปแบบ
ฉันได้รับชื่อ
และฉันบอกว่าฉันต้องการให้คุณ โปรดได้รับสำหรับฉัน file.html ว่า
แล้วส่งคำขอที่
>> และเพื่อ onreadystatechange ที่เป็นไป จะต้องมีการฟังและการรอคอยและรอ
และรอจนกว่า readyState คือ 4 และสถานะเป็น 200
ดังนั้นจึงพร้อมที่จะทำหน้าที่ และขอให้ประสบความสำเร็จ
และแล้วถ้ามันเป็นมันจะ เปลี่ยนเนื้อหาของ infodiv
เพื่อการตอบสนองเป็นข้อความที่ผมได้กลับมา
>> ดังนั้นเรามาดูวิธีนี้ จริงๆแล้วอาจจะทำงาน
ดังนั้นเราจะมุ่งหน้าไปยังเบราว์เซอร์ หน้าต่างและเราจะดูที่นี่
ดังนั้นลองมาดูที่ สิ่งที่เกิดขึ้นที่นี่ใน AJAX
ดังนั้นเราจะเลือกใครสักคน จากเมนูแบบเลื่อนลง
ดังนั้นในกรณีนี้ขอ เพียงแค่เลือกฮันนาห์
และแจ้งให้ทราบว่าฮันนาห์ ข้อมูลที่มีการเปลี่ยนแปลง
แต่ฉันไม่ได้มี any-- ของฉัน หน้าไม่ได้โหลดอย่างสิ้นเชิง
สิ่งที่อยู่
ส่วนใหญ่ของสิ่งที่อยู่
AJAX ทดสอบไม่ได้เปลี่ยน
ปุ่มที่ตัวเองนี้ เมนูแบบเลื่อนลงไม่ได้เปลี่ยน
แต่ข้อมูลที่ได้มีการเปลี่ยนแปลง
และขึ้นอยู่กับว่า ได้อย่างรวดเร็วย้ายคอมพิวเตอร์ของฉัน
คุณจริงอาจจะเห็นว่าเนื้อหา หายไปแล้วโผล่เข้ามาจริงๆ
อย่างรวดเร็ว
นั่นคือเนื้อหาเป็น ลบออกจาก infodiv,
และแทนที่ด้วย คำขอตรงกันใหม่
>> ดังนั้นถ้าผมเปลี่ยนมันที่จะพูดว่า Rob-- และอีกครั้งจะดูที่
และบางทีเราจะเห็นมันจริง หายไปและเกิดขึ้นอีกครั้งอย่างรวดเร็ว
คุณเห็นว่า?
วิธีมันก็โผล่ออกไป และจากนั้นก็เติม?
นั่นคือการร้องขอ AJAX การจัดเรียงของที่เกิดขึ้น
และอื่น ๆ ขึ้นอยู่กับ คนที่ผมเลือกผม
การทำที่แตกต่างกันไม่ตรงกัน การร้องขอไปยังแฟ้มที่แตกต่างกัน
ที่ฉันมีบนเซิร์ฟเวอร์ของฉัน
และเนื้อหาของฉัน infodiv กำลังปรับปรุง,
ตามที่เหล่านี้ฉันได้เลือก
เพื่อที่ว่าจริงๆทั้งหมดที่มีให้อาแจ็กซ์
มันช่วยให้เราสามารถที่จะทำให้ไม่ตรงกันเหล่านี้ การร้องขอการปรับปรุงไปยังหน้า
โดยไม่ต้อง รีเฟรชหน้าทั้งหมด
เรากำลังจะได้รับใหม่ เนื้อหาจากมันโดยการ
คำขอสดใหม่ไปยังเซิร์ฟเวอร์
และเพื่อให้หน้าของเราจะกลายเป็น ไม่น้อยแบบไดนามิกมากขึ้น
>> และการที่เราได้รับเพิ่มเติม และอื่น ๆ ขั้นสูงคุณ
อาจได้รับสิ่งที่ต้องการ พูด, กล่องจดหมายอีเมลของคุณ
ที่คุณไม่ต้องทำอะไร
คุณจะได้ไม่ต้องคลิก เมนูแบบเลื่อนลงหรือคลิกอะไร
และในทันทีที่ของคุณใหม่ล่าสุด อีเมลจะแสดงขึ้นที่ด้านบน
นั่นก็เป็นเพียงแค่การร้องขออาแจ็กซ์
อาแจ็กซ์จะขอของคุณ เซิร์ฟเวอร์เซิร์ฟเวอร์อีเมล
เพื่อส่งผ่านข้อมูลทั้งหมด เกี่ยวกับอีเมล์ล่าสุดของคุณ
และการเปลี่ยนแปลงสิ่งที่คุณเห็นใน หน้าจอจะเป็นชุดใหม่ล่าสุดของอีเมลของคุณ
และถ้าคุณมีหนึ่งใหม่ใน มีแล้วเนื้อหาของ div ที่
จะมีการเปลี่ยนแปลงเพื่อให้สอดคล้องกับ เนื้อหาที่มีการปรับปรุง
ฉันลอยด์ดั๊ก
นี่คือ CS50