Làm cách nào để gửi dữ liệu từ máy chủ sang HTML?
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ì? Show 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ủ HTMLMộ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
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 1 rồi mở tệp đó trong trình duyệt webBạ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ì JavaScriptTrì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
Hãy thử lưu tệp này vào tệp 1 rồi mở tệp đó bằng trình duyệt web của bạn. Bạn sẽ thấy hộp thoại 3 bật lên khi tải tệpMã 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ư 4 hoặc 5. Khi bạn nhập một URL vào thanh địa chỉ của trình duyệt web, trình duyệt web của bạn sẽ gửi yêu cầu tới URL đó và máy chủ sẽ gửi lại phản hồi có chứa nội dung tại URL đó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
Tệp tĩnhCá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
Đường dẫn 8 này thường được sử dụng cho các nội dung tĩnh khác, chẳng hạn như hình ảnh và tệp 9 và 10Nội dung độngCá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
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 12 để tính thời gian Unix hiện tại, bạn có thể định dạng thành HTML và gửi dưới dạng phản hồiThuậ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ư 1Bạ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 13 từ máy chủ của chúng tôi, máy chủ sẽ phản hồi bằng nội dung HTML được tạo bằng mã Java, đúng hơn là . Khách hàng không quan tâm (hoặc thậm chí không biết) HTML được tạo ra như thế nào. Nó hiển thị HTML bất kể nó đến từ đâuChú thích 15 cho máy chủ biết URL nào mã này sẽ xử lý các yêu cầu cho. Ví dụ này sử dụng 13, nhưng bạn có thể chọn bất cứ thứ gì. Các URL như 17 không có phần mở rộng tệp hoặc thậm chí các URL như 18 có ký tự đại diện đều hoạt động tốtGhi 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
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 1Đâ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 2Tệp này chứa HTML và JavaScript tĩnh. Khi người dùng điều hướng đến URL 19, máy khách sẽ gửi yêu cầu và máy chủ sẽ gửi lại nội dung này dưới dạng phản hồi. Sau đó, máy khách sẽ hiển thị trang và gọi hàm 10Hàm 10 sử dụng API tìm nạp để gửi yêu cầu tới URL 17. Giống như ví dụ trên, máy chủ xử lý URL này bằng cách trả về phản hồi chứa thời gian Unix hiện tại. Mã JavaScript sử dụng phản hồi này để xây dựng giao diện người dùng, trong trường hợp này bằng cách hiển thị thời gian Unix hiện tại trên trangMộ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ấnTham số truy vấn là thuộc tính 13 được thêm vào cuối URL sau ký tự dấu chấm hỏi 14. Ví dụ: hãy xem URL này 9URL này trỏ đến 15 và bao gồm tham số 16 có giá trị là 17. Máy chủ YouTube xử lý yêu cầu này có thể sử dụng thông số này để tải đúng video và gửi lại video như một phần của phản hồiBạn có thể chuyển thành nhiều cặp 13, được phân tách bằng ký tự dấu và 19 5URL này lại trỏ đến 15 và bao gồm hai tham số. 16 với giá trị là 17 và 23 với giá trị là 24. Máy chủ YouTube xử lý yêu cầu này sử dụng các tham số này để tải video và bỏ qua tới 42 giâyĐây là một ví dụ về giao diện của phía máy chủ 1Mã máy chủ này xử lý các yêu cầu tới URL 25 và nhận giá trị của tham số 26 mà nó sử dụng để phản hồi với một số nội dung HTML. Ví dụ này xuất ra HTML trực tiếp, nhưng bạn cũng có thể sử dụng các tham số truy vấn với các điểm cuốiĐường dẫn URLTham 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 27, vì vậy, 28, 29 và 90 đều kích hoạt cùng một mã. Sau đó, mã đó có thể phân tích cú pháp URL để tìm ra tên nào đã được chuyển vào. Điều đó sẽ trông như thế này 8Mã 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 27, sau đó sử dụng hàm 92 để lấy tên của URL xuất hiện sau phần 27POST yêu cầuBạ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
Bạn có thể sử dụng yêu cầu 96 để giải quyết những vấn đề nàyTấ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 5 trong trình duyệt của mình, bạn đang thực hiện yêu cầu 97 tới 5. Đó cũng là lý do tại sao tất cả mã máy chủ đã sử dụng chức năng 51 cho đến nayĐể so sánh, yêu cầu 96 xảy ra khi khách hàng yêu cầu gửi (đăng) nội dung đến máy chủ. Một trong những ví dụ phổ biến nhất của việc này là điền vào biểu mẫu. Khi bạn điền vào biểu mẫu và nhấn nút 53, trình duyệt của bạn sẽ gửi yêu cầu 96 tới máy chủ, chứa dữ liệu từ biểu mẫuĐây là một tệp HTML ví dụ có chứa một biểu mẫu 3Lưu ý các thuộc tính 55 và 56 của phần tử 57. Điều này yêu cầu trình duyệt thực hiện yêu cầu 96 tới URL 25 chứa dữ liệu biểu mẫu khi người dùng nhấn nút 53Phía máy chủ sẽ trông như thế này 0Điều đặc biệt duy nhất về mã này là nó sử dụng hàm 11, xử lý các yêu cầu 96. Một dự án thực tế hơn thường sẽ thực hiện một số xử lý dữ liệu, chẳng hạn như lưu trữ dữ liệu trong cơ sở dữ liệu và sau đó chuyển hướng đến một URL khác, nhưng ví dụ này xuất ra HTML dưới dạng phản hồiTrong 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 96 để cho phép người dùng nhập các bản cập nhật mớiKhô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 Làm cách nào để gửi dữ liệu trong HTML?Để đăng dữ liệu biểu mẫu HTML lên máy chủ ở định dạng được mã hóa URL, bạn cần phải thực hiện yêu cầu HTTP POST tới máy chủ và cung cấp dữ liệu biểu mẫu HTML trong phần thân của . Bạn cũng cần chỉ định loại dữ liệu bằng cách sử dụng Content-Type. tiêu đề yêu cầu ứng dụng/x-www-form-urlencoded. . You also need to specify the data type using the Content-Type: application/x-www-form-urlencoded request header.
Làm cách nào để kết nối máy chủ với HTML?Kết nối với Máy chủ HTTP . Chọn Tệp > Thêm kho lưu trữ…. Chọn nút Máy chủ HTTP ở đầu trang tính được hiển thị. . Nhập đường dẫn tương đối của kho lưu trữ vào trường Đường dẫn kho lưu trữ. . Sử dụng trường Biệt danh để chỉ định tên được sử dụng để đại diện cho kho lưu trữ trong danh sách nguồn Làm cách nào để gửi dữ liệu đến máy chủ HTML từ trình duyệt Web?Trình duyệt web cung cấp bốn cơ chế cơ bản có thể được sử dụng để đặt dữ liệu vào yêu cầu HTTP GET hoặc POST mà trình duyệt gửi tới máy chủ. . liên kết. nhấp vào liên kết sẽ kích hoạt yêu cầu GET được thực hiện cho máy chủ các hình thức. gửi biểu mẫu có thể kích hoạt yêu cầu GET hoặc POST được gửi tới máy chủ jav. . bánh quy Làm cách nào để hiển thị dữ liệu biểu mẫu trong HTML?Thuộc tính formtarget chỉ định tên hoặc từ khóa cho biết vị trí hiển thị phản hồi nhận được sau khi gửi biểu mẫu . Thuộc tính formtarget ghi đè thuộc tính target của phần tử |