Ví dụ ajax trong javascript là gì?

AJAX là một trong những mô hình phát triển web thú vị nhất đã xuất hiện cách đây vài năm [khoảng năm 2005]. Kể từ lần đầu tiên thuật ngữ này được đặt ra, [tại đây] AJAX đã trở nên phổ biến trong hầu hết các ứng dụng web. Ngoài ra, Ajax có nhiều biểu hiện và ứng dụng. Một số triển khai dựa trên Ajax thú vị bao gồm cuộn 'vô hạn', xác thực trực tiếp tên người dùng, hộp 'tự động đề xuất', v.v. Kể từ khi Ajax được giới thiệu từ lâu, công nghệ này đã phát triển vượt xa định nghĩa trước đó của nó. Ví dụ: định dạng trao đổi dữ liệu cho Giao tiếp không đồng bộ hướng tới JSON thay vì XML dài dòng [X trong Ajax là dành cho XML]. Một nhà phát triển web phải hiểu rõ về AJAX. Không có nghi ngờ gì về điều đó. Bài viết này sẽ đi sâu hơn vào AJAX. Khó khăn phổ biến nhất khi hiểu Ajax với bản chất không đồng bộ của nó. Sức mạnh thực sự của AJAX là bản chất không đồng bộ của nó. Bài viết này sẽ giải thích nó là gì, nó hoạt động như thế nào, điểm mạnh, điểm yếu của nó và những gì nó tốt cho

AJAX là gì?

AJAX là từ viết tắt của JavaScript và XML không đồng bộ. Nó là một công nghệ lập trình được sử dụng để tạo ra nhiều trang web tương tác hơn. Sử dụng AJAX, bạn có thể tạo các trang web có thể cập nhật nội dung của chúng mà không cần tải lại. AJAX cho phép một trang web giao tiếp trực tiếp với máy chủ, truy xuất thông tin và tự cập nhật. Tất cả điều này xảy ra mà không cần tải lại trang thực sự

Để hiểu AJAX, có hai điều bạn cần biết ngay từ đầu. Trước hết, AJAX không phải là ngôn ngữ lập trình. Nó cũng không phải là một phần mềm. AJAX là một mô hình lập trình - một kỹ thuật. Đây là một kỹ thuật sử dụng các công nghệ web bao gồm CSS, HTML, JavaScript, DOM và XML hoặc JSON. Về cơ bản, để sử dụng AJAX trong các ứng dụng web của bạn, bạn cần nắm cơ bản về các công nghệ đó

Thứ hai, bạn cần có hiểu biết cơ bản về cách trình duyệt web tương tác với máy chủ web. Theo truyền thống, các trình duyệt web tương tác với máy chủ web theo cách đồng bộ. Sự tương tác chủ yếu diễn ra theo ba bước, lặp đi lặp lại nhiều lần. 1. Một trình duyệt Web yêu cầu một trang từ máy chủ 2. Máy chủ gửi trang đến trình duyệt 3. Trình duyệt hiển thị trang cho người dùng

Đối với mô hình truyền thống này, công việc của nhà phát triển web rất đơn giản. Thiết kế các trang của bạn và liên kết chúng bằng thẻ neo [

 Hello, Welcome To The World of AJAX 
 Ajax is  super fun!  Isn't it?

9]. Ngay khi người dùng nhấp vào bất kỳ liên kết nào, trình duyệt sẽ gửi yêu cầu đến máy chủ và tải trang thích hợp. Nhà phát triển web không trực tiếp yêu cầu thông tin từ máy chủ. Đây là video demo giải thích mô hình AJAX

Trong mô hình AJAX, dựa trên hành động của người dùng [ví dụ nhấp vào nút hoặc hình ảnh] mã JavaScript sẽ gửi yêu cầu đến máy chủ web, nhận phản hồi và cập nhật trang web

Một ví dụ điển hình về AJAX đang hoạt động là các trang Facebook hoặc Twitter. Khi bạn cuộn xuống trang Facebook của mình, nó sẽ tiếp tục tìm nạp các nguồn cấp tin tức trước đó của bạn và hiển thị chúng. Nó làm điều này mà không cần tải lại trang. Bạn có cảm giác đang cuộn xuống một trang web dài vô tận

Mô hình yêu cầu AJAX không dễ triển khai như mô hình truyền thống. Nó yêu cầu nhà phát triển web thực hiện một số chương trình JavaScript trên trang web. JavaScript gửi yêu cầu đến máy chủ; . Điều này nghe có vẻ phức tạp, nhưng nó không thực sự. Các trình duyệt hiện đại có một đối tượng sẵn có được gọi là đối tượng XMLHttpRequest. Đối tượng này giúp JavaScript giao tiếp với máy chủ khá dễ dàng

AJAX sử dụng JavaScript thuần túy

Triển khai một số mã mẫu bằng JavaScript thuần túy sẽ giúp bạn hiểu rõ hơn về AJAX

Chúng ta có thể sử dụng đối tượng XMLHttpRequest [còn gọi là XHR] để giao tiếp với máy chủ. Sử dụng đối tượng XHR, một trang web có thể tương tác với các tập lệnh PHP, cơ sở dữ liệu, ứng dụng và thậm chí cả các tệp văn bản nằm trên máy chủ. Bằng cách “tương tác”, chúng tôi muốn nói rằng nó có thể gửi và truy xuất dữ liệu từ các nguồn khác nhau đó. Tương tác này thường được điều khiển bởi JavaScript và việc triển khai Ajax đơn giản diễn ra trong bốn bước

1. Tạo một thể hiện của đối tượng XMLHttpRequest
2. Sử dụng phương thức open[] của XHR để chỉ định loại dữ liệu bạn muốn
3. Tạo một chức năng để sử dụng các kết quả
4. Sử dụng phương thức send[] của XHR để gửi yêu cầu
5. Nhận phản hồi

Bây giờ, 5 bước này là tiêu chuẩn cho mọi triển khai Ajax. Họ không khó để làm chủ. Tuy nhiên, sẽ dễ hiểu hơn khi bạn thấy chúng hoạt động. Vì vậy, chúng ta hãy tạo một ứng dụng Ajax nhỏ để minh họa các bước này

Ứng dụng của chúng tôi sẽ làm một cái gì đó rất cơ bản. Nó sẽ đọc nội dung của tệp văn bản từ máy chủ và sử dụng chúng để thay thế văn bản hiện có trên trang. Nó sẽ thực hiện hành động này chỉ với một nút bấm

Vì vậy, chúng ta sẽ có hai điều. trang web đơn giản của chúng tôi và một tệp văn bản có tên “ajax_info. txt”. Tệp văn bản này sẽ được đặt trong cùng thư mục với trang web của chúng tôi

Phần thân của trang web sẽ trông như sau

     Can AJAX Replace This Text 

 Change Text 

Trong khi đó, tệp văn bản của chúng tôi có tên là “ajax_data. txt” sẽ chỉ có hai dòng

 Hello, Welcome To The World of AJAX 
 Ajax is  super fun!  Isn't it?

Mục tiêu lập trình của chúng tôi rất đơn giản. khi tải trang, người dùng sẽ thấy nội dung trong “myContent”. Khi nhấp vào nút, nội dung sẽ thay đổi và hiển thị nội dung trong tệp văn bản. Bây giờ, hãy bắt đâù

Đầu tiên, chúng ta cần một cái tên cho chức năng của mình, hãy gọi nó là

 Change Text  

0. Chức năng này sẽ thực hiện mọi bước trong mục tiêu lập trình của chúng tôi. e. đọc nội dung trong “ajax_data. txt” và sử dụng nó để thay thế văn bản trong “myContent”

Bây giờ, chúng ta có thể thêm sự kiện title vào nút. nút của chúng tôi trở thành

 Change Text  

Về cơ bản, việc nhấp vào nút sẽ chạy chức năng của chúng tôi, chức năng “loadNewText[]” và do đó thay đổi văn bản trên trang

Mọi thứ hiện đã được thiết lập. Đến Ajax

1. Tạo một thể hiện của đối tượng XMLHttpRequest

Để tạo một thể hiện của XHR, bạn chỉ cần lấy một tên biến và sử dụng phương thức

 Change Text  

1 mới để tạo thể hiện. Hãy gọi ví dụ của chúng tôi là “xhr”. Vì vậy, chúng tôi sẽ tạo một ví dụ như sau

 var xhr = new XMLHttpRequest[]; 

2. Sử dụng phương thức open[] của XHR để chỉ định loại dữ liệu bạn muốn

Open[] của XHR được sử dụng để chỉ định loại dữ liệu mà một đối tượng muốn từ máy chủ. Về cơ bản, bạn sử dụng nó để mô tả những gì bạn muốn từ máy chủ. Phải mất ba đối số tôi. e. loại yêu cầu, vị trí của tệp trên máy chủ và chỉ báo đồng bộ. Gọi nó trông như thế này

 xhr.open[request, url, async] 

Chúng được chia nhỏ như sau

• yêu cầu - đây là loại yêu cầu bạn đang gửi đến máy chủ. Nó nhận một trong hai giá trị. NHẬN hoặc ĐĂNG. Nói một cách đơn giản, GET dùng để truy xuất thứ gì đó từ máy chủ. POST là để gửi một cái gì đó đến máy chủ
• url - đây là URL của tệp trên máy chủ. Nó có thể là URL tĩnh hoặc URL tương đối hoặc đơn giản là đường dẫn từ thư mục chứa trang web
• không đồng bộ - điều này được sử dụng để xác định xem yêu cầu có được thực thi không đồng bộ hay không. Nó nhận giá trị “true” hoặc “false”. Đúng là để thực thi không đồng bộ. Sai là để thực thi đồng bộ

Trong trường hợp của chúng ta, chúng ta sẽ gọi phương thức

 Change Text  

2 như sau

xhr.open["GET", "ajax_data.txt", true]; 

3. Tạo hàm nhận và sử dụng kết quả

Một đối tượng XHR có nhiều biến sẵn có trong đó nó lưu trữ dữ liệu được lấy từ máy chủ. Một trong những biến này được gọi là responseText. Bây giờ, văn bản phản hồi thường chứa bất kỳ thông tin văn bản nào được lấy từ máy chủ

Khi chúng tôi gọi xhr. open[], nó sẽ lấy thông tin văn bản được lưu trữ “ajax_data. txt” và lưu trữ nó trong biến responseText của nó. Vì vậy, để truy cập dữ liệu, chúng ta chỉ cần gọi xhr. phản hồiVăn bản

Vì mục tiêu của chúng tôi là thay thế

 Change Text  

3 trong

 Change Text  

4 bằng văn bản mới được đọc từ máy chủ, nên chúng tôi sử dụng tài liệu. getElementById[]. Vì vậy, chúng ta sẽ tạo một hàm ẩn danh như sau

     Can AJAX Replace This Text 

 Change Text 

2

Hàm này về cơ bản thay thế HTML được tìm thấy trong “myContent” của

 Change Text  

5 bằng văn bản được tải từ máy chủ. Chúng ta sẽ gọi chức năng này ở đâu?

4. Sử dụng phương thức send[] của XHR để gửi yêu cầu

Phương thức

 Change Text  

6 được sử dụng để gửi yêu cầu đến máy chủ. Nó không nhận bất kỳ tham số nào, vì vậy bạn chỉ cần gọi nó như sau

     Can AJAX Replace This Text 

 Change Text 

5

5. Nhận phản hồi

Làm thế nào để bạn biết khi nào có phản hồi đến từ máy chủ? . Cái đầu tiên là “readyState” và cái thứ hai là “status”. Thuộc tính “readyState” ghi lại tiến trình của yêu cầu. Nó trả về một giá trị số, được đánh số từ 0 đến 4 cho biết các trạng thái tiến trình khác nhau

Các số dịch như sau

0 - yêu cầu không được khởi tạo

1 – kết nối với máy chủ được thiết lập

2 - yêu cầu nhận được bởi máy chủ

3 – máy chủ đang xử lý yêu cầu

4 – yêu cầu đã được xử lý và phản hồi đã sẵn sàng

Thuộc tính “status” cho biết yêu cầu có được thực hiện thành công hay không

200 – yêu cầu được thực hiện thành công và phản hồi được gửi
404 – không tìm thấy trang Bạn có thể truy cập các thuộc tính này bằng cách tham chiếu chúng từ biến XHR như sau. xhr. readyState hoặc xhr. trạng thái

Trên thực tế, tốt hơn là nên kiểm tra các giá trị này trong hàm [được đề cập trong phần 3 ở trên] trước khi thử truy xuất các giá trị khác. Trước khi truy xuất bất kỳ biến nào khác của XHR [e. g văn bản phản hồi], chúng ta phải đảm bảo rằng “readyState” là 4 và “status” là 200

Vì vậy, mã chức năng của chúng tôi phải được viết lại như sau

     Can AJAX Replace This Text 

 Change Text 

6

Vì vậy, làm thế nào để chúng tôi biết rằng một phản hồi đã đến từ máy chủ? . Sự kiện này được gọi là sự kiện “onreadystatechange”. Sự kiện này là cách hoàn hảo để thực hiện bất kỳ chức năng nào được thiết kế để sử dụng các kết quả được truy xuất từ ​​máy chủ. Bạn chỉ cần gán chức năng để phản hồi sự kiện này như vậy.

 Change Text  

7

Vì chúng tôi đang sử dụng chức năng ẩn danh nên chúng tôi đính kèm như sau

     Can AJAX Replace This Text 

 Change Text 

8

Vì vậy, có bạn có nó. Chúng tôi đã hoàn thành năm bước và việc triển khai AJAX của chúng tôi đã sẵn sàng. Chúng ta chỉ cần kết hợp tất cả lại với nhau theo một hàm có tên là

 Change Text  

0 [tên mà chúng ta đã đặt cho nó trước đó]. Vì vậy, tất cả đến với nhau như thế này

 Hello, Welcome To The World of AJAX 
 Ajax is  super fun!  Isn't it?

0

Bản demo triển khai JavaScript Ajax thuần túy

Xem Pen AgaGf của Prasanth [@prasanthmj] trên CodePen

Tóm lại, đây là cách làm việc với AJAX bằng Javascript thuần túy. Bạn sử dụng JavaScript để gửi yêu cầu đến máy chủ bằng đối tượng XMLHttpRequest. Bạn vẫn sử dụng JavaScript để hiển thị kết quả trên trang web. Trong hầu hết các trường hợp, bạn sử dụng JSON hoặc XML để trao đổi dữ liệu giữa trình duyệt và máy chủ. Tuy nhiên, bất kể ứng dụng AJAX của bạn phức tạp đến mức nào, các bước vẫn như đã nêu ở trên

AJAX sử dụng jQuery

Các thư viện Javascript hiện đại giúp triển khai các yêu cầu AJAX dễ dàng hơn nhiều. Mẫu ở trên được thực hiện với sự trợ giúp của thư viện jQuery sẽ như thế này

 Hello, Welcome To The World of AJAX 
 Ajax is  super fun!  Isn't it?

1

Hàm ajax trong jQuery có một số tùy chọn và tham số cho phép xử lý các yêu cầu AJAX ở mức thấp hơn

Thư viện jQuery cũng có một số phương thức ngắn tay để thực hiện các yêu cầu AJAX. tải [], jQuery. lấy [], jQuery. bài[] và jQuery. getJSON là một số ví dụ

Đây là một ví dụ khác sử dụng AJAX. Thông thường có các danh sách thả xuống với một số lượng lớn các mục trong biểu mẫu. Thông thường, các mục trong danh sách sẽ trùng lặp. Ví dụ: danh sách thả xuống 'quốc gia'

Giải pháp dễ dàng cho việc này là tải danh sách động bằng AJAX. Đây là Mã

 Hello, Welcome To The World of AJAX 
 Ajax is  super fun!  Isn't it?

2

Hàm

 Change Text  

9 lấy tệp từ URL từ xa. Tham số thứ hai của

 var xhr = new XMLHttpRequest[]; 

0 là chức năng gọi lại nhận dữ liệu. Hàm lấy dữ liệu và nối các mục vào danh sách

Thử nghiệm. tải danh sách động bằng AJAX

Xem Pen veoir của Prasanth [@prasanthmj] trên CodePen

Định dạng dữ liệu phản hồi Ajax

X trong AJAX là viết tắt của XML. Tuy nhiên, AJAX đã phát triển hơn nữa và các nhà phát triển bắt đầu sử dụng các định dạng dữ liệu nhẹ hơn. Sử dụng các định dạng dữ liệu nhẹ hơn giúp mã hóa dễ dàng và nhanh hơn. Tên AJAX vẫn còn mặc dù không có XML nào liên quan. JSON [Ký hiệu đối tượng JavaScript] là một định dạng trao đổi dữ liệu nhẹ. Thật dễ dàng cho con người để đọc và viết. Máy dễ dàng phân tích cú pháp và tạo. Hầu hết các ngôn ngữ kịch bản phía máy chủ đều hỗ trợ phân tích cú pháp và tạo JSON

JSON mẫu

 Hello, Welcome To The World of AJAX 
 Ajax is  super fun!  Isn't it?

3

Dữ liệu trên là một phần của danh sách quốc gia, được sử dụng trong. Đọc thêm về JSON

Văn bản Trả lời văn bản đơn giản và dễ dàng nhất. Đối với các cuộc gọi AJAX không yêu cầu bất kỳ cấu trúc dữ liệu phức tạp nào, hãy ưu tiên phản hồi bằng văn bản. Văn bản phản hồi thường được sử dụng khi bạn chỉ muốn hiển thị một thông báo

Các ứng dụng HTML AJAX cần hiển thị một số định dạng nâng cao hơn có thể sử dụng HTML. Ví dụ: thông báo bật lên cần hiển thị hình ảnh và siêu liên kết. Tuy nhiên, nếu bạn đang nhận nội dung do người dùng tạo ở định dạng HTML, hãy đảm bảo rằng HTML được lọc đúng cách để tránh XSS [được giải thích bên dưới]

JSONP JSONP [JSON đệm] là dữ liệu JSON được định dạng giống như lệnh gọi hàm JavaScript. Kỹ thuật này được sử dụng để thực hiện các cuộc gọi AJAX đến một miền khác. Các trình duyệt sẽ có xác thực bảo mật mặc định cho các cuộc gọi AJAX. Các trang được tải từ một số trang web. com chỉ có thể thực hiện cuộc gọi AJAX đến một số trang web. com. AJAX gọi đến tên miền khác. com sẽ thất bại. Tuy nhiên, một trang web có thể bao gồm các tập lệnh từ các miền khác bằng cách sử dụng

 var xhr = new XMLHttpRequest[]; 

1 JSONP sử dụng kỹ thuật này để tải dữ liệu JSON từ một miền khác. Đọc thêm về JSONP

Một số triển khai AJAX tuyệt vời

Kể từ lần đầu tiên xuất hiện vào năm 2005, AJAX đã thay đổi rất nhiều cách các nhà phát triển triển khai các ứng dụng web. Do đó, AJAX hiện được sử dụng để triển khai một số tính năng tuyệt vời mà chúng ta thường coi là hiển nhiên. Một số ứng dụng chạy nhờ AJAX là

Tự động đề xuất – Tính năng phổ biến nhất của tính năng này là tính năng tự động đề xuất cụm từ tìm kiếm của Google. Điều này được thực hiện bằng AJAX. Trên thực tế, Google Suggest [hiện được gọi là Google Instant] là một trong những ứng dụng đầu tiên được xây dựng bằng AJAX vào năm 2005. Hầu như tất cả các công cụ tìm kiếm hiện nay đều có tính năng này. Tự động đề xuất không chỉ giới hạn ở các công cụ tìm kiếm. Tự động đề xuất có thể được sử dụng trong bất kỳ hộp văn bản nào có thể có các đầu vào phổ biến. Ví dụ: hộp nhập quốc gia trong biểu mẫu web, hộp 'kỹ năng' hoặc hộp 'ngôn ngữ đã biết' trong sơ yếu lý lịch, v.v. Nếu bạn muốn đề xuất tự động trong trang web của mình, đây là một thành phần có thể tái sử dụng dễ dàng. Ajax AutoComplete cho jQuery

Cuộn vô hạn – nếu bạn truy cập trang Twitter của mình, khi bạn bắt đầu cuộn xuống dưới, nhiều Tweet trước đây của bạn sẽ xuất hiện. Bạn càng cuộn, bạn càng thấy nhiều tweet. Có vẻ như tất cả trong một trang rất dài. Điều này được gọi là cuộn vô hạn. Nó được triển khai bằng AJAX. Khi bạn cuộn xuống dưới, nhiều tweet hơn sẽ được tải xuống từ máy chủ và hiển thị cho bạn. Các trang web phổ biến khác có tính năng này là Facebook và Tạp chí Time. jScroll là một plugin jQuery tuyệt vời để triển khai cuộn vô hạn. Kiểm tra jScroll tại đây

Nhãn chứng khoán tự cập nhật – nếu bạn truy cập các trang giao dịch của thị trường chứng khoán như NYSE hoặc FTSE100, bạn sẽ thấy các mã chứng khoán. Những mã cổ phiếu này cập nhật với tỷ giá mới nhất trên thị trường gần như trên cơ sở từng giây. Chúng tự động cập nhật mà không cần tải lại các trang. Điều này được thực hiện bằng AJAX. Ajax lấy giá mới nhất từ ​​máy chủ và cập nhật nhãn dán chứng khoán. Một tính năng tương tự được sử dụng trong Thị trường ngoại hối trực tuyến để hiển thị tỷ giá hối đoái mới nhất hoặc trong các trang web thể thao để hiển thị tỷ số trực tiếp trong các trận đấu

Xác thực biểu mẫu - Ví dụ: khi bạn muốn kiểm tra xem email đã được đăng ký chưa, tên người dùng đã được sử dụng chưa - bạn phải gửi đầu vào của người dùng đến máy chủ và kiểm tra nó trong cơ sở dữ liệu. Nếu email đã được đăng ký, bạn có thể hiển thị thông báo lỗi bên cạnh trường email. Bằng cách này, việc xác thực biểu mẫu có thể được thực hiện ngay cả trước khi biểu mẫu được gửi

Các ứng dụng khác – AJAX cũng có thể được sử dụng để tải lên các tệp hoặc hình ảnh đồng thời, đăng các mục nhập biểu mẫu, tìm kiếm thông qua cơ sở dữ liệu [e. g. tìm kiếm sản phẩm của Amazon], và nhiều thứ khác

Xem thêm

• Tải lên tệp jQuery
• Khung nhắn tin tức thời AJAX IM
• Jcrop. plugin cắt ảnh jQuery

Khi nào nên sử dụng AJAX

Ajax đã được giới thiệu với nỗ lực làm cho các ứng dụng web có cảm giác như các chương trình máy tính để bàn về thời gian phản hồi. AJAX mang lại trải nghiệm người dùng phong phú hơn bằng cách giữ người dùng trong ngữ cảnh. Thay vì ngồi đợi trang tải, người dùng truy cập nội dung mới trên cùng một trang. Điều này mang lại cảm giác liên tục và nhất quán. Ajax tăng cường thời gian tải. Điều này là do chỉ các phần của trang web được tải. Điều này làm cho trang web xuất hiện nhanh hơn. Nó sử dụng ít băng thông hơn. Tải các phần của trang tiêu tốn ít băng thông hơn tải toàn bộ trang. Hơn nữa, AJAX có thể sử dụng các định dạng dữ liệu nhỏ gọn như JSON. Nó nhỏ hơn so với các định dạng dữ liệu mang tính mô tả hơn như XML hoặc HTML. Nó cũng làm giảm tải máy chủ

AJAX và khả năng truy cập

Ứng dụng AJAX có thể tải động các phần của trang web. Điều này làm cho trang web phản hồi nhanh hơn nhiều và do đó cung cấp trải nghiệm người dùng phong phú hơn. Bản chất động của các ứng dụng AJAX tạo ra các vấn đề về khả năng truy cập cho các tác nhân người dùng không trực quan. Làm cho nội dung động của bạn có thể truy cập được đối với người dùng bằng các trình duyệt dựa trên hình ảnh không phải là một việc gấp gáp. Rốt cuộc, người dùng có thể thấy nội dung mới của bạn ngay khi nó xuất hiện [hoặc bạn có thể sử dụng các dấu hiệu trực quan như 'đang tải. ’ hoạt hình]. Tuy nhiên, đối với người dùng có trình đọc màn hình, việc cung cấp quyền truy cập vào nội dung động sẽ khó khăn hơn nhiều. Trình đọc màn hình có xu hướng hoạt động theo cách tuyến tính

Có một cách tiếp cận đơn giản được chỉ định trong W3C’s Web Accessibility Initiative [WAI]. WAI là một sáng kiến ​​được giới thiệu để cải thiện khả năng truy cập web cho người khuyết tật. Một trong những giao thức do WAI đề xuất là Ứng dụng Internet phong phú có thể truy cập [ARIA]

ARIA [tên đầy đủ của nó là WAI-ARIA] là một giao thức nhằm thúc đẩy khả năng tiếp cận nội dung động và kịch bản. WAI-ARIA cung cấp một khung vững chắc để triển khai các tùy chọn trợ năng cho ứng dụng AJAX

WAI-ARIA Fundamentals

WAI-ARIA hoạt động bằng cách xác định một tập hợp các thuộc tính HTML có ý nghĩa ngữ nghĩa đặc biệt cho trình đọc màn hình và các công nghệ hỗ trợ khác. Bao gồm các thuộc tính này trong ứng dụng AJAX của bạn giúp nó dễ truy cập hơn. Các thuộc tính HTML được chia thành ba loại chính i. e. Vai trò, tính chất và trạng thái

Vai trò mô tả mục đích của phần tử HTML trên trang web. Các giá trị có thể có đối với thuộc tính vai trò tương ứng với các phần khác nhau của trang bao gồm. biểu ngữ, điều hướng, bài viết, chính [dành cho khu vực nội dung chính], bổ sung [nội dung hỗ trợ cho khu vực chính] và contentinfo [nội dung thông tin như bản quyền, chú thích, sơ đồ trang web, v.v.]. Ví dụ

 Hello, Welcome To The World of AJAX 
 Ajax is  super fun!  Isn't it?

4

Các thuộc tính mô tả ý nghĩa của các phần tử. Chẳng hạn, ARIA cung cấp thuộc tính “aria-required”. Vì vậy, để tạo một ô nhập liệu phải được điền, hãy viết

 var xhr = new XMLHttpRequest[]; 

2

Các trạng thái mô tả trạng thái hiện tại của một phần tử. Ví dụ:

 var xhr = new XMLHttpRequest[]; 

3 chỉ ra rằng nút bị tắt

Khi bạn xây dựng các ứng dụng AJAX của mình, hãy đảm bảo rằng vai trò ARIA thích hợp đã được thêm vào phần tử. Một

 Change Text  

5 có thể được làm giống như một cái nút và một

 var xhr = new XMLHttpRequest[]; 

5 có thể hoạt động như một menu. Áp dụng đúng vai trò ARIA cho các phần tử đó. Ví dụ

 Hello, Welcome To The World of AJAX 
 Ajax is  super fun!  Isn't it?

5

Thực đơn

 Hello, Welcome To The World of AJAX 
 Ajax is  super fun!  Isn't it?

6

Làm cho nội dung động có thể truy cập được

Một trong những ứng dụng phổ biến nhất của AJAX là tạo nội dung động trên trang web. ARIA cung cấp một cơ chế đơn giản để cung cấp cho trình đọc màn hình khả năng truy cập dễ dàng vào nội dung động

Cơ chế này được gọi là “các vùng trực tiếp”. Vùng trực tiếp được cập nhật động bằng AJAX. WAI-ARIA cung cấp một thuộc tính gọi là “aria-live” có thể được sử dụng để xác định các phần động. Áp dụng thuộc tính này cho thẻ đại diện cho phần động [e. g.

 var xhr = new XMLHttpRequest[]; 

6]. Việc áp dụng thuộc tính này sẽ thông báo cho trình đọc màn hình rằng phần này chứa nội dung động. Thuộc tính aria-live cung cấp một số giá trị để cho biết khi nào người dùng sẽ được thông báo về bất kỳ cập nhật nội dung động nào

Tắt – [ví dụ.

 var xhr = new XMLHttpRequest[]; 

6] tắt mọi thông báo. Tùy chọn này được sử dụng khi nội dung được cập nhật động ít quan trọng đối với người dùng

lịch sự [ví dụ.

 var xhr = new XMLHttpRequest[]; 

8] tắt thông báo sau khi hoàn thành nhiệm vụ hiện tại. Điều này được sử dụng cho nội dung mặc dù quan trọng, không quan trọng. Đầu tiên, trình đọc màn hình hoàn thành nhiệm vụ hiện tại của nó, sau đó thông báo cho người dùng về nội dung mới có sẵn. Điều này cung cấp cho người dùng một tùy chọn để điều hướng thẳng đến nội dung động

Quyết đoán [ví dụ.

 var xhr = new XMLHttpRequest[]; 

9] đặt thông báo càng sớm càng tốt. Không giống như phép lịch sự, giá trị này không đợi tác vụ hiện tại hoàn thành. Nó làm gián đoạn nó và tắt thông báo. Sau đó, nó cung cấp cho người dùng cơ hội điều hướng đến nội dung mới ngay lập tức

Khả năng truy cập bàn phím

Thông thường, các phần tử HTML duy nhất có thể nhận tiêu điểm bàn phím là các phần tử liên kết và biểu mẫu. Nếu bạn điều hướng qua trang web bằng cách nhấn phím tab, tiêu điểm sẽ chỉ dừng lại ở các liên kết hoặc thành phần biểu mẫu. Nó có thể rất hạn chế đối với người dùng thích điều hướng dựa trên bàn phím. Các ứng dụng AJAX thường tập trung quá nhiều vào các tương tác dựa trên chuột. Ví dụ: khi nhấn chuột - hiển thị cửa sổ bật lên hoặc chú giải công cụ, khi nhấp chuột trái - hiển thị nội dung khác, v.v. Khả năng truy cập chỉ dành cho bàn phím thường bị bỏ qua. Có một cách đơn giản để đặt quyền truy cập bàn phím vào bất kỳ thành phần nào trên trang web. Điều này thông qua thuộc tính tabindex. Bạn có thể thêm thuộc tính này vào bất kỳ thẻ nào. Ví dụ:

 xhr.open[request, url, async] 

0 sẽ làm cho đoạn văn cụ thể có thể đạt được tiêu điểm. Thuộc tính tabindex lấy một số làm giá trị. Số '0' thêm phần tử vào thứ tự điều hướng thông thường của trang web. Bạn có thể sắp xếp lại thứ tự điều hướng bằng cách gán các giá trị tăng dần cho thuộc tính tabindex. Khi bạn chỉ định một phần tử có giá trị tabindex là -1, bạn cấp cho phần tử đó quyền truy cập có lập trình. Chẳng hạn, giả sử bạn có một div được định nghĩa như sau

 Hello, Welcome To The World of AJAX 
 Ajax is  super fun!  Isn't it?

7

Bạn có thể tập trung div này bằng JavaScript

 Hello, Welcome To The World of AJAX 
 Ajax is  super fun!  Isn't it?

8

Đọc thêm

• kỹ thuật ARIA. nhà phát triển. mozilla. tổ chức
• Ví dụ ARIA thực tế. heydonworks. com
• Các ví dụ về ARIA. Illinois. giáo dục
• Lưu ý khi sử dụng ARIA. Steve Faulkner, nhóm hòa bình. com

Mối quan tâm về bảo mật của Ajax

Chính đặc điểm khiến Ajax trở thành một phương pháp thiết kế ứng dụng web mạnh mẽ cũng dễ bị tổn thương bởi các lỗ hổng bảo mật. Ứng dụng Ajax cung cấp bối cảnh mối đe dọa rộng hơn mà nhà phát triển cần triển khai các biện pháp bảo mật. Điều này không có nghĩa là Ajax có lỗi. Bất kỳ ứng dụng web nào không được triển khai tốt đều có thể bị lỗ hổng bảo mật. Vấn đề ở đây là, với tư cách là nhà phát triển, điều quan trọng là phải hiểu các lỗ hổng bảo mật tiềm ẩn có liên quan đến Ajax

Kiểm tra xác thực

Trong ứng dụng AJAX, tập lệnh gửi yêu cầu đến máy chủ tại các thời điểm khác nhau. Thông thường, yêu cầu AJAX sẽ được dịch sang lệnh gọi hàm trực tiếp trên tập lệnh phía máy chủ. Tập lệnh phía máy chủ phải luôn xác thực nguồn của yêu cầu và mã thông báo xác thực. Hãy tưởng tượng một hệ thống có nhiều cấp độ người dùng. Người dùng cấp quản trị viên sẽ có đặc quyền cao hơn và có thể thực hiện các tác vụ như đặt lại mật khẩu người dùng. Nhấn một nút sẽ gửi một yêu cầu AJAX như thế này. trang mạng. com/app/resetpwd. php?uid=3131 Nếu tập lệnh resetpwd. php không thực hiện kiểm tra xác thực [1. liệu người dùng đã đăng nhập chưa, 2. liệu người dùng có quyền đặt lại mật khẩu hay không] bất kỳ người dùng đã đăng ký nào cũng có thể đặt lại mật khẩu của người dùng khác

Liệt kê và rò rỉ dữ liệu

Một lỗ hổng quan trọng khác trong các ứng dụng dựa trên AJAX là lấy các tham số chính từ chính các yêu cầu AJAX. Hãy tưởng tượng giao diện web của một ngân hàng. Để có trải nghiệm 'phong phú', ngân hàng đã triển khai giao diện AJAX để duyệt qua các bản ghi giao dịch. Yêu cầu AJAX được gửi tới tập lệnh phụ trợ như thế này. ngân hàng. com/webapp/trans?ac=55146&pg=1 Kẻ tấn công có thể thao túng các tham số và duyệt qua lịch sử giao dịch của người dùng khác

Xác thực tham số

Các tham số đến từ các yêu cầu AJAX phải được xác thực giống như bất kỳ đầu vào nào của người dùng phải được. Đây là trường hợp của một trang web Thương mại điện tử. Các sản phẩm đã được liệt kê bằng cách sử dụng AJAX. Yêu cầu mang số lượng sản phẩm được liệt kê. ví dụ muawidget. com/prod/list?p=3&recs=50 Thật không may, tham số recs không được xác thực cho bất kỳ giới hạn tối đa nào. Gửi nhiều truy vấn recs=100000 đã khiến trang web bị sập

Cross-Site Scripting XSS

XSS không dành riêng cho AJAX. Tuy nhiên, AJAX có thể làm tăng bề mặt tấn công vì các yêu cầu AJAX có thể được thực hiện thay cho người dùng thông qua lỗ hổng XSS. Lỗ hổng XSS xảy ra khi bạn cho phép thông tin nhập của người dùng được hiển thị trong một trang web mà không có bất kỳ bộ lọc nào. Ví dụ: giả sử bạn có một hệ thống nhắn tin nội bộ. Một người dùng có thể nhắn tin cho người dùng khác hoặc gửi tin nhắn đến một địa điểm chung. Giả sử thông báo cho phép tất cả các thẻ HTML mà không có bất kỳ giới hạn nào.

 xhr.open[request, url, async] 

1 sẽ được in đậm khi hiển thị trong trang “xem tin nhắn”. Kẻ tấn công có thể chèn thẻ tập lệnh như thế này

 xhr.open[request, url, async] 

2 vào thư và bất kỳ ai xem thư sẽ tự động chạy tập lệnh. XSS phổ biến đến mức ngay cả các dịch vụ phổ biến của Google [chi tiết ], Facebook [ chi tiết] và Yahoo [thêm thông tin] đều bị tấn công thông qua lỗ hổng XSS

Ngăn chặn chính của XSS là hiển thị đầu vào của người dùng 'như đã nhập vào trường'. Nếu người dùng nhập

 xhr.open[request, url, async] 

1 thì nó cũng sẽ xuất hiện trong trang hiển thị nó

 xhr.open[request, url, async] 

1. Đối với các đầu vào cần hỗ trợ định dạng HTML, hãy giới hạn các thẻ HTML được phép và lọc ra các thẻ HTML khác

Giả mạo yêu cầu trên nhiều trang web [CSRF]

CSRF [còn được gọi là XSRF hoặc Sea-Surf] là một cách khai thác phổ biến được sử dụng để gửi các yêu cầu trái phép từ tài khoản của người dùng. Về cơ bản, một hacker chiếm đoạt thông tin đăng nhập của người dùng và sử dụng chúng để gửi yêu cầu đến máy chủ. Từ máy chủ, các yêu cầu dường như được phát ra từ người dùng

• Người dùng đăng nhập vào tài khoản của mình [ví dụ. ngân hàng. com]
• Kẻ tấn công yêu cầu người dùng nhấp vào liên kết hoặc hình ảnh.

   xhr.open[request, url, async] 
  

  5
• Liên kết kích hoạt một giao dịch hoặc hành động trong tài khoản của người dùng

Vì người dùng đã đăng nhập nên từ phía máy chủ, có vẻ như người dùng đã yêu cầu giao dịch. Việc ngăn chặn CSRF bao gồm một số bước. Bước quan trọng là sử dụng mã thông báo đồng bộ hóa cho các yêu cầu giao dịch. Lưu ý rằng điểm của lỗ hổng là phía máy chủ không xác minh xem yêu cầu có bắt nguồn từ trang web hay không [trong trường hợp này là trang của ngân hàng]. Khi người dùng đã đăng nhập, trang của ngân hàng sẽ chứa mã thông báo trong một trường ẩn. Mã thông báo là ngẫu nhiên và chỉ được biết đến với máy chủ. Tất cả các yêu cầu, bao gồm các yêu cầu AJAX phải bao gồm mã thông báo đồng bộ hóa này từ trường ẩn. Bây giờ URL của giao dịch rút tiền sẽ giống như.

 xhr.open[request, url, async] 

6

Bạn cũng nên sử dụng phương thức POST thay vì GET để mã thông báo không xuất hiện trong lịch sử trình duyệt

Đọc thêm

• Cuốn sách này. Bảo mật Ajax. Billy Hoffman và Bryan Sullivan
• Nguyên tắc bảo mật OWASP AJAX
• Các vấn đề bảo mật Ajax. viện thông tin. com
• Bảng gian lận ngăn chặn giả mạo yêu cầu trên nhiều trang web [CSRF]. con ong bắp cày. tổ chức
• Giả mạo yêu cầu trên nhiều trang web được làm sáng tỏ. hội trường của valhalla. tổ chức
• Hiểu lỗ hổng Ajax. IBM
• Khai thác và phòng thủ ứng dụng web
• Khai thác XSS trong ứng dụng web Ajax

Các mối quan tâm và giải pháp AJAX khác

AJAX là để thêm tính tương tác tốt hơn cho các trang web và ứng dụng. Nó có lợi thế lớn về mặt đó. Chúng tôi đã thấy các mối quan tâm về Khả năng truy cập và Bảo mật liên quan đến AJAX. Có một vài điểm và mối quan tâm bổ sung mà chúng ta cũng nên xem xét

Công cụ tìm kiếm hiện hữu

Điều này đặc biệt đúng đối với các trang web giàu nội dung. Khi các trang hoặc các phần của trang được tải 'theo yêu cầu' dựa trên tương tác của người dùng [ví dụ: trong cuộn vô hạn], đừng quên những người tiêu dùng nội dung khác của bạn - các công cụ tìm kiếm. Các công cụ tìm kiếm chỉ lấy nội dung và lập chỉ mục cho nó. vì vậy các phần của nội dung động không có sẵn cho họ để lập chỉ mục. Khi các tính năng như vậy được triển khai, hãy tìm cách cung cấp nội dung cho các công cụ tìm kiếm. Ví dụ: nội dung có thể cuộn vô hạn có thể được cung cấp cho các công cụ tìm kiếm thông qua một vài thẻ meta [

 xhr.open[request, url, async] 

7 và

 xhr.open[request, url, async] 

8] Đọc thêm về nội dung này tại đây

đánh dấu trang

Người dùng web đã quen thuộc với một số cách thức hoạt động của web. Khi họ muốn quay lại một trang, họ có thể đánh dấu trang đó và sau đó quay lại chính trang đó bằng cách nhấp vào dấu trang. Khi một trang được cập nhật động với nội dung ở các phần khác nhau, đây có thể không phải là trường hợp. Quay lại trang web sẽ đưa đến trang đầu tiên ban đầu. Cách khắc phục sự cố này là PushState. Ý tưởng là khi bạn cập nhật một trang thông qua AJAX, hãy cập nhật URL để phản ánh sự thay đổi. Vì vậy, quay lại cùng một URL sẽ tải chính xác cùng một trang với các bản cập nhật. Ví dụ: giả sử một trang có cuộn vô hạn. Người dùng đã cuộn xuống đến trang thứ 3. Khi người dùng cuộn xuống trang thứ hai rồi đến trang thứ ba, hãy cập nhật URL để chứa trang hiện tại. Khi người dùng quay lại dấu trang, số trang được chọn từ URL và hiển thị chính xác ở trang thứ 3

Phần kết luận

AJAX đã phát triển từ một thuật ngữ công nghệ thành một khía cạnh thiết yếu của các ứng dụng web. Nó đã có một số khía cạnh phát triển theo thời gian. Các thư viện và khung mới được phát triển xung quanh các khái niệm AJAX. Điều này đòi hỏi các nhà phát triển web chúng tôi phải hiểu không chỉ các nguyên tắc cơ bản mà cả các khía cạnh xung quanh như khả năng truy cập và bảo mật của AJAX.

Các loại AJAX là gì?

AJAX JavaScript được sử dụng để làm gì?

AJAX được sử dụng ở đâu?

Làm cách nào để gọi AJAX trong JavaScript?