Làm thế nào tôi có thể tìm ra phương pháp nào là tốt nhất cho một tình huống? Ai có thể cung cấp một số ví dụ để biết sự khác biệt về chức năng và hiệu suất?
Câu trả lời:
XMLHttpRequest là đối tượng trình duyệt thô mà jQuery kết hợp thành một biểu mẫu dễ sử dụng hơn và đơn giản hơn và chức năng nhất quán trên nhiều trình duyệt.
jQuery.ajax là một trình yêu cầu Ajax chung trong jQuery có thể thực hiện bất kỳ yêu cầu nào về kiểu và nội dung.
jQuery.getvà jQuery.postmặt khác chỉ có thể đưa ra các yêu cầu GET và POST. Nếu bạn không biết đây là những gì, bạn nên kiểm tra giao thức HTTP và tìm hiểu một chút. Bên trong hai chức năng này sử dụng jQuery.ajaxnhưng chúng sử dụng các cài đặt cụ thể mà bạn không phải tự đặt do đó đơn giản hóa yêu cầu GET hoặc POST so với việc sử dụng jQuery.ajax. GET và POST vẫn là các phương thức HTTP được sử dụng nhiều nhất (so với DELETE, PUT, HEAD hoặc thậm chí các exotics hiếm khi được sử dụng khác).
Tất cả các hàm jQuery đều sử dụng XMLHttpRequestđối tượng trong nền, nhưng cung cấp thêm chức năng mà bạn không phải tự thực hiện.
Vì vậy, nếu bạn đang sử dụng jQuery Tôi khuyên bạn nên mạnh mẽ mà bạn sử dụng chức năng jQuery chỉ . Quên XMLHttpRequesthoàn toàn. Sử dụng các biến thể hàm yêu cầu jQuery phù hợp và sử dụng trong mọi trường hợp khác $.ajax(). Vì vậy, đừng quên có các hàm jQuery Ajax phổ biến khác liên quan đến $.get(), $.post()và $.ajax(). Bạn chỉ có thể sử dụng $.ajax()cho tất cả các yêu cầu của mình, nhưng bạn sẽ phải viết thêm một chút mã, vì nó cần thêm một chút tùy chọn để gọi nó.
Nó giống như việc bạn có thể mua cho mình một động cơ ô tô mà bạn phải tạo ra một chiếc xe hoàn toàn xung quanh nó với hệ thống lái, phanh, v.v. Các nhà sản xuất ô tô sản xuất những chiếc xe hoàn chỉnh, với giao diện thân thiện (bàn đạp, vô lăng, v.v.) vì vậy bạn không cần phải tự mình làm tất cả.
$.postvà $.getđiều duy nhất chậm hơn là một lượng nhỏ mã trước khi $.ajaxđược gọi. Nhưng nếu bạn viết các quy trình của riêng mình bằng cách sử dụng XHR trực tiếp, mọi thứ có thể được tối ưu hóa một chút nhưng có thể nhiều lỗi hơn. Tôi khuyên bạn nên giữ mình ở phía jQuery. Nó sẽ làm cho cuộc sống của bạn dễ dàng hơn. Và xem xét thực tế là cuộc gọi không đồng bộ mất nhiều thời gian hơn so với mã phát hành nó, bạn có thể sẽ không nhận thấy sự khác biệt rõ ràng giữa các cuộc gọi này.
$.ajaxđể thực hiện các cuộc gọi của mình nhất quán ở mọi nơi nếu bạn muốn. Miễn là bạn không sử dụng XHR trực tiếp, bạn có thể thực hiện theo cả hai cách.
Mỗi người trong số họ sử dụng XMLHttpRequest. Đây là những gì trình duyệt sử dụng để thực hiện yêu cầu. jQuery chỉ là một thư viện JavaScript và phương thức $ .ajax được sử dụng để tạo một XMLHttpRequest.
$ .post và $ .get chỉ là phiên bản viết tắt của $.ajax. Chúng thực hiện khá nhiều điều tương tự nhưng giúp việc viết yêu cầu AJAX nhanh hơn - $.postthực hiện yêu cầu HTTP POST và $.getthực hiện yêu cầu HTTP GET.
GETyêu cầu sẽ gửi tất cả dữ liệu trong chuỗi URL - có thể bị giới hạn bởi máy khách / máy chủ ( stackoverflow.com/questions/2659952/… ). Một POSTyêu cầu gửi tất cả dữ liệu trong tiêu đề, vì vậy giới hạn kích thước URL không phải là vấn đề (trừ khi bạn có tên tệp và thư mục thực sự dài cho tập lệnh của mình!).
GET. Nếu bạn đang tìm kiếm để gửi một cái gì đó (ví dụ như đăng một tweet) sau đó sử dụng POST,
jQuery.getlà một trình bao bọc jQuery.ajax, là một trình bao bọc cho XMLHttpRequest.
XMLHttpRequest và API tìm nạp (thử nghiệm tại thời điểm này) là duy nhất trong DOM, vì vậy sẽ là nhanh nhất.
Tôi thấy nhiều thông tin không còn chính xác nữa, vì vậy tôi đã tạo một trang thử nghiệm nơi mọi người có thể thử nghiệm phiên bản từ phiên bản nào tốt nhất bất kỳ lúc nào:
https://jsperf.com/xhr-vs-jquery-ajax-vs-get-vs-fetch
Từ các thử nghiệm của tôi ngày hôm nay cho thấy rằng chỉ jQuery không phải là giải pháp sạch hoặc thậm chí là nhanh, kết quả đối với tôi trên thiết bị di động hoặc máy tính để bàn cho thấy jQuery chậm hơn XHR2 ít nhất 80%, nếu bạn đang sử dụng quá nhiều ajax, trên thiết bị di động, sẽ mất rất nhiều thời gian để tải một trang web đơn giản.
Bản thân việc sử dụng cũng có trong liên kết.
jQuery.post và jQuery.get mô phỏng các lần tải trang điển hình, có nghĩa là bạn nhấp vào nút gửi và nó sẽ đưa bạn đến một trang mới (hoặc tải lại cùng một trang). đăng và nhận hơi khác nhau về cách thức mà dữ liệu được gửi đến máy chủ (bạn có thể tìm thấy bài viết hay về nó tại đây .
jQuery.ajax và XMLHttpRequest là tải trang tương tự như đăng và tải, ngoại trừ trang không thay đổi. Bất kỳ thông tin nào mà máy chủ trả về đều có thể được sử dụng cục bộ bằng javascript để sử dụng theo bất kỳ cách nào, bao gồm cả việc sửa đổi bố cục trang. Chúng thường được sử dụng để thực hiện công việc không đồng bộ trong khi người dùng vẫn có thể điều hướng trang. Ví dụ tốt về điều này sẽ là khả năng tự động hoàn thành bằng cách tải động từ các giá trị cơ sở dữ liệu để hoàn thành một trường văn bản. Sự khác biệt cơ bản giữa jQuery.ajax và XMLHttpRequest là jQuery.ajax sử dụng XMLHttpRequest để đạt được hiệu quả tương tự nhưng với giao diện đơn giản hơn. Nếu bạn sử dụng jQuery, tôi khuyên bạn nên gắn bó với jQuery.ajax.
Bài cũ. nhưng tôi vẫn muốn trả lời, một điểm khác biệt mà tôi phải đối mặt khi làm việc với Nhân viên web (javascript)
nhân viên web không thể có bất kỳ quyền truy cập cấp giao diện người dùng nào. Điều đó có nghĩa là bạn không thể truy cập bất kỳ phần tử DOM nào trong mã JavaScript mà bạn định chạy bằng cách sử dụng web worker. Không thể truy cập các đối tượng như window, document và cha mẹ trong mã web-worker.
Như chúng ta biết jQuery thư viện gắn liền với HTML DOM và việc cho phép nó sẽ vi phạm quy tắc "không có quyền truy cập DOM". Điều này có thể hơi khó khăn vì không thể sử dụng các phương thức như jQuery.ajax, jQuery.post, jQuery.get trong web worker . May mắn thay, bạn có thể sử dụng đối tượng XMLHttpRequest để thực hiện các yêu cầu Ajax.
Đối với các phương thức jQuery, .postvà .getchỉ đơn giản là thực hiện .ajaxnội bộ, mục đích của chúng là loại bỏ một số tùy chọn không cần thiết .ajaxvà cung cấp một số giá trị mặc định phù hợp với loại yêu cầu đó.
Tôi nghi ngờ có nhiều khác biệt về hiệu suất giữa bất kỳ cái nào trong số 3 cái.
Bản thân .ajaxphương thức này thực hiện một XMLHttpRequest, nó sẽ được tối ưu hóa rất nhiều theo phần còn lại của jQuery, nhưng nó có thể sẽ không hiệu quả bằng nếu bạn tự điều chỉnh toàn bộ tương tác .. nhưng đó là sự khác biệt giữa việc viết nhiều mã hoặc viết lách jQuery.ajax.