2010-10-06 32 views
142

Sự khác nhau giữa $.ajax()$.get()$.load() là gì?

Điều nào là tốt hơn để sử dụng và trong điều kiện nào?

+0

Có thể trùng lặp với [khác biệt giữa $ ("# id"). Tải và $ .ajax?] (Http://stackoverflow.com/questions/2076642/difference-between-id-load-and-ajax) – Athafoud

Trả lời

202

$.ajax() là cấu hình có thể định cấu hình tốt nhất, nơi bạn có được quyền kiểm soát chi tiết hơn đối với tiêu đề HTTP và như vậy. Bạn cũng có thể truy cập trực tiếp đối tượng XHR bằng cách sử dụng phương thức này. Xử lý lỗi chi tiết hơn một chút cũng được cung cấp. Do đó có thể phức tạp hơn và thường không cần thiết, nhưng đôi khi rất hữu ích. Bạn phải đối phó với các dữ liệu trả lại cho mình với một cuộc gọi lại.

$.get() chỉ là viết tắt của $.ajax() nhưng tóm tắt một số cấu hình, đặt giá trị mặc định hợp lý cho những gì nó ẩn khỏi bạn. Trả về dữ liệu cho một cuộc gọi lại. Nó chỉ cho phép các yêu cầu GET được kèm theo hàm $.post() cho sự trừu tượng tương tự, chỉ cho POST

.load() tương tự như $.get() nhưng thêm chức năng cho phép bạn xác định vị trí chèn dữ liệu vào tài liệu. Do đó thực sự chỉ có thể sử dụng khi cuộc gọi chỉ sẽ dẫn đến HTML. Nó được gọi hơi khác so với các cuộc gọi, toàn cục, khác, vì nó là một phương thức được gắn với một phần tử DOM bọc jQuery cụ thể. Do đó, người ta sẽ làm: $('#divWantingContent').load(...)

Cần lưu ý rằng tất cả các $.get(), $.post(), .load() là tất cả chỉ là giấy gói cho $.ajax() như nó được gọi trong nội bộ.

Xem thêm chi tiết trong Ajax tài liệu của jQuery: http://api.jquery.com/category/ajax/

+9

Có bất kỳ sự khác biệt về hiệu suất nào không? –

+0

@ UzairAli no, theo nghĩa đen, bạn có các biến bạn truyền vào nó và sử dụng chúng để thực thi jQuery.ajax() – lisburnite

+0

Tuyệt vời, .load() chỉ là HTML thuần túy và .get() hữu ích cho nhiều thứ hơn. –

6

Rất cơ bản nhưng

  • $.load(): Load một mảnh của html vào vùng chứa DOM.
  • $.get(): Sử dụng tính năng này nếu bạn muốn thực hiện NHẬN gọi và phát rộng rãi với phản hồi.
  • $.post(): Sử dụng tùy chọn này nếu bạn muốn thực hiện cuộc gọi POST và không muốn tải phản hồi cho một số vùng chứa DOM.
  • $.ajax(): Sử dụng tùy chọn này nếu bạn cần làm điều gì đó khi XHR không thành công hoặc bạn cần chỉ định tùy chọn ajax (ví dụ: bộ nhớ cache: đúng) khi đang di chuyển.
26

Các phương pháp cung cấp các lớp trừu tượng khác nhau.

  • $.ajax() cung cấp cho bạn toàn quyền kiểm soát yêu cầu Ajax. Bạn nên sử dụng nó nếu các phương pháp khác không thỏa mãn nhu cầu của bạn.

  • $.get() thực hiện yêu cầu Ajax GET. Dữ liệu được trả về (có thể là bất kỳ dữ liệu nào) sẽ được chuyển tới trình xử lý gọi lại của bạn.

  • $(selector).load() sẽ thực hiện yêu cầu Ajax GET và sẽ đặt nội dung của dữ liệu được trả về đã chọn (phải là văn bản hoặc HTML).

Tùy thuộc vào tình huống bạn nên sử dụng phương pháp nào. Nếu bạn muốn làm công cụ đơn giản, không cần phải bận tâm với $.ajax().

Ví dụ: bạn sẽ không sử dụng $.load(), nếu dữ liệu trả về sẽ là JSON cần được xử lý thêm. Ở đây bạn có thể sử dụng $.ajax() hoặc $.get().

9

http://api.jquery.com/jQuery.ajax/

jQuery.ajax()

Mô tả: Thực hiện một yêu cầu không đồng bộ HTTP (Ajax).

Monty đầy đủ, cho phép bạn thực hiện bất kỳ loại yêu cầu Ajax nào.


http://api.jquery.com/jQuery.get/

jQuery.get()

Mô tả: Load dữ liệu từ máy chủ sử dụng một yêu cầu HTTP GET.

Chỉ cho phép bạn thực hiện yêu cầu HTTP GET, yêu cầu cấu hình ít hơn một chút.


http://api.jquery.com/load/

.load()

Mô tả: Load dữ liệu từ máy chủ và đặt HTML trở thành các yếu tố phù hợp.

Chuyên lấy dữ liệu và đưa vào phần tử.

3

Lưu ý quan trọng:jQuery.load() phương pháp có thể làm không chỉ GET mà còn POST yêu cầu, nếu dữ liệu tham số được cung cấp (xem: http://api.jquery.com/load/)

dữ liệu Loại: PlainObject hoặc String Một đối tượng đồng bằng hoặc chuỗi được gửi đến máy chủ với yêu cầu.

Phương thức yêu cầu Phương thức yêu cầu POST nếu dữ liệu được cung cấp dưới dạng đối tượng ; nếu không, GET được giả định.

Example: pass arrays of data to the server (POST request) 
$("#objectID").load("test.php", { "choices[]": [ "Jon", "Susan" ] }); 
3

Mọi người đều có quyền. Chức năng .load, .get.post, là các cách khác nhau để sử dụng hàm .ajax.

Cá nhân, tôi thấy hàm raw .ajax rất khó hiểu và thích sử dụng tải, tải hoặc đăng khi tôi cần.

POST có cấu trúc sau:

$.post(target, post_data, function(response) { }); 

GET có điều sau đây:

$.get(target, post_data, function(response) { }); 

TẢI có sau đây:

$(*selector*).load(target, post_data, function(response) { }); 

Như bạn có thể thấy, có sự khác biệt chút giữa chúng, vì tình huống tha t xác định cái nào cần sử dụng. Cần gửi thông tin đến một tệp nội bộ? Sử dụng .post (đây sẽ là hầu hết các trường hợp). Cần gửi thông tin theo cách mà bạn có thể cung cấp liên kết đến thời điểm cụ thể? Sử dụng .get. Cả hai đều cho phép gọi lại nơi bạn có thể xử lý phản hồi của các tệp.

Lưu ý quan trọng là tải hành vi theo hai cách khác nhau. Nếu bạn chỉ cung cấp url của tài liệu đích, nó sẽ hành động như là một (và tôi nói hành động vì tôi đã kiểm tra $_POST trong PHP được gọi là trong khi sử dụng hành vi .load mặc định và phát hiện $_POST, không phải là $_GET; sẽ chính xác hơn để nói nó hoạt động như .post mà không có bất kỳ đối số nào); tuy nhiên, như http://api.jquery.com/load/ nói, một khi bạn cung cấp một mảng đối số cho hàm, nó sẽ POST thông tin vào tệp. Bất kể trường hợp nào, hàm .load sẽ chèn trực tiếp thông tin vào một phần tử DOM, trong đó các trường hợp MANY rất dễ đọc và rất trực tiếp; nhưng vẫn cung cấp một cuộc gọi lại nếu bạn muốn làm điều gì đó hơn với phản hồi. Ngoài ra, .load cho phép bạn trích xuất một khối mã nhất định từ một tệp, cho phép bạn lưu danh mục, ví dụ: trong tệp html và truy xuất các phần của nó (các mục) trực tiếp vào các phần tử DOM.

0

Mọi người đều giải thích chủ đề rất rõ. Có một điểm nữa tôi muốn thêm về phương thức .load().

Theo Load document nếu bạn thêm công cụ chọn hậu tố vào url dữ liệu thì nó sẽ không thực thi tập lệnh khi tải nội dung.

Working Plunker

  $(document).ready(function(){ 
       $("#secondPage").load("mySecondHtmlPage.html #content"); 
      }) 

Mặt khác, sau khi gỡ bỏ chọn trong url, script trong nội dung mới sẽ chạy. Hãy thử this example

sau khi gỡ bỏ # content trong url trong file index.html

  $(document).ready(function(){ 
       $("#secondPage").load("mySecondHtmlPage.html"); 
      }) 

Không có tính năng trong xây dựng như vậy được cung cấp bởi các phương pháp khác trong cuộc thảo luận.

-1

Cả hai được sử dụng để gửi một số dữ liệu và nhận một số phản hồi bằng cách sử dụng dữ liệu đó.

GET: Nhận thông tin được lưu trữ trong máy chủ. (tức là tìm kiếm, tweet, thông tin cá nhân). Nếu bạn muốn gửi thông tin, sau đó nhận yêu cầu gửi yêu cầu bằng cách sử dụng process.php?name=subroto Vì vậy, về cơ bản, nó sẽ gửi thông tin qua url. Url không thể xử lý hơn 2036 char. Vì vậy, cho bài đăng blog bạn có thể nhớ nó là không thể?

POST: Đăng làm điều tương tự như GET. Đăng ký người dùng, Đăng nhập người dùng, Gửi dữ liệu lớn, Đăng blog. Nếu bạn cần gửi thông tin bảo mật, hãy sử dụng bài đăng hoặc dữ liệu lớn vì nó không đi qua url.

AJAX: $.get()$.post() chứa các tính năng là tập con của $.ajax(). Nó có nhiều cấu hình hơn.

$.get() phương pháp, là một loại viết tắt cho $.ajax(). Khi sử dụng $.get(), thay vì truyền trong một đối tượng, bạn chuyển đối số. Tối thiểu, bạn sẽ cần hai đối số đầu tiên, là URL của tệp bạn muốn truy xuất (ví dụ: test.txt) và gọi lại thành công.

Các vấn đề liên quan