Bạn đang xem : ajax làm được gì

AJAX hoặc (A) đồng bộ (J) avascript (A) nd (X) ML (điều này rất thú vị có xu hướng để sử dụng JSON nhiều hơn ngày nay), là một hệ thống trong đó Javascript sử dụng một đối tượng trình duyệt để giao tiếp với một máy chủ từ xa. Trường hợp sử dụng chung của điều này là có thể cập nhật giao diện của khách hàng mà không cần phải truy cập trang khác. Trước khi bắt đầu, chúng tôi xin lưu ý một vài lời.

  • Ajax không được khuyến nghị cho các biểu mẫu đăng nhập và xác thực đăng nhập
  • Người dùng có thể tắt Javascript hoặc có thể bị hạn chế chạy Javascript do chính sách CNTT
  • Với lưu ý này, chúng tôi khuyên bạn nên không sử dụng AJAX làm giải pháp duy nhất cho chức năng quan trọng của người dùng! Luôn có dự phòng!

Lưu ý : Bài đăng wiki cộng đồng này sử dụng JQuery để hiển thị các lệnh gọi AJAX mẫu. Nó được khuyến nghị cho những người mới vì nó ẩn các vấn đề tương thích của trình duyệt khi thực hiện các cuộc gọi AJAX. Vui lòng kiểm tra trang web JQuery để biết thêm thông tin về JQuery.

Lưu ý : Các ví dụ sử dụng giao tiếp với máy chủ PHP, nhưng bất kỳ ngôn ngữ phía máy chủ nào cũng sẽ hoạt động.

Lệnh gọi lại AJAX

Đầu tiên, chúng tôi có một cuộc gọi AJAX. Trong cuộc gọi AJAX, bạn thiết lập các trình xử lý gọi lại cho các loại sự kiện khác nhau có thể xảy ra. Một quan niệm sai lầm phổ biến có thể được chỉ ra trong đoạn mã sau:

  // Không chính xác!
function makeAjaxCall () {
  var result = $ .ajax ({
    url: 'ajax / test.html'
  });

  trả về kết quả;
}
 

Vấn đề ở đây là khi trình duyệt của bạn thực hiện một yêu cầu AJAX, nó có thể thành công hoặc thất bại. Ví dụ: nếu bạn thử truy cập một trang không tồn tại hoặc nếu máy chủ có lỗi nội bộ. Để giữ mọi thứ có tổ chức nhất có thể, AJAX yêu cầu bạn tạo các hàm gọi lại để xử lý yêu cầu dữ liệu. Cách đúng như sau:

  // Đúng!
function makeAjaxCall () {
  $ .ajax ({
    url: 'ajax / test.html',
    thành công: hàm (dữ liệu) {
      alert ('Horray cuộc gọi AJAX đã thành công!');
    },
    error: function (xhr, error) {
      alert ('Sai lầm thần thánh batman!');
    }
  });
}
 

Bản chất của lệnh gọi AJAX

Các lệnh gọi AJAX có thể là Không đồng bộ hoặc Đồng bộ. Không đồng bộ có nghĩa là trình duyệt sẽ thực hiện yêu cầu AJAX và tiếp tục làm những việc khác. Đồng bộ có nghĩa là trình duyệt sẽ dừng những gì nó đang làm cho đến khi lệnh gọi AJAX hoàn tất. Dưới đây là một ví dụ về sự khác biệt trong hai mã khôn ngoan:

  // Cuộc gọi không đồng bộ
// Đây là mặc định
$ .ajax ({
  url: '/server.php',
  thành công: hàm (dữ liệu) {
    alert ('Horray cuộc gọi AJAX đã thành công!');
  },
  error: function (xhr, error) {
    alert ('Sai lầm thần thánh batman!');
  }
});
// Điều này sẽ được gọi ngay lập tức
myFunction ();
 

Bây giờ cho một cuộc gọi đồng bộ:

  // Một cuộc gọi đồng bộ
$ .ajax ({
  url: '/server.php',
  async: false, // đặt thuộc tính ở đây
  thành công: hàm (dữ liệu) {
    alert ('Horray cuộc gọi AJAX đã thành công!');
  },
  error: function (xhr, error) {
    alert ('Sai lầm thần thánh batman!');
  }
});
// Điều này sẽ không được gọi cho đến khi AJAX trả về!
myFunction ();
 

CẢNH BÁO : Cuộc gọi đồng bộ khiến trình duyệt không thể thực hiện bất kỳ điều gì cho đến khi trình duyệt hoàn tất cuộc gọi. Điều này có thể làm khóa trình duyệt! Chỉ sử dụng điều này nếu bạn THỰC SỰ BIẾT BẠN ĐANG LÀM GÌ! 99% thời gian bạn muốn gọi AJAX không đồng bộ.

Xem Thêm  Cách thêm CSS vào HTML (các kiểu Liên kết, Nhúng, Nhập & Nội tuyến) - sử dụng tệp css trong html

Lưu ý : Cuộc gọi đồng bộ không có nghĩa là bạn có thể thoát khỏi việc không đặt trình xử lý cuộc gọi lại. Bạn vẫn phải xử lý kết quả bằng cách sử dụng lệnh gọi lại.

Đường dẫn Giao tiếp Máy khách & gt; Máy chủ

Đường dẫn giao tiếp máy chủ AJAX

Hình ảnh này minh họa cách AJAX được sử dụng để giao tiếp với máy chủ từ xa. Đầu tiên, mã AJAX giao diện với một đối tượng trình duyệt, đối tượng này thực hiện cuộc gọi thực tế tới máy chủ. Sau đó, máy chủ xử lý yêu cầu và gửi kết quả trở lại trình duyệt, trình duyệt này sau đó sẽ xem xét kết quả của cuộc gọi để xác định xem nó cần gọi trình xử lý thành công hay trình xử lý lỗi. Tuy nhiên, có một vấn đề có thể ngăn cản giao tiếp, thường được gọi là chính sách xuất xứ giống nhau.

Lưu ý Từ quan điểm của máy chủ, lệnh gọi AJAX sẽ trông như thể máy khách đã đưa ra yêu cầu theo cách thủ công. Điều đó có nghĩa là máy chủ có thể sử dụng những thứ như phiên và dữ liệu khách hàng cụ thể khác.

Chính sách xuất xứ giống nhau

Về cơ bản, cùng một chính sách về nguồn gốc có nghĩa là nếu cuộc gọi AJAX của bạn đến từ một trang được lưu trữ trên http://www.mysite.com , thì bạn không thể thực hiện cuộc gọi đến http: //www.othersite.com như minh họa ở đây:

Chính sách nguồn gốc chặn yêu cầu

Một cách mà bạn có thể thực hiện là thông qua dịch vụ proxy. Đây là nơi bạn giao tiếp với một tập lệnh trên cùng một máy chủ, đến lượt nó lại giao diện với trang web bạn muốn, chẳng hạn như thông qua các lệnh gọi CURL. Phần sau minh họa phương pháp proxy này được đề cập:

Giải pháp thay thế proxy cùng nguồn gốc

CẢNH BÁO Lưu ý rằng máy chủ của bên thứ ba sẽ không xem yêu cầu đến từ máy khách mà là yêu cầu đến từ máy chủ. Một số máy chủ có cùng một IP thực hiện nhiều cuộc gọi đến máy chủ của họ. Điều này có thể khiến bạn bị chặn, vì vậy, hãy xác minh rằng trang web được đề cập là ổn với thiết lập này.

Xem Thêm  Cách đọc và ghi tệp văn bản trong Java - làm thế nào để viết trong tệp văn bản trong java

Lưu ý : Có một số trường hợp không áp dụng chính sách nguồn gốc tương tự, chẳng hạn như lệnh gọi tiện ích mở rộng Google Chrome (bạn phải đặt quyền cho từng trang web), lệnh gọi Greasemonkey nhất định và Adobe Air .

Bây giờ, khái niệm cuối cùng cần xem xét lại là cách máy chủ trả về dữ liệu để máy khách tương tác.

Trả về dữ liệu AJAX

Vì đây là một tùy chọn rất phổ biến, chúng tôi sẽ sử dụng JSON, hoặc (J) ava (S) cript (O) bject (N) otation, để trả lại dữ liệu. Về cơ bản JSON trông như thế này:

  {
    màu đỏ",
    giá trị: "# f00"
}
 

Chuỗi này có thể được chuyển thành một đối tượng JavaScript, giúp dễ dàng truy cập vào các kết quả của máy chủ.

CẢNH BÁO Vì đây là JavaScript hợp lệ, nhiều người sử dụng eval () để nhanh chóng tạo các đối tượng js. Vui lòng không làm điều này . Nó mở ra cho bạn các vấn đề bảo mật nếu kết quả có mã độc hại trong đó. Luôn sử dụng trình phân tích cú pháp JSON để kiểm tra dữ liệu an toàn!

Sử dụng ví dụ trước, chúng ta có thể truy cập các giá trị khác nhau như sau:

  $ .ajax ({
  url: '/server.php',
  // Bạn nên khai báo kiểu trả về một cách rõ ràng
  dataType: 'json',
  thành công: function (json) {
    alert ("Màu là:" + json.color + "và giá trị là:" + json.value);
  },
  error: function (xhr, error) {
    alert ('Sai lầm thần thánh batman!');
  }
});
 

Lưu ý rằng việc truy cập các giá trị của trả về dễ dàng như thế nào. Một tùy chọn phổ biến khác là truy xuất HTML từ máy chủ và đưa nó vào & lt; div & gt; hoặc phần tử khác. Đây là một ví dụ về điều này:

  $ .ajax ({
  url: '/server.php',
  // Bạn nên khai báo kiểu trả về một cách rõ ràng
  dataType: 'html',
  thành công: function (html) {
    $ ("# mydiv"). html (html);
  },
  error: function (xhr, error) {
    alert ('Sai lầm thần thánh batman!');
  }
});

// Một số JS / HTML tại đây

& lt; div id = "mydiv" & gt; & lt; / div & gt;
 

Trong trường hợp trả lại thành công, nội dung của & lt; div & gt; sẽ được điền vào HTML trả về.

VIỆC CẦN LÀM : Đối phó với việc bảo mật chống lại việc đưa vào HTML độc hại?

Kết luận

Điều này kết thúc bài đăng trên wiki cộng đồng trên AJAX. Tôi hy vọng nó sẽ hữu ích trong việc giúp bạn hiểu AJAX hoặc là một cách dễ dàng để trả lời các câu hỏi phổ biến về nó.


Xem thêm những thông tin liên quan đến chủ đề ajax làm gì

Học Full-stack từ đầu mất bao lâu? Phân biệt AJAX và SPA

alt

  • Tác giả: Phạm Huy Hoàng
  • Ngày đăng: 2018-08-10
  • Đánh giá: 4 ⭐ ( 5162 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các bạn xem danh sách câu hỏi trong mục description nha!

    Những câu hỏi trong kì này:
    – Lộ trình để trở thành master Java
    – Làm sao để viết một API cho hệ thống
    – Học full-stack từ đầu sẽ mất bao lâu
    – Em học về Web nhưng phải làm WinForm. Liệu tương lai WinForm có phát triển không
    – Học Android có cần học kĩ Java hay không
    – Tài liệu tiếng Anh đọc được nhưng xem clip không nghe được, làm sao để cải thiện
    – Phân biệt AJAX và SPA

    Channel Tôi Đi Code Dạo là nơi mình chia sẻ những kiến thức, kinh nghiệm về ngành lập trình mà mình đạt được trong quá trình làm việc. Những kiến thức này sẽ biến các bạn từ một coder trở thành developer – lập trình viên thứ thiệt.
    Nhớ ghé thăm và subscrible channel để xem clip mới vào 8H TỐI T3 VÀ T6 hàng tuần nha!

    Ghé thăm mình tại:
    Blog: https://toidicodedao.com/
    Fanpage: https://www.facebook.com/toidicodedao/

Ajax Là Gì- Lý Do Tại Sao Bạn Nên Sử Dụng Công Nghệ Ajax

  • Tác giả: itnavi.com.vn
  • Đánh giá: 4 ⭐ ( 2441 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Ajax là gì? Lợi ích và cách thức sử dụng ajax tối ưu nhất

  • Tác giả: bachkhoawiki.com
  • Đánh giá: 3 ⭐ ( 2675 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có thể đối với nhiều người ajax là một thuật ngữ mới lạ, nhưng đối với một lập trình viên chuyên về thiết kế website ajax chắc chắn là một thuật ngữ vô cùng quen thuộc. Vậy ajax là gì? Tại sao nên dùng ajax? Theo dõi bài viết của BachkhoaWiki để được giải đáp nhé.

AJAX là gì? Làm thế nào để sử dụng AJAX?

  • Tác giả: hocjavascript.net
  • Đánh giá: 5 ⭐ ( 3123 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, chúng ta sẽ cùng tìm hiểu AJAX là gì và cách thức hoạt động của nó. Nhưng trước khi tìm hiểu các thuật ngữ này, hãy cũng mìn

AJAX Là gì? Cách thức hoạt động và lợi ích mà nó mang lại

  • Tác giả: topdev.vn
  • Đánh giá: 5 ⭐ ( 7799 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: AJAX là phương thức trao đổi dữ liệu với máy chủ và cập nhật một hay nhiều phần của trang web. Ajax là một thuật ngữ chung cho các kỹ thuật Javascript khác nhau được sử dụng để kết nối với máy chủ web tự động mà không nhất thiết phải tải lại trang. AJAX là viết tắt của cụm từ Asynchronous Javascript and XML.

AJAX là gì? 3 phương thức trong AJAX

  • Tác giả: accesstrade.vn
  • Đánh giá: 5 ⭐ ( 9146 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: AJAX là gì trong phát triển phần mềm nói chung và ứng dụng di động nói riêng? AJAX là chữ viết tắt của cụm từ Asynchronous Javascript and XML. Là phương thức

AJAX và Cách hoạt động của AJAX

  • Tác giả: itzone.com.vn
  • Đánh giá: 4 ⭐ ( 3753 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: The ITZone platform Vietnam is the community for anyone interested in news, training seminars, presentations etc in the IT industry

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Tiếp tục Java - java cho vòng lặp tiếp tục

By ads_php