# 16: Giới thiệu về Ajax - Thủ thuật CSS

Anonim

Ajax xếp hạng khá cao ở đó vì những lý do lớn nhất để sử dụng jQuery. JQuery không chỉ khắc phục các vấn đề về trình duyệt chéo mà còn làm cho cú pháp rất dễ sử dụng và dễ hiểu.

Trong video này, chúng tôi sẽ giải thích Ajax là gì. Chúng tôi xem xét một phần tử biểu mẫu, khi được gửi, yêu cầu GET hoặc POST (như được xác định bởi thuộc tính method) đến URL bạn chỉ định (như được xác định bởi thuộc tính action). Đó chỉ là HTML, không có mã phụ trợ hoặc JavaScript nào xảy ra ở đó cả. Nhưng việc gửi đó sẽ khiến trang thay đổi, tải lại theo đúng nghĩa đen tại URL mới, giống như nhấp vào một liên kết.

Ajax cho phép chúng tôi thực hiện yêu cầu GET hoặc POST đó trong nền mà không cần tải lại trang. Về cốt lõi, đó là toàn bộ điểm của Ajax. Và nó rất mạnh mẽ. Nó chịu trách nhiệm phần lớn về lý do tại sao các trang web hiện đại hoạt động và cảm nhận theo cách chúng làm.

Ajax từng là “viết tắt của” JavaScript và XML không đồng bộ, nhưng ngày nay điều đó phần lớn bị bỏ qua vì nó không có nhiều ý nghĩa. Cũng do đó mà giảm viết hoa. Đôi khi bạn cũng có thể thấy “XHR” là viết tắt của XMLHttpRequest, là công nghệ cốt lõi của Ajax.

Sự khác biệt giữa GET và POST về cơ bản là: GET là để lấy thông tin và không chịu trách nhiệm thay đổi dữ liệu và POST là đặc biệt để thay đổi dữ liệu. Vui lòng đọc thêm về điều đó trên chuỗi StackOverflow này.

Thực hiện một yêu cầu GET trong jQuery dễ dàng một cách đáng kinh ngạc:

$.get( "URL", function(data) ( // do something with data )); ));

URL là nơi bạn hy vọng lấy dữ liệu từ đó. Tham số thứ hai là hàm gọi lại chạy khi yêu cầu Ajax thành công. Tham số quan trọng nhất ở đó là tham số đầu tiên, dữ liệu, có thông tin mà nó nhận được từ yêu cầu.

Yêu cầu Ajax đôi khi có thể không thành công. Một lý do cho sự thất bại đó có thể là do chính trình duyệt và các chính sách bảo mật của nó. Bản thân các trình duyệt được đưa vào các quy tắc về nơi có thể yêu cầu nội dung. Yêu cầu luôn có thể được thực hiện cho cùng một miền mà yêu cầu đến từ đó. Nhưng nếu có một miền khác liên quan, miền khác đó sẽ cần phải cho phép nó một cách cụ thể.

Bạn có thể đọc tất cả về điều đó tại enable-cors.org. CORS viết tắt của “Chia sẻ tài nguyên xuyên nguồn gốc”. Chúng tôi xem xét một ví dụ trong đó CORS không được bật và yêu cầu Ajax không thành công. Một cách tiêu chuẩn và dễ dàng để khắc phục điều đó, giả sử máy chủ là Apache, là đặt tiêu đề đặc biệt cho phép CORS thông qua tệp .htaccess:

Header set Access-Control-Allow-Origin "*"

Trong video, chúng tôi chỉ chuyển yêu cầu Ajax sang CodePen, theo mặc định, nó sẽ xử lý tốt Ajax.

Dễ dãi:

Xem Pen fBInl của Chris Coyier (@chriscoyier) trên CodePen