[MUSIC CHƠI] DOUG LLOYD: Vì vậy, hơn một loại ý niệm đó loại thuộc dưới sự bảo trợ của JavaScript là một cái gì đó gọi là AJAX. Cho đến thời điểm này, chúng tôi tương tác với JavaScript đã được hạn chế để đẩy một nút và một cái gì đó xảy ra. Và đặc biệt, các một cái gì đó xảy ra là trang web của chúng tôi xem và cảm nhận sự thay đổi. Bên phải? Giống như nói riêng, trong tài liệu mô hình đối tượng video, Tôi đã thay đổi màu nền. Nhưng khi tôi đã làm điều đó, tôi không có làm bất cứ yêu cầu thêm đặc biệt. Tôi không phải yêu cầu các máy chủ gửi cho tôi một trang mới. Tôi chỉ cần thay đổi những gì tôi đã có. Tôi không phải tải lại trang web của tôi, và điều chắc chắn thay đổi, vì vậy đó là tuyệt vời. Nhưng có chắc chắn một số tương tác hướng dẫn sử dụng có liên quan. AJAX là một kỹ thuật mát mẻ cho phép chúng tôi để cập nhật nội dung của trang, và không chỉ là cái nhìn và cảm thấy, mà không tải lại. 

Và bằng cách đặc biệt khi tôi nói cập nhật nội dung của trang web, Tôi không nói rằng chúng ta viết lại các trang bằng cách sử dụng JavaScript. Tôi nói rằng chúng tôi thực sự yêu cầu thêm thông tin từ các máy chủ mà không cần trang của chúng tôi không phải nạp lại. 

Bây giờ sắp xếp của một chút một kỹ thuật tiên tiến hơn rằng chúng ta sẽ nói chuyện về trong video này. Chúng ta sẽ có một số tương tác. Nhưng khi chúng tôi làm, tôi sẽ được làm cho các yêu cầu đến máy chủ web. Trong trường hợp này, chỉ cần những gì chạy máy chủ web Apache của tôi. Tôi sẽ được làm thêm yêu cầu trong khi tôi ghé thăm một trang web, nhưng trang của tôi sẽ không làm mới. 

Nó chỉ đi không đồng bộ cập nhật trang web của tôi. Và đó là, trên thực tế, mà AJAX là viết tắt của, là Asynchronous JavaScript và XML. XML là một loại đánh dấu ngôn ngữ, và bạn có thể sắp xếp của nghĩ về nó giống như HTML. Nó không phải là điều khá giống nhau, nhưng về cơ bản nó chỉ là một ngôn ngữ đánh dấu. Vì vậy, nó không đồng bộ JavaScript và một ngôn ngữ đánh dấu. 

Vì vậy, để sử dụng này AJAX technique-- AJAX không phải là một ngôn ngữ lập trình riêng biệt. Nó chỉ là sắp xếp của một bộ techniques-- chúng tôi cần phải tạo ra một đặc biệt Đối tượng JavaScript, được gọi là một XMLHttpRequest. Bây giờ, nó rất dễ dàng để làm điều này. Chúng tôi chỉ nói var, bất cứ điều gì chúng tôi muốn gọi đối tượng này, bằng XMLHttpRequest mới. Và bây giờ chúng ta đã thu được một loại AJAX của đối tượng, hoặc một XMLHttpRequest đối tượng, mà sẽ cho phép chúng tôi không đồng bộ cập nhật trang của chúng tôi. 

Sau khi chúng tôi đã nhận được mới này đối tượng, XMLHttpRequest này, chúng ta phải làm gì đó để nó hành vi onreadystatechange. Onreadystatechange hành vi thực sự chỉ là khi bạn thực hiện một yêu cầu đến một trang web, trang đi qua một số bước. Đầu tiên, một yêu cầu đã không được gửi đi. Sau đó, các yêu cầu đã được gửi, nhưng không hành động ngay. Sau đó yêu cầu đã được thực thi. Sau đó yêu cầu là được gửi lại cho bạn. 

Sau đó, yêu cầu là nạp đầy đủ trong trang của bạn. Đó là những trạng thái khác nhau. Và vì vậy chúng tôi cần phải thiết lập của chúng tôi đối tượng XMLHttpRequest mới thay đổi khi thay đổi trạng thái sẵn sàng. Và thông thường, chúng ta làm điều này bằng xác định một chức năng vô danh, mà chúng ta đã quen thuộc với các từ JavaScript bây giờ, đó được gọi là khi thay đổi trạng thái sẵn sàng. Nó thực sự không nhiều hơn thế. Chúng tôi chỉ cần đi để được xác định một chức năng ẩn danh, loại thích những gì chúng tôi đã làm trong JavaScript, nơi chúng tôi sẽ có một chức năng ẩn danh đáp ứng với một nhấp chuột vào, hoặc khi chúng tôi đã làm một bản đồ của các đối tượng khác nhau trong một mảng. 

Một cái gì đó đã xảy ra khi một cái gì đó được nhấp. Trong trường hợp này, nó chỉ là cái gì là xảy ra khi trạng thái của trang của chúng tôi thay đổi. Có hai đặc tính khác được loại of-- họ không các thuộc tính duy nhất có vốn có để XMLHttpRequest, nhưng chúng những người khá quan trọng. Có một cái gì đó gọi là readyState, mà như bạn có thể đoán, là liên quan đến onreadystatechange. Nó thực sự cho bạn những gì là readyState. 0, 1, 2, 3, và 4 khả năng này, và họ sắp xếp của khoảng tương ứng với những gì Tôi chỉ nói về một giây trước đó. 

Và sau đó trạng thái, hy vọng nếu mọi thứ đều OK, là 200, mà là ngắn cho, tất nhiên, OK, mà chúng ta đã quen thuộc với từ Http. Vì vậy, chúng tôi hy vọng rằng chúng ta trạng thái sẵn sàng là bốn, và tình trạng của chúng tôi là 200. Và nếu trạng thái sẵn sàng của chúng tôi là bốn, và phản ứng sẵn sàng để được đưa vào trang, và tình trạng này là 200, chúng tôi đã có thể làm tất cả mọi thứ thành công, bây giờ chúng ta có thể không đồng bộ cập nhật trang của chúng tôi mà không cần phải tải lại toàn bộ nội dung của nó. 

Sau khi chúng tôi đã xác định những gì sẽ xảy ra đến hành vi onreadystatechange, và chúng tôi đã kiểm tra rằng readyState 4 và tình trạng là 200, sau đó tất cả chúng ta cần phải làm là mở ra một không đồng bộ yêu cầu, mà chỉ là làm cho một Http thường GET yêu cầu. Chỉ cần làm nó lập trình, thay vì thông qua trình duyệt web của chúng tôi. Và sau đó chúng tôi gửi yêu cầu đó. Vì vậy, những gì hiện này có lẽ như thế nào trong bối cảnh? Vì vậy, đây là một chức năng mà Chương trình khuyến mại với các yêu cầu AJAX. ĐƯỢC? Và tôi đã tự ý nói nó chấp nhận một đối số. Và đây là một loại một bộ xương nói chung ở đây. Lúc đầu, chúng tôi nhận mình một đối tượng XMLHttpRequest mới. Sau đó, tôi cần phải đặt hành vi onreadystatechange. Và vì vậy tôi sẽ nói khi thay đổi readyState, Tôi muốn bạn để gọi chức năng này. 

Đó là sẽ yêu cầu câu hỏi, nếu readyState là 4, nếu readyState đã thay đổi là 4, và tình trạng này là 200, vì vậy chúng tôi có một yêu cầu thành công, tôi muốn làm một cái gì đó để trang. Và chúng ta sẽ có một cái nhìn một ví dụ về những gì cái gì mà có thể là trong một giây. Vì vậy, sau đó, bây giờ tôi đã xác định chức năng ẩn danh của tôi, chức năng phản ứng của tôi bất cứ khi nào những thay đổi readyState. 

Vì vậy, sau đó tôi chỉ cần mở một yêu cầu, sử dụng phương thức Open. Và sau đó, tôi gửi yêu cầu đó. Và chúng ta hãy nhìn vào một ví dụ cụ thể hơn những gì AJAX có thể làm trên trang web của chúng tôi. Vì vậy, tôi có ở đây rất đơn giản Trang home.htm. Và tôi đã có một thông tin đi ở đây và một số loại đơn thả xuống. 

Và chúng tôi sẽ xem xét lại điều này trong một giây. Nhưng tôi nghĩ rằng bây giờ chúng ta hãy nên nhìn vào mã nguồn thực tế. Và như vậy, tôi sẽ mở ra home.html. Và chúng ta sẽ thấy những gì đang xảy ra. Vì vậy, ở đầu rất ở đây, tôi có một số công cụ JavaScript rằng đang xảy ra. 

Và ở đây, tôi dường như có một div có ID là infodiv, và một số thông tin được đi đến đó. Và sau đó tôi có hình thức này. Và bên trong này hình thức, tôi có cái gì gọi là Select, mà chỉ là một trình đơn thả xuống với một loạt các tùy chọn khác nhau. Và rõ ràng khi mà thay đổi, khi các tùy chọn đã được lựa chọn có thay đổi, tôi sẽ gọi một số chức năng cs50Info, và sau đó tôi sẽ vượt qua trong this.value, nơi này đề cập đến mà tùy chọn đã được lựa chọn, và giá trị là một trong những ở đây, tùy chọn value = bằng trống rỗng ", Blumberg," "Bowden," "chan", và "Malan." 

Vì vậy, những gì có thể thực sự xảy ra ở đây khi tôi làm điều này? Vâng, chúng ta hãy nhìn vào blumberg.html. Hình như nó chỉ là một đoạn của một số Html. Và trên thực tế, những gì tôi hy vọng sẽ xảy ra ở đây là tôi đang đi để có thể cắm Html này trực tiếp vào trang web của tôi mà không cần phải tải lại trang, như vậy mà khi Tôi chọn Hannah từ trình đơn thả xuống menu, thông tin về Hannah, Đặc biệt, thông tin này ở đây trong blumberg.html, là những gì thể hiện trên trang. Và tôi không cần phải làm mới. Và nếu tôi đã chọn một người khác, thông tin của họ sẽ hiện lên. Làm thế nào để tôi làm điều này? Một lần nữa, điều này đòi hỏi chúng tôi sử dụng một số AJAX. Và như vậy, chúng tôi sẽ mở ajax.js. Và đây là chức năng đó, cs50Info. Nếu tên là gì, tôi quay trở lại. Tôi sẽ không để làm gì nếu sự lựa chọn sản phẩm nào đã được chọn. Nếu không, tôi sẽ tạo ra một XMLHttpRequest mới. Và sau đó tôi sẽ nói, khi thay đổi readyState, gọi chức năng này. 

Và nếu là readyState 4 và tình trạng này là 200, đây là một chút của jQuery trên dòng 13. Nhưng tất cả tôi đang làm là nói, thay đổi nội dung của infodiv được bất cứ điều gì tôi đã trở lại như một phản ứng từ HttpRequest của tôi. 

HttpRequest của tôi là gì? Vâng, đó là đúng đây trên dòng 18 và 19. Dòng 18, tôi về cơ bản chuẩn bị một GET yêu cầu cho tên + .html. Và một lần nữa, tên ở đây là lập luận rằng đã thông qua tại như một tham số để cs50Info. 

Vì vậy, về cơ bản, tôi đi qua trong một ai đó tên, đó là tập hợp các tùy chọn mà chúng ta đã thấy trong các trình đơn thả xuống trong biểu mẫu. Tôi nhận được tên đó. Và tôi nói rằng tôi sẽ như bạn để xin vui lòng cho tôi có được file.html rằng, và sau đó gửi yêu cầu đó. 

Và như vậy có nghĩa là sẽ onreadystatechange để được lắng nghe và chờ đợi và chờ đợi và chờ đợi, cho đến khi readyState là 4, và tình trạng này là 200. Vì vậy, nó đã sẵn sàng để được phục vụ, và các yêu cầu đã thành công. Và sau đó nếu nó được, nó sẽ thay đổi nội dung của infodiv được văn bản trả lời rằng tôi đã trở lại. 

Vì vậy, chúng ta hãy xem cách này thực sự có thể làm việc. Vì vậy, chúng ta sẽ đi qua để trình duyệt của tôi cửa sổ, và chúng tôi sẽ xem xét ở đây. Vì vậy, chúng ta hãy nhìn vào những gì đang xảy ra ở đây trong AJAX. Vì vậy, chúng tôi sẽ chọn ai đó từ trình đơn thả xuống. Vì vậy, trong trường hợp này, chúng ta hãy chỉ cần chọn Hannah. Và thông báo rằng Hannah thông tin đã thay đổi, nhưng tôi đã không có any-- của tôi Trang đã không hoàn toàn tải lại. Các công cụ ở lại. Hầu hết các công cụ ở lại. AJAX thử nghiệm đã không thay đổi. Các nút riêng của mình, điều này trình đơn thả xuống không thay đổi. Nhưng thông tin có đã thay đổi. Và tùy thuộc vào cách nhanh chóng di chuyển máy tính của tôi, bạn thực sự có thể thấy rằng nội dung biến mất và sau đó lại xuất hiện thực sự cách nhanh chóng. Đó là nội dung được xóa từ infodiv, và sau đó thay thế bằng một yêu cầu không đồng bộ mới. 

Vì vậy, nếu tôi chuyển đổi nó để được nói, Rob-- và một lần nữa, có một cái nhìn, và có lẽ chúng ta sẽ thấy nó thực sự biến mất và xuất hiện trở lại một cách nhanh chóng. Bạn thấy điều đó? Làm thế nào nó chỉ xuất hiện đi, và sau đó nó nạp lại? Đó là yêu cầu AJAX loại diễn ra. Và do đó, tùy thuộc vào người mà tôi chọn lựa thì tôi làm cho một không đồng bộ khác nhau yêu cầu đến một tập tin khác nhau mà tôi có trên máy chủ của tôi. Và nội dung của tôi infodiv được cập nhật, trên cơ sở đó những điều đó tôi đã chọn. Vì vậy, đó là thực sự tất cả để có AJAX. Nó cho phép chúng ta thực hiện những bất đồng bộ yêu cầu, cập nhật vào một trang. Mà không cần phải làm mới toàn bộ trang, chúng tôi đang đi để có được mới nội dung từ nó bằng cách làm một yêu cầu tươi mới cho các máy chủ. Và như vậy, chúng tôi có thể trở thành trang khá năng động hơn. 

Và khi chúng tôi nhận được nhiều hơn và nhiều hơn nữa nâng cao, bạn có thể có được những thứ như nói, hộp thư đến email của bạn, nơi mà bạn không phải làm gì cả. Bạn không cần phải bấm vào một trình đơn thả xuống hoặc bấm vào bất cứ điều gì, và tất cả của một đột ngột, mới nhất của bạn email xuất hiện ở đầu trang. Đó cũng chỉ là một yêu cầu Ajax. Ajax được yêu cầu của bạn máy chủ, máy chủ email, để gửi qua tất cả các thông tin về email mới nhất của bạn, và thay đổi những gì bạn thấy trên màn hình để được tập mới nhất của các email của bạn. Và nếu bạn có một cái mới trong ở đó, sau đó nội dung của div đó sẽ thay đổi để phản ánh các nội dung được cập nhật. Tôi Doug Lloyd. Đây là CS50.