Ajax là gì?

AJAX, viết tắt từ Asynchronous JavaScript and XML (JavaScript và XML không đồng bộ), là bộ công cụ cho phép tăng tốc độ ứng dụng web bằng cách cắt nhỏ dữ liệu và chỉ hiển thị những gì cần thiết, thay vì tải đi tải lại toàn bộ trang web. AJAX không phải một công nghệ đơn lẻ mà là sự kết hợp một nhóm công nghệ với nhau. Trong đó, HTML và CSS đóng vai hiển thị dữ liệu, mô hình DOM trình bày thông tin động, đối tượng XMLHttpRequest trao đổi dữ liệu không đồng bộ với máy chủ web, còn XML là định dạng chủ yếu cho dữ liệu truyền. Đây đều là công nghệ sẵn có nhưng Javacript đã lắp ráp chúng lại để thực hiện những “sứ mệnh” đáng khâm phục.

Từ Ajax được ông Jesse James Garrett đưa ra và dùng lần đầu tiên vào tháng 2 nãm 2005 để chỉ kỹ thuật này, mặc dù các hỗ trợ cho Ajax đã có trên các chương trình duyệt từ 10 năm trước. Ajax là một kỹ thuật phát triển web có tính tương tác cao bằng cách kết hợp các ngôn ngữ:

  • HTML (hoặc XHTML) với CSS trong việc hiển thị thông tin
  • Mô hình DOM (Document Object Model), được thực hiện thông qua JavaScript, nhằm hiển thị thông tin động và tương tác với những thông tin được hiển thị
  • Đối tượng XMLHttpRequest để trao đổi dữ liệu một cách không đồng bộ với máy chủ web.
  • XML thường là định dạng cho dữ liệu truyền, mặc dầu bất cứ định dạng nào cũng có thể dùng, bao gồm HTML định dạng trước, văn bản thuần (plain text), JSON và ngay cả EBML.

AJAX hoạt động như thế nào?

Ứng dụng web truyền thống (trái) và ứng dụng AJAX.

Ứng dụng web truyền thống (trái) và ứng dụng AJAX.

Theo mô hình hoạt động bình thường, client sẽ gửi một HTTP Request lên Server, sau đó Server thực hiện một số khâu xử lý như lấy lại dữ liệu, tính toán, kiểm tra sự hợp lệ của thông tin, sửa đổi bộ nhớ, sau đó gửi lại một trang HTML hoàn chỉnh tới máy khách. Về mặt kỹ thuật, phương pháp này nghe có vẻ hợp lý nhưng cũng khá bất tiện và mất thời gian, bởi khi server đang thực hiện vai trò của nó thì người dùng sẽ làm gì? Có vấn đề gì ở đây? Mỗi lần như vậy Client sẽ gửi toàn bộ nội dung website lên Server, và Server cũng trả về tương ứng. Bạn hình dung, khi xem một bài báo, hay website chia sẻ hình ảnh, bạn chỉ quan tâm nội dung bài báo, hình ảnh đó mà thôi, không cần tải hết cả trang làm gì đó. Đó là hạn chế, bạn sẽ phải tốn thời gian chờ đợi thứ không mong muốn. Không ai muốn chờ đợi cả.

Để khắc phục hạn chế trên, các chuyên gia phát triển giới thiệu hình thức trung gian – cơ chế xử lý AJAX – giữa máy khách và máy chủ. Điều này giống như việc tăng thêm một lớp giữa cho ứng dụng để giảm quá trình “đi lại” của thông tin và giảm thời gian phản ứng. Thay vì tải lại (refresh) toàn bộ một trang, nó chỉ nạp những thông tin được thay đổi, còn giữ nguyên các phần khác, thời gian chờ có thể thay bằng thông điệp ‘loading…’, ‘đang tải dữ liệu…’… Vì thế, khi duyệt một trang hỗ trợ AJAX, người sử dụng không bao giờ nhìn thấy một cửa sổ trắng (blank) và biểu tượng đồng hồ cát – dấu hiệu cho thấy máy chủ đang thực hiện nhiệm vụ. Ví dụ, trong một website ảnh, với ứng dụng truyền thống, toàn bộ trang chứa các ảnh sẽ phải mở lại từ đầu nếu có một thay đổi nào đó trên trang. Còn khi áp dụng AJAX, DHTML chỉ thay thế đoạn tiêu đề và phần vừa chỉnh sửa, do vậy tạo nên các giao dịch trơn tru, nhanh chóng.

Tương tác đồng bộ trong ứng dụng web truyền thống (trên) và dị bộ trong ứng dụng AJAX. (

Tương tác đồng bộ trong ứng dụng web truyền thống (trên) và bất đồng bộ trong ứng dụng AJAX.

Các ứng dụng AJAX

Hiện nay thì khá nhiều website đã và đang ứng dụng ajax. Đơn giản thì chúng ta hay đăng ký thành viên trên các diễn đàn, website. Ngay sau khi chúng ta nhập xong username hay email, hệ thống đã phản hồi cho chúng ta biết tài khoản đó tồn tại hay chưa, mà không cần nhấn nút Submit như truyền thống. Đó là một trong vô số các ứng dụng của AJAX.

Ưu điểm và hạn chế

Cũng như bất kỳ công nghệ khác, AJAX có thể bị sử dụng quá nhiều trong một website, vì họ chỉ thấy những ưu điểm mà AJAX mang lại chớ không quan tâm đến những khuyết điểm của AJAX, để tranh tình trang trên, có thể liệt kê một số đặc điểm của AJAX như sau:

– Ưu điểm

  •  Nó giúp việc thiết kế web đa dạng hơn và tăng tính tương tác của website với người dùng.
  •  Nó sử dụng các công nghệ đã có sẵn nên dễ học và sử dụng
  •  Nhờ tính phổ biến của nó, đã khuyến khích việc phát triển các khuôn mẫu mà sẽ giúp lập trình viên tránh khỏi các vết xe đổ trước.
  •  Được hỗ trợ trong các trình duyệt phổ biến hiện nay.

– Hạn chế

  •  Bạn không thể bookmark nó vào favourite trên trinh duyệt hay gởi link đến cho bạn bè, vì tất cả quá trình nó thực hiện ngầm và không hiển thị trên address.
  •  Không thể hiện thị nội dung trên các trang tìm kiếm vì các trang tìm kiếm hiện nay vẫn chưa hỗ trợ tìm vì rất khó tìm và gần như không thể tìm đc.
  •  Không thể sử dụng nút back vì back cũng là chính nó.
  •  Với một số trình duyệt, do nhu cầu bảo mật, sẽ tắt chức năng thực hiện javascript nên ajax không thể chạy, hay trong một vài host, không hỗ trợ vào sâu cấu hình server nên hay bị lỗi “Access denied”

Nhưng với những điểm hạn chế nói trên thì AJAX vẫn đang được các lập trình viên sử dụng rộng rãi và đang nghiên cứu để cải thiện nó, ví dụ như vừa update thông tin trên web, vừa thay đổi trên thanh address để có thể sử dụng một số chức năng liên quan tới địa chỉ tuyệt đối này.

Kết: sử dụng ajax là cả một nghệ thuật.

Ví dụ về việc sử dụng Ajax đơn giản

(Note: Ở đây thực hiện trong ASP.NET, bạn hoàn toàn có thể thực hiện trên ngôn ngữ khác được)
Ví dụ sau đây chúng ta thực hiện việc lấy giờ trên Server. Thông qua AJAX sẽ cho chúng ta biết thời gian của Server mà không cần tải lại toàn bộ trang web. Chỉ lấy những gì chúng ta cần mà thôi.
Chúng ta sẽ có 3 file. ajax.js, Default.aspx, Ajax.aspx (Có thể khác với ngôn ngữ khác. defaul.php, ajax.php….)
Đầu tiên chúng ta tạo 1 file ajax.js (File javascript này đảm nhiệm việc gọi XMLHttpRequest để trao đổi dữ liệu)
Code
File ajax.js

Cách dùng:

Trang default.aspx Ajax Demo

Trang default.aspx.cs

Trang Ajax.aspx.cs. Không quan tâm phần giao diện HTML.

Demo kết quả:

ajax-datetime

Demo Ajax DateTime

Cách thêm site mới vào IIS trên Windows 7, 8, 10

Chào các bạn.

Khi các bạn làm lập trình web, đặc biệt là rất nhiều bạn đang lập trình ASP.NETASP.NET MVC trên Visual Studio, mỗi lần cần phải chạy website lên để kiểm tra thì mất rất nhiều thời gian. Bạn nhấn F5 và chờ đợi. Tâm trạng cực kỳ ức chế. (Nếu máy tính của bạn cấu hình cao, SSD mới, RAM khủng, Core 7 thế hệ mới nhất thì chúc mừng bạn, bạn không cần quan tâm đến việc phải chờ đợi là mấy).

Và một lợi ích khá hay khi bạn dùng IIS để quản lý website của mình, đó là bạn sẽ biết cách chạy thực tế của một trang web như thế nào, sau này khi deploy sản phẩm bạn không cần phải tìm hiểu quá nhiều về nó nữa.

Khi đi demo sản phẩm cho khách hàng, hay demo đồ án, project với giáo viên, bạn không cần mở Visual Studio lên, vẫn demo ngon lành. Nếu có lỗi phần nào, bạn chỉ cần back lại mà không làm gián đoạn việc trình bày. Nếu bạn F5 bằng Visual, và có lỗi, chắc chắn là ấn tượng không được hay cho lắm. (Ở trường mình học, giáo viên không chấp nhận demo sản phẩm bằng việc F5 trong Visual Studio cho các sản phẩm web ASP.NET, phần mềm thì cũng nên đóng gói khi demo)

Với những lý do trên mà mình rất hay khuyên dùng IIS để chạy trang web của bạn. Nếu bạn đã biết làm thế nào để cài đặt IIS trên Windows của bạn, thì trong bài viết này hướng dẫn bạn cách thêm Site mới vào IIS.

Bài viết liên quan: Hướng dẫn cài đặt IIS trên Windows 7, 8, 10

Đầu tiên đây là dự án của tôi. Bình thường tôi dùng F5 để show kết quả, hoặc R_Click vào file nào đó chọn View in Browser (Ctrl + Shift + W). Bây giờ tôi không muốn thế nữa, nó trông không được chuyên nghiệp cho lắm, trừ khi bạn bắt buộc phải Debug.

add-site-vao-iis-2

[Hình 1 – Dự án website ASP.NET MVC]

Tôi cần xác định xem mình đang lưu code đó ở đâu? Ok, tìm thấy rồi

add-site-vao-iis-3

[Hình 2 – Thư mục chứa code của dự án Website]

Tiếp theo tôi sẽ mở IIS lên. Bạn có thể gõ IIS vào ô search tìm kiếm cho nhanh. Nếu không tìm thấy, hãy thử kiểm tra lại nhé, tôi có link cho bạn đây: http://tuanitpro.com/huong-dan-cai-dat-iis-tren-windows-7-8

add-site-vao-iis-1

[Hình 3 – Giao diện màn hình quản lý IIS]

Tôi đăng ký phiên bản của .NET cho Application Polls. Nếu bạn không tìm thấy dòng .NET CLR Version như bên dưới, hoặc chỉ có version 2.0 thì xem qua bài viết này nhé, http://tuanitpro.com/iis-7-5-error-handler-pagehandlerfactory-integrated

add-site-vao-iis-5

[Hình 4 – Đăng ký Application Polls IIS]

OK rồi. Qua Tab Sites

Chọn Sites -> Add Website, sau đó Nhập tên Website của bạn, nhấn Select chọn Application Poll. Tôi dùng MVC 5 nên chọn .NET 4.5

Trên dòng Physical path: Bạn chọn tới đường dẫn chứa thưa mục Web của bạn, chắc chắn có file Web.config với các ứng dụng web ASP.NET , bạn xem lại hình 2 của tôi nhé.

add-site-vao-iis-6

[Hình 5 – Thêm site mới vào IIS]

Nhấn OK, đây là màn hình quản lý riêng của Site tôi mới thêm vào.

add-site-vao-iis-7

[Hình 6 – Giao diện màn hình quản lý của Site Demo]

Cuối cùng, đây là kết quả của tôi.

add-site-vao-iis-8

[Hình 7 – Tân hưởng kết quả]

Chúc các bạn thành công.

Hướng dẫn cài đặt IIS trên Windows 7, 8, 10

IIS (Internet Information Services) là dịch vụ WebServer trên Windows (có mặt trên các phiên bản khác nhau, XP, Vista, Windows 7, 8, Windows Server). Mặc định hệ thống đã ẩn chức năng đó đi. Tuy nhiên chúng ta hoàn toàn dễ dàng kích hoạt nó lên để sử dụng. Ở đây hướng dẫn các bạn cách bật IIS trên Windows 8, 8.1 (Windows 7 tương tự) để chạy các ứng dụng ASP.NET, ASP.NET MVC.

Các bước để cài đặt IIS trên Windows 8, Windows 10

Trên thanh Charm chọn Search, chọn Setting gõ Programs and Features

tuanitpro.com-cai-dat-iis-buoc-1

Trong cửa sổ Programs and Features Click Turn Windows features on or off

tuanitpro.com-cai-dat-iis-buoc-2

Mở rộng Internet Information Service. Trong đó có 3 phần, bạn chỉ cần quan tâm Web Management Tools & World Wide Web Services. Mở rộng 2 nhánh này và tick chọn vào checkbox. (Mẹo: nên chọn hết để sau này khỏi mất công đôi khi không chạy)

tuanitpro.com-cai-dat-iis-buoc-3

Nhấn OK và chờ vài phút để hệ thống cập nhật lại. Khởi động lại máy tính của bạn nếu cần.

tuanitpro.com-cai-dat-iis-buoc-4

Bạn mở trình duyệt lên gõ: http://localhost hoặc http://127.0.0.1. Nếu trình duyệt xuất hiện màn hình như dưới đây thì xin chúc mừng, bạn đã cài đặt thành công. (Hình bên dưới là IIS 8.5 trên Windows 8.1, của bạn có thể khác một chút)

tuanitpro.com-cai-dat-iis-buoc-5

Để khởi động IIS, vào ô Search gõ IIS

tuanitpro.com-cai-dat-iis-buoc-6

tuanitpro.com-cai-dat-iis-buoc-7

Chúc các bạn thành công.

Hướng dẫn Cách thêm site mới vào IIS

Upload file trong ASP.NET

Khi lập trình web chúng ta hay gặp các tình huống cần phải upload một file nào đó lên hosting. Dễ thấy nhất là upload hình đại điện cho sản phẩm.

Đoạn code nhỏ cho phép bạn Upload file trong ASP.NET

Giao diện

Tạo trang HTML code

Code Upload trang .cs

Kết quả