Làm cách nào để mở tệp HTML trong AJAX?
jquery (@ http. // jquery. com) là một Thư viện JavaScript. Đó là một tập lệnh nhỏ (khoảng 96kB được rút gọn) được viết bằng JavaScript có tên là " 6", giúp đơn giản hóa rất nhiều việc lập trình JavaScript bằng cách cung cấp hỗ trợ nhiều trình duyệt để lựa chọn và thao tác phần tử DOM, xử lý sự kiện, xử lý yêu cầu/phản hồi Ajax và hoạt ảnh Show
jQuery rất phổ biến. Vào tháng 5 năm 2015, JQuery được sử dụng bởi 64. 2% của tất cả các trang web. Trong số các thư viện/khung JavaScript, thị phần của jQuery là 95. 2% (Tham khảo. http. // w3tech. com/công nghệ/tổng quan/javascript_library/tất cả). Nói cách khác, hầu hết các nhà phát triển ngày nay lập trình bằng jQuery, thay vì JavaScript thô jQuery so với. JavaScript thô
Với jQuery, bạn có thể viết một vài dòng mã để thay thế một phần mười mã JavaScript; . Hỗ trợ nhiều trình duyệt đặc biệt quan trọng đối với sản xuất, vì bạn không thể kiểm tra mã JavaScript của mình trên tất cả các trình duyệt. jQuery đã được thử nghiệm tốt. Được biết, jQuery được sử dụng bởi hơn 60% các trang web sản xuất trên Internet Tôi giả định rằng bạn đã quen thuộc với HTML5, CSS3 và JavaScript, đây là những điều kiện tiên quyết cần thiết để sử dụng jQuery. Hãy nhớ rằng jQuery được viết bằng JavaScript Bài viết này hướng dẫn bạn những kiến thức cơ bản về AJAX và cung cấp cho bạn một số ví dụ thực hành đơn giản để bạn bắt đầu AJAX là gì?AJAX là viết tắt của JavaScript và XML không đồng bộ. Tóm lại, đó là việc sử dụng đối tượng 2 để giao tiếp với các máy chủ. Nó có thể gửi và nhận thông tin ở nhiều định dạng khác nhau, bao gồm tệp JSON, XML, HTML và văn bản. Đặc điểm hấp dẫn nhất của AJAX là tính chất "không đồng bộ" của nó, có nghĩa là nó có thể giao tiếp với máy chủ, trao đổi dữ liệu và cập nhật trang mà không cần phải làm mới trangHai tính năng chính của AJAX cho phép bạn thực hiện những việc sau
Bước 1 – Cách tạo một yêu cầu HTTPĐể thực hiện một yêu cầu HTTP tới máy chủ bằng JavaScript, bạn cần một phiên bản của một đối tượng có chức năng cần thiết. Đây là nơi mà 2 xuất hiện
Sau khi thực hiện yêu cầu, bạn sẽ nhận được phản hồi. Ở giai đoạn này, bạn cần báo cho đối tượng 2 hàm JavaScript nào sẽ xử lý phản hồi, bằng cách đặt thuộc tính 5 của đối tượng thành hàm được gọi khi yêu cầu thay đổi trạng thái, như sau
Lưu ý rằng không có dấu ngoặc đơn hoặc tham số sau tên hàm, vì bạn đang gán tham chiếu cho hàm chứ không thực sự gọi nó. Ngoài ra, thay vì đặt tên hàm, bạn có thể sử dụng kỹ thuật JavaScript để xác định hàm một cách nhanh chóng (được gọi là "hàm ẩn danh") để xác định các hành động sẽ xử lý phản hồi, như sau
Tiếp theo, sau khi khai báo điều gì sẽ xảy ra khi bạn nhận được phản hồi, bạn cần thực sự thực hiện yêu cầu, bằng cách gọi các phương thức 6 và 7 của đối tượng yêu cầu HTTP, như thế này
Tham số cho phương thức 7 có thể là bất kỳ dữ liệu nào bạn muốn gửi đến máy chủ nếu 4 gửi yêu cầu. Dữ liệu biểu mẫu phải được gửi ở định dạng mà máy chủ có thể phân tích cú pháp, chẳng hạn như chuỗi truy vấn 7hoặc các định dạng khác, như 5, JSON, XML, v.v.Lưu ý rằng nếu bạn muốn 4 dữ liệu, bạn có thể phải đặt loại MIME của yêu cầu. Ví dụ: sử dụng thông tin sau trước khi gọi 7 cho dữ liệu biểu mẫu được gửi dưới dạng chuỗi truy vấn 1Bước 2 – Xử lý phản hồi của máy chủKhi gửi yêu cầu, bạn đã cung cấp tên của hàm JavaScript để xử lý phản hồi 2Chức năng này nên làm gì? . Nếu trạng thái có giá trị là 8 (tương ứng với 4), điều đó có nghĩa là đã nhận được toàn bộ phản hồi của máy chủ và bạn có thể tiếp tục xử lý phản hồi đó 4Danh sách đầy đủ các giá trị 9 được ghi lại tại XMLHTTPRequest. readyState và như sau
Tiếp theo, hãy kiểm tra mã trạng thái phản hồi HTTP của phản hồi HTTP. Các mã có thể được liệt kê tại W3C. Trong ví dụ sau, chúng tôi phân biệt giữa lệnh gọi AJAX thành công và không thành công bằng cách kiểm tra mã phản hồi 70 7Sau khi kiểm tra trạng thái của yêu cầu và mã trạng thái HTTP của phản hồi, bạn có thể làm bất cứ điều gì bạn muốn với dữ liệu mà máy chủ đã gửi. Bạn có hai tùy chọn để truy cập dữ liệu đó
Lưu ý rằng các bước trên chỉ hợp lệ nếu bạn đã sử dụng yêu cầu không đồng bộ (tham số thứ ba của 6 không được chỉ định hoặc được đặt thành 2). Nếu bạn đã sử dụng một yêu cầu đồng bộ, bạn không cần chỉ định một chức năng, nhưng điều này rất không được khuyến khích vì nó tạo ra trải nghiệm người dùng tồi tệBước 3 – Một ví dụ đơn giảnHãy kết hợp tất cả lại với một yêu cầu HTTP đơn giản. JavaScript của chúng tôi sẽ yêu cầu một tài liệu HTML, 76, chứa văn bản "Tôi là một bài kiểm tra. " Sau đó, chúng tôi sẽ 77 nội dung của phản hồi. Lưu ý rằng ví dụ này sử dụng vanilla JavaScript — không liên quan đến jQuery. Ngoài ra, các tệp HTML, XML và PHP phải được đặt trong cùng một thư mục 5trong ví dụ này
Ghi chú. Nếu bạn đang gửi yêu cầu tới một đoạn mã sẽ trả về XML, thay vì tệp HTML tĩnh, bạn phải đặt tiêu đề phản hồi để hoạt động trong Internet Explorer. Nếu bạn không đặt tiêu đề 14, IE sẽ đưa ra lỗi "Đối tượng được mong đợi" của JavaScript sau dòng mà bạn đã cố truy cập một phần tử XMLGhi chú. Nếu bạn không đặt tiêu đề 15, trình duyệt sẽ lưu phản hồi vào bộ đệm và không bao giờ gửi lại yêu cầu, khiến việc gỡ lỗi trở nên khó khăn. Bạn cũng có thể thêm tham số GET luôn khác, chẳng hạn như dấu thời gian hoặc số ngẫu nhiên (xem bỏ qua bộ đệm)Ghi chú. Nếu biến 16 được sử dụng trên toàn cầu, các hàm cạnh tranh gọi ____178 có thể ghi đè lên nhau, gây ra tình trạng cạnh tranh. Việc khai báo biến cục bộ 16 thành một bao đóng có chứa các hàm AJAX sẽ tránh được điều nàyTrong trường hợp xảy ra lỗi giao tiếp (chẳng hạn như máy chủ gặp sự cố), một ngoại lệ sẽ được đưa ra trong phương thức 5 khi truy cập trạng thái phản hồi. Để giảm thiểu vấn đề này, bạn có thể gói câu lệnh 20 của mình trong một câu lệnh 21 0Bước 4 – Làm việc với phản hồi XMLTrong ví dụ trước, sau khi nhận được phản hồi cho yêu cầu HTTP, chúng tôi đã sử dụng thuộc tính 22 của đối tượng yêu cầu, thuộc tính này chứa nội dung của tệp 76. Bây giờ hãy thử thuộc tính 24Trước hết, hãy tạo một tài liệu XML hợp lệ mà chúng ta sẽ yêu cầu sau này. Tài liệu ( 25) chứa những điều sau đây 1Tiếp theo, trong 78, chúng ta cần thay thế 76 bằng tệp XML mà chúng ta vừa tạo 2Sau đó, trong 10, chúng ta cần thay thế dòng 29 bằng 3Mã này lấy đối tượng 73 được cung cấp bởi 24 và sử dụng các phương thức DOM để truy cập một số dữ liệu có trong tài liệu XMLBước 5 – Làm việc với dữ liệuCuối cùng, hãy gửi một số dữ liệu đến máy chủ và nhận phản hồi. Lần này, JavaScript của chúng tôi sẽ yêu cầu một trang động, 42, trang này sẽ lấy dữ liệu chúng tôi gửi và trả về một chuỗi "đã tính" - "Xin chào, [dữ liệu người dùng]. " - mà chúng ta sẽ 43Trước tiên, chúng tôi sẽ thêm một hộp văn bản vào HTML của mình để người dùng có thể nhập tên của họ 4Chúng tôi cũng sẽ thêm một dòng vào trình xử lý sự kiện của mình để lấy dữ liệu của người dùng từ hộp văn bản và gửi nó tới hàm 78 cùng với URL của tập lệnh phía máy chủ của chúng tôi 5Chúng tôi cần sửa đổi 78 để chấp nhận dữ liệu người dùng và chuyển dữ liệu đó đến máy chủ. Chúng tôi sẽ thay đổi phương thức yêu cầu từ 46 thành 4 và bao gồm dữ liệu của chúng tôi dưới dạng tham số trong lệnh gọi tới 48 6Hàm 10 có thể được viết giống như trong Bước 3 để cảnh báo chuỗi được tính toán của chúng tôi, nếu đó là tất cả thì máy chủ trả về. Tuy nhiên, giả sử máy chủ sẽ trả về cả chuỗi được tính toán và dữ liệu người dùng ban đầu. Vì vậy, nếu người dùng của chúng tôi nhập "Jane" vào hộp văn bản, phản hồi của máy chủ sẽ như thế này 7Để sử dụng dữ liệu này trong 10, chúng tôi không thể chỉ thông báo cho 22, chúng tôi phải phân tích cú pháp và thông báo cho 72, thuộc tính mà chúng tôi muốn 8Tệp 42 phải chứa các nội dung sau 9Để biết thêm về các phương thức DOM, hãy nhớ xem Mô hình đối tượng tài liệu (DOM) Ví dụ XHR hẹn giờ đơn giảnMột ví dụ đơn giản khác sau đây - ở đây chúng tôi đang tải một tệp văn bản qua XHR, cấu trúc của nó được giả định là như thế này 0Sau khi tệp văn bản được tải, chúng tôi đưa 274 mục vào một mảng ở mỗi ký tự xuống dòng ( 75 — về cơ bản là nơi mỗi ngắt dòng nằm trong tệp văn bản), sau đó in danh sách đầy đủ các dấu thời gian và dấu thời gian cuối cùng lên trangĐiều này được lặp lại cứ sau 5 giây, sử dụng cuộc gọi 76. Ý tưởng là một loại tập lệnh phía máy chủ nào đó sẽ liên tục cập nhật tệp văn bản với dấu thời gian mới và mã XHR của chúng tôi sẽ được sử dụng để báo cáo dấu thời gian mới nhất ở phía máy khách
Làm cách nào để tải tệp HTML trong AJAX?load(URL,data,callback); Tham số URL bắt buộc chỉ định URL bạn muốn tải. Tham số dữ liệu tùy chọn chỉ định một tập hợp các cặp khóa/giá trị chuỗi truy vấn để gửi cùng với yêu cầu. Tham số gọi lại tùy chọn là tên của một hàm sẽ được thực thi sau khi phương thức load() hoàn thành.
Bạn có thể sử dụng AJAX trên tệp HTML không?AJAX là viết tắt của JavaScript và XML không đồng bộ. Tóm lại, đó là việc sử dụng đối tượng XMLHttpRequest để giao tiếp với các máy chủ. Nó có thể gửi và nhận thông tin ở nhiều định dạng khác nhau, bao gồm tệp JSON, XML, HTML và văn bản .
Làm cách nào để gọi HTML trong AJAX?Cách hoạt động của AJAX . Một sự kiện xảy ra trong một trang web (trang được tải, một nút được bấm) Một đối tượng XMLHttpRequest được tạo bởi JavaScript Đối tượng XMLHttpRequest gửi yêu cầu đến máy chủ web Máy chủ xử lý yêu cầu Máy chủ gửi phản hồi trở lại trang web Phản hồi được đọc bởi JavaScript Làm cách nào để liên kết tệp AJAX trong HTML?Thêm vào cuối tệp HTML sau tất cả mã HTML và trước thẻ trong tập lệnh có thuộc tính src . |