Cách nhận giá trị từ phản hồi ajax trong 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 Show 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
Để 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ư thế này
Lưu ý rằng không có dấu ngoặc đơn hoặc tham số sau tên hàm, bởi 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ố của 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"name=value&anothername="+encodeURIComponent(myVar)+"&so=on" hoặ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
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
Chứ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 đó
Danh 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
Sau 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ỉ có hiệu lực 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ệHã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, "name=value&anothername="+encodeURIComponent(myVar)+"&so=on"6, chứa văn bản "Tôi là một bài kiểm tra. " Sau đó, chúng tôi sẽ "name=value&anothername="+encodeURIComponent(myVar)+"&so=on"7 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
trong 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 đề 4, IE sẽ đưa ra lỗi "Đối tượng 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 đề 5, trình duyệt sẽ lưu phản hồi vào bộ đệm ẩn 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 tài liệu tham khảo)Ghi chú. Nếu biến 6 được sử dụng trên toàn cầu, các hàm cạnh tranh gọi ____17_______8 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ộ 6 cho một bao đóng 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 0 của mình trong một câu lệnh 1 0Trong 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 2 của đối tượng yêu cầu, thuộc tính này chứa nội dung của tệp "name=value&anothername="+encodeURIComponent(myVar)+"&so=on"6. Bây giờ, hãy thử thuộc tính 4Trướ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 ( 5) có nội dung sau 1Tiếp theo, trong "name=value&anothername="+encodeURIComponent(myVar)+"&so=on"8, chúng ta cần thay thế "name=value&anothername="+encodeURIComponent(myVar)+"&so=on"6 bằng tệp XML mà chúng ta vừa tạo 2Sau đó, trong 0, chúng ta cần thay thế dòng 9 bằng 3Đoạn mã này lấy đối tượng "name=value&anothername="+encodeURIComponent(myVar)+"&so=on"3 được cung cấp bởi 4 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 XMLCuố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, 2, 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 tôi sẽ 3Trướ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ó đến hàm "name=value&anothername="+encodeURIComponent(myVar)+"&so=on"8 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 "name=value&anothername="+encodeURIComponent(myVar)+"&so=on"8 để 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ừ 6 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 8 6Hàm 0 có thể được viết giống như ở Bước 3 để cảnh báo chuỗi đã tính của chúng ta, 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 phạm vi 0, chúng tôi không thể chỉ thông báo cho 2, chúng tôi phải phân tích cú pháp và thông báo cho 2, thuộc tính mà chúng tôi muốn 8Tệp 2 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) Mộ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 4 các mục thành một mảng ở mỗi ký tự dòng mới ( 5 - 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 sau mỗi 5 giây, sử dụng lệnh gọi 6. Ý 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 để lấy dữ liệu từ phản hồi ajax?Bạn không thể vì nó không đồng bộ. Nếu bạn muốn làm bất cứ điều gì với nó, bạn cần thực hiện điều đó trong một cuộc gọi lại . Làm sao? .
Làm cách nào để lấy dữ liệu từ ajax trong JavaScript?Ví dụ sau đây cho thấy cách gửi một yêu cầu Ajax đơn giản. . Thí dụ. Yêu cầu jQuery Ajax. $. ajax('/jquery/getdata', // url yêu cầu { thành công. function (data, status, xhr) { // hàm gọi lại thành công $('p'). nối thêm (dữ liệu); . Thí dụ. Nhận dữ liệu JSON. . Thí dụ. phương thức ajax(). . Thí dụ. Gửi yêu cầu POST Làm cách nào để đọc phản hồi JSON ajax trong JavaScript?Cách tiếp cận. Để giải quyết vấn đề này, trước tiên chúng ta sẽ xem xét tệp JSON có tên “viết hoa. json” và thử lấy dữ liệu JSON này dưới dạng phản hồi bằng AJAX . Sau đó, chúng ta sẽ tạo một tệp HTML “capitals. html” chứa một bảng mà chúng tôi sẽ sử dụng để điền dữ liệu mà chúng tôi đang nhận được phản hồi.
Làm cách nào để nhận giá trị từ phản hồi ajax trong HTML?ajax({ url. 'kiểm tra. html', kiểu dữ liệu. 'html', thành công. chức năng (phản hồi) { $('#testDiv'). html(phản hồi); . The code above will take all of the code you retrieved with your AJAX query and will output it into the testDiv. |