Hướng dẫn dùng ajax 1999 trong PHP

Vietnamese [Tiếng Việt] translation by Dai Phong [you can also view the original English article]

Nếu đã theo dõi ba bài hướng dẫn trước, thì bạn chắc đã hiểu rõ về AJAX. Trong bài cuối cùng này, chúng ta sẽ tổng hợp mọi thứ bằng cách làm việc với một ví dụ phức tạp hơn.

Mã HTML

Để có được một ý tưởng về cấu trúc của ví dụ này, hãy xem các mã đánh dấu sau đây:

Mã đánh dấu cho phần tử main được hiển thị dưới đây:

      
        
Popular front-end frameworks
        
Click each one to load details via AJAX.
        

          Bootstrap
          Foundation
          UIkit
          Semantic UI
          Skeleton
          Material Design Lite
        
      

Lưu ý các liên kết. Những liên kết này tương ứng với các framework khác nhau cho front-end. Như chúng ta sẽ thấy trong phần tiếp theo, mỗi khi chúng ta nhấn vào các liên kết, một yêu cầu AJAX sẽ được thực hiện. Sau đó, phần tử với lớp modal sẽ xuất hiện và nội dung của nó sẽ được cập nhật bằng các dữ liệu lấy được từ dữ liệu trả về.

Dưới đây là minh hoạ cho phần tử main:

' + data[i].url + '']; break; } else { $list.hide[]; $message.show[].text['No data received for this framework!']; } } } else { $list.hide[]; $message.text['No data received from your respose!']; } }

Mặc dù chúng ta đã cập nhật nội dung của modal của chúng ta, thì nó vẫn bị ẩn. Nó hiển thị và loader biến mất khi yêu cầu thành công. Sau đó, hàm callback alwaysFunction được thực hiện:

      function alwaysFunction[] {
          $loader.hide[];
          $modal.addClass['active'];
      }

Lớp active trông giống như thế này:

      .active {
        opacity: 1;
        z-index: 10;
        transform: scale[1];  
      } 

Dưới đây bạn có thể thấy diện mạo mong muốn của modal nếu chúng ta nhấn vào liên kết có chữ Bootstrap:

Một vài tình huống

Điều quan trọng cần phải hiểu là các đoạn mã được thực thi trong những trường hợp nhất định. Hãy bao quát hai trường hợp phổ biến:

• Giá trị của thuộc tính name không phù hợp với các liên kết của phần tử main. Ví dụ, giả sử chúng ta xác định một URL nơi mà giá trị của thuộc tính name của các đối tượng có liên quan đến đến framework Foundation là Foundation2 thay vì Foundation. Trong trường hợp này, nếu chúng ta nhấn vào liên có chữ Foundation, modal dưới đây sẽ xuất hiện:

• Dữ liệu trả về là rỗng. Ví dụ, chúng ta định nghĩa một URL trỏ đến một mảng rỗng. Trong trường hợp này, modal sẽ trông như thế này:

Xử lý các lỗi

Vì vậy, chúng ta xem xét đoạn mã được chạy khi yêu cầu thành công. Nhưng điều gì sẽ xảy ra nếu yêu cầu thất bại? Trong trường hợp của chúng ta, một yêu cầu không thành công, chúng ta ẩn danh sách và hiển thị một tin nhắn tùy biến.

Đây là đoạn mã của hàm failFunction[] minh hoạ hành vi đó:

       function failFunction[request, textStatus, errorThrown] {
         $list.hide[];
         $message.text['An error occurred during your request: ' + request.status + ' ' + textStatus + ' ' + errorThrown];
      }

Để tự làm quen với đoạn mã này, chúng ta chỉ định một URL không tồn tại. Do đó, phương thức fail sẽ được kích hoạt và modal bên dưới sẽ được hiển thị:

Lưu ý: Một lần nữa, thông báo lỗi có thể khác nhau nếu bạn chạy ví dụ này tại cục bộ.

Đây là bản demo nhúng từ Codepen:

Kết luận

Trong hướng dẫn này, chúng ta tổng hợp bài nghiên cứu về AJAX từ góc nhìn của một nhà thiết kế - mà bạn đã theo dõi! Tôi hy vọng rằng bạn thấy loạt bài này hữu ích và bạn đã học được một số kỹ năng mới.

Bước tiếp theo, tôi khuyên bạn bạn xem xét những điều sau đây:

• Làm quen với các phương thức rút gọn của AJAX trong jQuery mà chúng ta chưa tìm hiểu [ví dụ phương thức $.getSON].
• Cài đặt các yêu cầu AJAX của bạn bằng cách truy xuất các tập tin tĩnh hoặc dữ liệu động đến từ các dịch vụ bên thứ ba [ví dụ Flickr].