Nếu bạn chưa từng làm việc với mã máy chủ trước đây, một số khái niệm có vẻ khó hiểu. chính xác thì máy khách và máy chủ là gì?
Hiểu những khái niệm này là rất quan trọng để hiểu mã mà bạn sắp bắt đầu viết. Vì vậy, trước khi đi sâu vào code, hãy dành thời gian tìm hiểu về các khái niệm này
Ứng dụng khách là bất cứ thứ gì bạn đang sử dụng để tương tác với internet. Đó là trình duyệt web bạn đang sử dụng để đọc trang này. Trình duyệt web trên máy tính của bạn là một ứng dụng khách, trình duyệt web trên điện thoại của bạn là một ứng dụng khách khác. Có nhiều loại ứng dụng khách khác [như ứng dụng Netflix trên điện thoại hoặc ứng dụng Spotify trên máy tính của bạn], nhưng hiện tại chúng tôi sẽ tập trung vào các trình duyệt web
Một thuộc tính quan trọng của ứng dụng khách là chúng chạy cục bộ trên máy tính của bạn [hoặc điện thoại hoặc bảng điều khiển trò chơi]. Khi bạn nghe thuật ngữ “phía máy khách” hoặc điều gì đó xảy ra “trong máy khách”, điều đó có nghĩa là điều đó xảy ra trên máy tính của bạn. Sự khác biệt này sẽ trở nên quan trọng khi bạn tìm hiểu về máy chủ
HTML
Một công việc chính của khách hàng là phân tích nội dung HTML và hiển thị nó cho người dùng
Ví dụ: giả sử bạn có HTML này
My First Webpage
Happy Coding
Hello world!
Một ứng dụng khách [còn gọi là trình duyệt web] phân tích nội dung này thành một trang web được định dạng đẹp mắt
Bạn có thể thử điều này bằng cách lưu HTML này vào tệp
Happy Coding
Happy coding!
Bạn sẽ tìm hiểu cách ứng dụng khách nhận được nội dung HTML trong một giây, nhưng bây giờ bạn có thể coi ứng dụng khách là trình kết xuất HTML. Đó chính xác là trình duyệt web là gì
JavaScript
Trình duyệt web [còn gọi là máy khách] cũng có thể chạy mã JavaScript. Đây là mã phía máy khách chạy trên máy tính của bạn
[Cũng có thể chạy JavaScript trên máy chủ, nhưng điều đó hơi nằm ngoài phạm vi của hướng dẫn này. ]
Ví dụ: giả sử bạn có HTML này, bao gồm một số mã JavaScript
Happy Coding
Happy coding!
Hãy thử lưu tệp này vào tệp
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Mã JavaScript này chạy trên máy khách, trong trình duyệt web của bạn. Đây là một ví dụ giả tạo, nhưng mã JavaScript là thứ làm cho các trang web tương tác. Các hành động như hoạt ảnh và phản ứng với các hành động của người dùng như nhấp vào nút thường được thực hiện bằng cách chạy mã JavaScript
Bây giờ bạn biết rằng ứng dụng khách là một trình duyệt web hiển thị HTML và chạy JavaScript cục bộ. HTML và JavaScript đó đến từ đâu?
Nội dung này thường đến từ một URL như
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Máy chủ là một máy tính đáp ứng các yêu cầu bằng cách phục vụ các phản hồi
Làm cách nào để máy chủ phản hồi yêu cầu về một URL?
Ở cấp độ cao, có hai loại nội dung
- Nội dung tĩnh không thay đổi nhiều. Các hướng dẫn tại HappyCoding. io là một ví dụ về loại nội dung này. Khi bạn xem chúng, bạn sẽ thấy điều giống như mọi người khác và chúng không thay đổi nhiều theo thời gian. Các loại tệp khác như hình ảnh cũng thường ở dạng tĩnh
- Nội dung động thay đổi theo thời gian hoặc dựa trên người đang xem trang. Ví dụ: nội dung của stackoverflow. com thay đổi mỗi khi ai đó đăng câu hỏi. Nguồn cấp dữ liệu Twitter của bạn là duy nhất dành cho bạn, dựa trên những người bạn theo dõi và những gì họ đã đăng
Tệp tĩnh
Các trang web đơn giản chứa nội dung tĩnh không thay đổi dựa trên người đang đọc nó thường được lưu trữ trong các tệp, giống như các tệp trên máy tính của bạn
Ví dụ: tôi có một trang web tĩnh nhỏ tại KevinWorkman. com/chỉ mục. html. Hãy xem qua quá trình truy cập trang web này
- Bạn gõ
6 vào thanh địa chỉ của trình duyệt web và nhấn enterHappy CodingHappy coding!
- Trình duyệt web của bạn gửi yêu cầu cho URL này
- Yêu cầu đó đến máy chủ của tôi. [Tôi sử dụng Trang GitHub làm máy chủ, vì vậy yêu cầu thực sự được chuyển đến máy chủ Trang GitHub. ]
- Máy chủ đó tìm kiếm một tệp có tên
7. [Bạn có thể xem trực tiếp file này tại đây. ]Happy CodingHappy coding!
- Máy chủ gửi lại phản hồi chứa nội dung của tệp. [Trong trường hợp này, nội dung là HTML. ]
- Máy khách [trình duyệt web của bạn] nhận được phản hồi đó và hiển thị HTML
- Bạn thấy trang web được định dạng độc đáo
Đường dẫn
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Nội dung động
Các tệp tĩnh hoạt động đối với nội dung không thay đổi thường xuyên, nhưng còn các trang web nâng cao hơn thay đổi theo thời gian hoặc các trang web hiển thị nội dung do người dùng khác đăng thì sao? . com là một tệp tĩnh duy nhất, vì nội dung của trang khác nhau tùy thuộc vào người bạn theo dõi và những gì họ đã đăng
Loại trang web này yêu cầu mã phía máy chủ xử lý yêu cầu và xây dựng phản hồi động dựa trên người đưa ra yêu cầu và dữ liệu nào được lưu trữ. Hãy xem qua quá trình truy cập Twitter
- Bạn gõ
11 vào thanh địa chỉ của trình duyệt web và nhấn enterHappy CodingHappy coding!
- Trình duyệt web gửi yêu cầu cho URL này
- Yêu cầu đến máy chủ của Twitter
- Máy chủ đó chạy mã xem xét yêu cầu, tìm ra người gửi yêu cầu đó, tìm nạp danh sách những người bạn theo dõi và danh sách các tweet của họ. Máy chủ định dạng các tweet này thành HTML
- Máy chủ gửi lại phản hồi có chứa HTML đó
- Máy khách [trình duyệt web của bạn] nhận được phản hồi đó và hiển thị HTML
- Ghi chú. Từ quan điểm của khách hàng, nó không quan tâm liệu HTML này đến từ một tệp tĩnh hay từ một máy chủ động. Dù bằng cách nào, đó chỉ là HTML HTML cho trình duyệt web
- Bạn thấy trang tweet được định dạng độc đáo
Ví dụ trên mô tả cách máy chủ định dạng danh sách các tweet thành HTML. Việc triển khai toàn bộ chương trình phụ trợ của Twitter có thể nằm ngoài phạm vi của hướng dẫn này, vì vậy hãy bắt đầu với một ví dụ nhỏ hơn
Giả sử bạn muốn xây dựng một trang web hiển thị thời gian Unix hiện tại [số giây kể từ nửa đêm ngày 1 tháng 1 năm 1970]. Khi khách hàng yêu cầu URL của trang, bạn có thể sử dụng hàm
Happy Coding
Happy coding!
Thuật ngữ “kết xuất phía máy chủ” hơi gây hiểu nhầm, vì nó thực sự có nghĩa là HTML được tạo trên máy chủ. Nó vẫn được trình duyệt trên máy khách hiển thị
Đây là những gì có thể trông giống như
Happy Coding
Happy coding!
Bạn sẽ tìm hiểu thêm về cách hoạt động chính xác của mã này trong các hướng dẫn khác, nhưng hiện tại, điều quan trọng cần hiểu là khi khách hàng yêu cầu URL
Happy Coding
Happy coding!
Chú thích
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Ghi chú. Ví dụ trên nhằm minh họa cách bạn có thể xuất HTML từ máy chủ, nhưng có lẽ bạn không muốn xuất HTML như thế này. Hãy xem hướng dẫn JSP để có cách tiếp cận thực tế hơn
Kết xuất phía máy chủ cho phép bạn tạo các trang web động nhưng cũng yêu cầu bạn xuất toàn bộ trang cùng một lúc. Đối với một ví dụ nhỏ, đây có thể không phải là vấn đề lớn, nhưng hãy nghĩ về một trang phức tạp hơn như Twitter. điều gì sẽ xảy ra nếu bạn muốn tải thêm tweet khi người dùng cuộn xuống cuối nguồn cấp dữ liệu của họ?
Nếu bạn dựa vào kết xuất phía máy chủ, bạn sẽ phải đưa rất nhiều tweet vào HTML mà máy chủ của bạn gửi lại cho máy khách. Điều này có thể làm cho trang của bạn chậm hơn và hầu hết người dùng thậm chí có thể sẽ không nhìn thấy hầu hết các tweet
Đây là lúc công nghệ có tên AJAX phát huy tác dụng. AJAX là một cách nói hoa mỹ rằng bạn có thể sử dụng JavaScript để yêu cầu nội dung từ máy chủ. Với AJAX, luồng yêu cầu trông như thế này
- Người dùng nhập URL vào thanh địa chỉ của trình duyệt web của họ
- Trình duyệt web gửi yêu cầu đến máy chủ
- Máy chủ phản hồi với một số nội dung ban đầu. Nội dung này thường chủ yếu là tĩnh, chẳng hạn như thanh điều hướng ở trên cùng. Nó cũng bao gồm một số mã JavaScript chịu trách nhiệm xây dựng các phần động của trang
- Mã JavaScript đó đưa ra một yêu cầu khác để có thêm nội dung
- Yêu cầu đó đi đến máy chủ chính xác như bất kỳ yêu cầu nào khác. Máy chủ phản hồi với nội dung được yêu cầu. Đây thường là nội dung động và có thể có nhiều định dạng khác nhau. HTML, XML, JSON, văn bản thuần túy, v.v.
- Phản hồi đó quay trở lại mã JavaScript và mã JavaScript phân tích cú pháp nội dung để xây dựng phần còn lại của giao diện người dùng bằng các hàm JavaScript
- Người dùng nhìn thấy nội dung ban đầu trước tiên, có thể là thanh tải trong khi nội dung động được yêu cầu và sau đó nội dung động được điền
Hãy xem lại ví dụ về thời gian Unix của chúng ta, lần này sử dụng phương pháp kết xuất phía máy khách
Điểm cuối máy chủ
Đầu tiên, tạo một điểm cuối [là một từ ưa thích cho một URL phản hồi với dữ liệu] trên máy chủ của bạn. Trong ví dụ này, điểm cuối cần trả về thời gian Unix hiện tại
Happy Coding
Happy coding!
Đây gần như chính xác là mã bạn đã thấy ở trên với kết xuất phía máy chủ. Sự khác biệt duy nhất là thay vì xuất nội dung HTML, mã này phản hồi bằng một giá trị duy nhất. thời gian Unix hiện tại
Nhưng lưu ý rằng đây vẫn là một URL thông thường. Bạn thậm chí có thể truy cập nó trong trình duyệt web, giống hệt như bất kỳ URL nào khác
Đây không phải là một trang web thú vị lắm, nhưng đó là vì nó không dành cho con người xem. Nó tồn tại để JavaScript có thể yêu cầu nó và sau đó sử dụng phản hồi để xây dựng HTML của trang
Ví dụ này hơi giả tạo và nhiều điểm cuối “thực” sẽ trả về dữ liệu phức tạp hơn như JSON. Bạn không phải lo lắng về điều đó ngay bây giờ, nhưng nếu bạn tò mò muốn xem một ví dụ thực tế hơn, hãy xem https. // mã hóa hạnh phúc. io/api/trang web. json, một điểm cuối được sử dụng bởi https. // mã hóa hạnh phúc. io/about/stats để xây dựng giao diện người dùng phức tạp hơn bằng cách sử dụng mã JavaScript
Tìm về
Bây giờ bạn đã biết cách tạo điểm cuối phía máy chủ để xử lý yêu cầu về URL, chạy một số mã Java và trả về một số dữ liệu trong phản hồi
Nửa còn lại là mã JavaScript yêu cầu dữ liệu từ máy chủ và sử dụng nó để xây dựng HTML của trang
khách hàng. html
Happy Coding
Happy coding!
Tệp này chứa HTML và JavaScript tĩnh. Khi người dùng điều hướng đến URL
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Hàm
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Một lần nữa, đây là một ví dụ giả tạo, nhưng hãy tưởng tượng làm điều này với dữ liệu phức tạp hơn, chẳng hạn như danh sách các tweet. Đây cũng là cách các tính năng như cuộn vô hạn hoạt động. [Ngoài việc yêu cầu dữ liệu khi tải trang, bạn có thể yêu cầu thêm dữ liệu khi người dùng nhấp vào nút hoặc cuộn qua một điểm nhất định. ]
Cho đến nay, mọi ví dụ đều liên quan đến việc máy khách yêu cầu nội dung từ máy chủ và máy chủ phản hồi với nội dung được yêu cầu
Nhưng khách hàng cũng có thể gửi dữ liệu đến máy chủ. Có một số cách để thực hiện việc này, tùy thuộc vào loại dữ liệu bạn muốn gửi
Tham số truy vấn
Tham số truy vấn là thuộc tính
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Happy Coding
Happy coding!
URL này trỏ đến
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Bạn có thể chuyển thành nhiều cặp
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Happy Coding
Happy coding!
URL này lại trỏ đến
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Đây là một ví dụ về giao diện của phía máy chủ
Happy Coding
Happy coding!
Mã máy chủ này xử lý các yêu cầu tới URL
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Đường dẫn URL
Tham số truy vấn không được coi là một phần của URL. họ đến sau URL. Nhưng cũng có thể truyền dữ liệu trong chính URL
Đầu tiên, bạn tạo một trình xử lý trên máy chủ cho bất kỳ URL nào bắt đầu bằng một đường dẫn nhất định. Ví dụ: bạn có thể tạo trình xử lý cho bất kỳ URL nào bắt đầu bằng
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Mã này sử dụng URL ký tự đại diện để khớp với bất kỳ URL nào bắt đầu bằng
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Happy Coding
Happy coding!
POST yêu cầu
Bạn có thể sử dụng các tham số truy vấn hoặc đường dẫn URL để chuyển các chuỗi nhỏ đến máy chủ của mình, nhưng có một số cân nhắc quan trọng với các phương pháp này
- Các URL hiển thị trong lịch sử của bạn và trong nhật ký máy chủ. Đó có thể không phải là vấn đề lớn đối với các URL như
28 hoặcHappy CodingHappy coding!
95, nhưng đây không phải là cách hay để truyền dữ liệu như mật khẩu hoặc thông tin thẻ tín dụngHappy CodingHappy coding!
- Có giới hạn về độ dài của một URL. Giới hạn chính xác tùy thuộc vào trình duyệt bạn đang sử dụng, nhưng thường là khoảng 2000 ký tự. Điều này có vẻ như là đủ cho các tham số đơn lẻ, nhưng nếu bạn muốn cho phép người dùng viết các bài đăng trên blog thì sao?
- URL là một chuỗi ký tự. Điều gì sẽ xảy ra nếu bạn muốn gửi dữ liệu nhị phân đến máy chủ, chẳng hạn như tải lên tệp hình ảnh?
Bạn có thể sử dụng yêu cầu
Happy Coding
Happy coding!
Tất cả các yêu cầu bạn đã thấy cho đến nay là ________ 297 yêu cầu. một khách hàng đang yêu cầu lấy nội dung từ một máy chủ. Khi bạn truy cập
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Để so sánh, yêu cầu
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Đây là một tệp HTML ví dụ có chứa một biểu mẫu
Happy Coding
Happy coding!
Lưu ý các thuộc tính
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Phía máy chủ sẽ trông như thế này
Happy Coding
Happy coding!
Điều đặc biệt duy nhất về mã này là nó sử dụng hàm
Happy Coding
Happy coding!
Happy Coding
Happy coding!
Trong khi phát triển cục bộ, nhìn chung bạn sẽ triển khai tới một máy chủ cục bộ, điều đó có nghĩa là bạn sẽ chạy cả máy chủ và máy khách trên máy tính của mình. Sau khi bạn đã sẵn sàng xuất bản mã của mình, bạn sẽ triển khai tới một máy chủ từ xa để những người khác có thể tương tác với mã đó
Tôi đang đề cập đến điều này bây giờ bởi vì một cách phổ biến để nói về mã là nó chạy “trên máy chủ” hay “trên máy khách”. Sự khác biệt này rõ ràng hơn khi nói về một máy chủ từ xa, bởi vì trong trường hợp đó, máy khách và máy chủ là hai máy tính khác nhau. Khi bạn đang triển khai cục bộ, máy chủ và máy khách sẽ là cùng một máy tính, nhưng bạn vẫn nên suy nghĩ về phía máy chủ và phía máy khách
Nếu nó hữu ích, hãy thử tưởng tượng máy chủ là một máy tính hoàn toàn riêng biệt, ngay cả khi bạn đang triển khai cục bộ
Hướng dẫn này nhằm mục đích giới thiệu giao tiếp máy khách/máy chủ, đặc biệt trong ngữ cảnh yêu cầu web
Một dự án thực sự thường sẽ sử dụng kết hợp tất cả những điều trên, thay vì chỉ sử dụng một cách tiếp cận duy nhất cho mọi thứ
Ví dụ: một trang web có thể sử dụng kết xuất phía máy chủ để tạo nội dung ban đầu, chẳng hạn như thanh điều hướng. Sau đó, nó có thể sử dụng kết xuất phía máy khách để tải nội dung động như các bản cập nhật gần đây của người dùng và nó có thể hiển thị một biểu mẫu đưa ra yêu cầu
Happy Coding
Happy coding!
Không có cách tiếp cận đúng duy nhất và cách tiếp cận bạn chọn thường liên quan đến việc xem xét các sự đánh đổi khác nhau. mất bao lâu để tải trang của bạn, cho dù bạn muốn logic của mình xảy ra trên máy chủ hay máy khách và độ phức tạp của mã
Lời khuyên tốt nhất mà tôi có thể đưa ra là hãy làm theo bất cứ điều gì có ý nghĩa nhất đối với bạn và cố gắng đừng suy nghĩ quá nhiều về nó. Chúc may mắn