Thực đơn
trang chủTrình duyệt

Ví dụ về việc sử dụng ajax. Đang nhận dữ liệu từ máy chủ. Xử lý yêu cầu thành công

Hầu hết các trang web hiện đại đều sử dụng công nghệ có tên AJAX để xử lý nhanh chóng và hiệu quả tương tác hiệu quả với một vị khách. AJAX đã trở thành một phương pháp rất phổ biến để lấy dữ liệu từ máy chủ trong lý lịch Và cập nhật động trang.

Phát triển mã JavaScript để triển khai AJAX từ đầu là một quá trình rất tốn thời gian và tẻ nhạt. Tuy nhiên, nhiều Thư viện JavaScript, bao gồm cả jQuery, có cách triển khai AJAX cấp cao tuyệt vời dưới dạng một tập hợp các phương thức và chức năng giúp việc xây dựng trang web trở nên dễ dàng và nhanh chóng hơn.

Trong loạt bài hướng dẫn này, chúng ta sẽ xem xét các kiến ​​thức cơ bản về xây dựng các yêu cầu AJAX bằng jQuery. Các chủ đề sau đây sẽ được đề cập:

  • Công nghệ AJAX là gì? Làm thế nào nó hoạt động? Ưu điểm của nó là gì?
  • Làm thế nào để làm nó Nhiều loại khác nhau Yêu cầu AJAX sử dụng jQuery?
  • Gửi dữ liệu đến máy chủ bằng các yêu cầu AJAX.
  • Xử lý và trích xuất dữ liệu từ các phản hồi AJAX từ máy chủ.
  • Làm cách nào để tùy chỉnh xử lý AJAX trong jQuery và thay đổi cài đặt mặc định?

Lưu ý: Hướng dẫn tập trung vào phần phía máy khách của JavaScript. Nhưng việc phát triển phía máy chủ cũng khá đơn giản. Để có thông tin đầy đủ hơn, bạn nên nghiên cứu tài liệu về các ngôn ngữ lập trình phía máy chủ, chẳng hạn như PHP.

AJAX là gì và nó hữu ích như thế nào?

AJAX là một kỹ thuật phát triển ứng dụng web trong đó mã JavaScript chạy trong trình duyệt của khách truy cập giao tiếp không đồng bộ với máy chủ web, nghĩa là ở chế độ nền. Sự khác biệt so với các ứng dụng web thông thường như sau:

  • Một trang web thông thường chứa các liên kết hoặc biểu mẫu mà khi được nhấp vào hoặc gửi sẽ tạo yêu cầu tới một URL mới trên máy chủ web. Máy chủ gửi hoàn toàn trang mới HTML mà trình duyệt sau đó xuất ra, thay thế trang gốc. Cách tiếp cận này tốn rất nhiều thời gian và không tốt cho khách truy cập vì họ phải đợi trang mới tải.
  • Khi sử dụng công nghệ AJAX, mã JavaScript sẽ đưa ra yêu cầu tới một URL trên máy chủ. Mã cũng có thể gửi dữ liệu cùng với yêu cầu. Mã JavaScript sau đó xử lý phản hồi của máy chủ và hành động tương ứng. Ví dụ: có thể thực hiện tính toán với dữ liệu được trả về, có thể thêm hoặc cập nhật tiện ích trên trang hoặc có thể gửi thông báo cho khách truy cập về việc cập nhật cơ sở dữ liệu trên máy chủ.

Vì yêu cầu AJAX chạy ở chế độ nền nên mã JavaScript (và khách truy cập) có thể tiếp tục tương tác với trang trong khi yêu cầu được xử lý. Quá trình này bị ẩn khỏi khách truy cập, người không cần rời khỏi trang mình đang xem khoảnh khắc này thời gian. Cách tiếp cận này làm cho các trang AJAX trở nên rất dễ chịu khi làm việc.

Điểm cơ bản của AJAX là đối tượng JavaScript XMLHttpRequest. Nó cung cấp một số phương thức như open(), send() và onreadystatechange() có thể được sử dụng khi gửi yêu cầu AJAX đến máy chủ và xử lý phản hồi ở chế độ nền.

Phát triển mã AJAX JavaScript trên nhiều trình duyệt có thể là một quá trình khá tẻ nhạt. May mắn thay, jQuery cung cấp cho bạn một số phương thức AJAX dễ sử dụng cho phép bạn loại bỏ nhiều thao tác cấp thấp.

Đối với những người tò mò hơn, từ AJAX là tên viết tắt của các chữ cái đầu tiên của biểu thức trong tiếng anh"J avaScript A nd X ML đồng bộ" (JavaScript và XML không đồng bộ). Tuy nhiên, thuật ngữ này có thể gây hiểu nhầm - yêu cầu không nhất thiết phải không đồng bộ và không nhất thiết phải sử dụng XML để gửi dữ liệu.

Thực hiện yêu cầu GET bằng $.get()

Phương thức $.get() của jQuery cung cấp một cách dễ dàng và Một cách thuận tiện thực hiện một yêu cầu AJAX đơn giản. Nó thực hiện yêu cầu bằng phương thức HTTP GET (được sử dụng để truy xuất các URL như trang và hình ảnh), thay vì phương thức POST (thường được sử dụng để gửi dữ liệu biểu mẫu).

Ở dạng đơn giản nhất, bạn có thể gọi một phương thức như thế này:

Url ở đâu địa chỉ URL nguồn tài nguyên mà từ đó phản hồi được mong đợi. Thông thường, đây là tập lệnh phía máy chủ thực hiện một số hành động và có thể trả về một số dữ liệu:

$.get("http://example.com/getForecast.php");

Mặc dù bạn cũng có thể yêu cầu một tài liệu tĩnh:

$.get("http://example.com/mypage.html");

Khi yêu cầu một URL, bạn có thể gửi dữ liệu kèm theo yêu cầu. Bạn có thể truyền dữ liệu trong chuỗi truy vấn, giống như với yêu cầu GET thông thường:

$.get("http://example.com/getForecast.php?city=rome&date=20120318");

Cách chính xác để làm điều tương tự là truyền đối tượng dữ liệu làm tham số thứ hai cho phương thức $.get(). Đối tượng dữ liệu phải chứa thông tin ở dạng cặp tên thuộc tính/giá trị thuộc tính. Ví dụ:

Dữ liệu Var = (thành phố: "rome", ngày: "20120318" ); $.get("http://example.com/getForecast.php", dữ liệu);

Ngoài ra, bạn có thể truyền dữ liệu tới phương thức $.get() dưới dạng chuỗi:

Dữ liệu Var = "city=rome&date=20120318"; $.get("http://example.com/getForecast.php", dữ liệu);

Nhận dữ liệu từ máy chủ

Cho đến nay, chúng ta đã xem xét các ví dụ về việc chỉ sử dụng $.get() để gửi yêu cầu đến máy chủ, bỏ qua mọi phản hồi mà tập lệnh phía máy chủ có thể tạo ra. Nhưng trong hầu hết các trường hợp, mã JavaScript của bạn sẽ chờ phản hồi từ tập lệnh phía máy chủ và xử lý dữ liệu nhận được.

Yêu cầu AJAX không đồng bộ, có nghĩa là nó chạy ở chế độ nền trong khi phần còn lại của mã JavaScript vẫn tiếp tục chạy. Vậy làm cách nào để nhận được phản hồi từ máy chủ khi yêu cầu được hoàn thành?

Bạn cần viết một hàm gọi lại sẽ được thực thi tự động khi yêu cầu AJAX hoàn thành và máy chủ gửi phản hồi. Ở mức tối thiểu, hàm của bạn phải chấp nhận dữ liệu được máy chủ trả về làm đối số đầu tiên:

Function myCallback(returnedData) ( // Chúng tôi xử lý dữ liệu returnData )

Khi hàm gọi lại được tạo, bạn có thể chuyển nó làm đối số thứ ba cho phương thức $.get():

Dữ liệu Var = (thành phố: "rome", ngày: "20120318" ); $.get("http://example.com/getForecast.php", data, myCallback);

Xác định kiểu dữ liệu phản hồi

Thông thường, phía máy chủ sẽ gửi dữ liệu ở một trong một số định dạng phổ biến, bao gồm XML, JSON, JavaScript hoặc HTML. Theo mặc định, jQuery cố gắng xác định định dạng phù hợp nhất và phân tích dữ liệu tương ứng. Nhưng tốt hơn hết là bạn nên xác định rõ ràng định dạng.

Để chỉ định định dạng, bạn cần truyền đối số thứ tư cho phương thức $.get(). Đối số này có thể là một chuỗi từ danh sách sau:

  • "xml"
  • "json"
  • "kịch bản"
  • "html"

Ví dụ: nếu bạn biết rằng tập lệnh máy chủ trả về dữ liệu ở định dạng JSON thì bạn gọi phương thức $.get() như sau:

$.get("http://example.com/getForecast.php", data, myCallback, "json");

Ví dụ về sử dụng phương thức $.get()

Đây là một ví dụ về việc tạo một yêu cầu AJAX bằng phương thức $.get() và xử lý đơn giản trả lời. Để ví dụ hoạt động, bạn cần tạo một tệp văn bản đơn giản trên máy chủ có tên getForecast.txt chứa văn bản tiếp theo:

("thành phố": "Vasyuki", "ngày": "18 tháng 3 năm 2012", "dự báo": "Lạnh buốt và ẩm ướt", "maxTemp": +1 )

Tệp này sẽ mô phỏng phản hồi ở định dạng JSON có thể được tạo bởi tập lệnh dự báo thời tiết trên máy chủ.

Sau đó, chúng tôi tạo trang showForecast.html trong cùng thư mục với getForecast.txt:

Dự báo thời tiết $(function() ( $("#getForecast").click(function() ( var data = ( city: "Vasyuki", date: "20120318" ); $.get("getForecast.txt", data , thành công, "json"); )); hàm thành công(dự báoData) ( var dự báo = dự báoData.city + " dự báo về " + dự báoData.date; dự báo += ": " + dự báoData.forecast + ". Nhiệt độ tối đa: " + dự báoData.maxTemp + "C"; cảnh báo(dự báo); ) )); Nhận dự báo thời tiết

Mở showForecast.html trong trình duyệt và nhấp vào nút "Nhận dự báo thời tiết". Trong cửa sổ tin nhắn, chúng tôi sẽ nhận được dự báo thời tiết từ máy chủ của chúng tôi.

Đây là cách mã hoạt động:

  • showForecast.html chứa yếu tố nút"Nhận dự báo thời tiết" với ID getForecast .
  • JavaScript ở đầu trang được thực thi ngay khi trang được tải và DOM ở trạng thái sẵn sàng.
  • Mã JavaScript trước tiên liên kết trình xử lý sự kiện nhấp chuột với nút #getForecast. Trình xử lý này thực hiện yêu cầu AJAX GET tới getForecast.txt, chuyển tên thành phố và ngày dự báo. Hàm gọi lại thành công() cũng được xác định, hàm này sẽ được thực thi khi yêu cầu hoàn thành. Định dạng của dữ liệu được máy chủ trả về được xác định là JSON.
  • Tệp getForecast.txt trả về dữ liệu dự báo cho trình duyệt ở định dạng JSON.
  • Hàm thành công() được gọi. jQuery phân tích cú pháp dữ liệu JSON nhận được từ getForecast.txt, chuyển đổi nó thành đối tượng JavaScript và chuyển nó vào hàm.
  • Hàm trả về một đối tượng dữ liệu dự báo và hiển thị thông báo chứa một số thuộc tính của đối tượng, bao gồm tên thành phố, dự báo và nhiệt độ.

    • Một ví dụ đơn giản, ngắn gọn minh hoạ cách hoạt động của một yêu cầu AJAX bằng phương thức $.get().

    AJAX là từ viết tắt của Asynchronous Javascript and XML. Trên thực tế, AJAX không công nghệ mới vì cả Javascript và XML đều đã có từ khá lâu thời gian dài và AJAX là sự tổng hợp của các công nghệ được chỉ định. AJAX thường được gắn liền với thuật ngữ Web 2.0 và được coi là ứng dụng Web mới nhất.

    Tại sử dụng AJAX không cần phải làm mới toàn bộ trang mỗi lần vì chỉ một phần cụ thể của trang được cập nhật. Điều này thuận tiện hơn nhiều vì bạn không phải đợi lâu và tiết kiệm hơn vì không phải ai cũng có Internet không giới hạn. Đúng, trong trường hợp này, nhà phát triển cần đảm bảo rằng người dùng biết những gì đang xảy ra trên trang. Điều này có thể được thực hiện bằng cách sử dụng các chỉ báo tải, tin nhắn dữ liệu đó đang được trao đổi với máy chủ. Bạn cũng phải hiểu rằng không phải tất cả các trình duyệt đều hỗ trợ AJAX (các phiên bản cũ hơn của trình duyệt và trình duyệt văn bản). Ngoài ra, người dùng có thể tắt Javascript. Vì vậy, không nên lạm dụng việc sử dụng công nghệ và sử dụng các phương thức thay thế trình bày thông tin trên trang web.

    Hãy tóm tắt những ưu điểm của AJAX:

    • Khả năng tạo giao diện Web tiện lợi
    • Tương tác người dùng tích cực
    • Dễ sử dụng
    AJAX sử dụng hai phương pháp làm việc với một trang web: thay đổi trang Web mà không cần tải lại và liên hệ động với máy chủ. Cách thứ hai có thể được thực hiện theo một số cách, đặc biệt là XMLHttpRequest, mà chúng ta sẽ nói đến và sử dụng kỹ thuật khung ẩn.

    Để trao đổi dữ liệu, một đối tượng XMLHttpRequest phải được tạo trên trang, đây là một loại đối tượng trung gian giữa Trình duyệt của người dùng và máy chủ (Hình 1). Sử dụng XMLHttpRequest, bạn có thể gửi yêu cầu đến máy chủ và cũng nhận được phản hồi dưới dạng nhiều loại dữ liệu khác nhau.

    Có hai cách để trao đổi dữ liệu với máy chủ. Phương thức đầu tiên là yêu cầu GET. Trong yêu cầu này, bạn truy cập một tài liệu trên máy chủ, chuyển các đối số của nó thông qua chính URL. Trong trường hợp này, về phía máy khách, sẽ hợp lý hơn khi sử dụng chức năng thoát Javascript để một số dữ liệu không làm gián đoạn yêu cầu.

    Phần máy khách, được viết bằng Javascript, phải cung cấp chức năng cần thiết để trao đổi an toàn với máy chủ và cung cấp các phương thức trao đổi dữ liệu theo bất kỳ cách nào ở trên. Phần máy chủ phải xử lý dữ liệu đầu vào và dựa vào đó, tạo ra thông tin mới (ví dụ: làm việc với cơ sở dữ liệu) và gửi lại cho máy khách. Ví dụ: để yêu cầu thông tin từ máy chủ, bạn có thể sử dụng yêu cầu GET thông thường truyền một số tham số nhỏ và để cập nhật thông tin hoặc thêm thông tin mới Bạn sẽ cần sử dụng yêu cầu POST vì nó cho phép bạn truyền lượng lớn dữ liệu.

    Như đã đề cập, AJAX sử dụng truyền dữ liệu không đồng bộ. Điều này có nghĩa là trong khi dữ liệu đang được truyền, người dùng có thể thực hiện các hành động cần thiết khác. Tại thời điểm này, người dùng sẽ được thông báo rằng một số loại trao đổi dữ liệu đang diễn ra, nếu không, người dùng sẽ nghĩ rằng đã xảy ra sự cố và có thể rời khỏi trang web hoặc gọi lại chức năng mà anh ta cho là “bị đóng băng”. Chỉ báo trong quá trình trao đổi dữ liệu Ứng dụng web 2.0 đóng một vai trò rất quan trọng: khách truy cập có thể chưa quen với cách cập nhật trang này.

    Phản hồi từ máy chủ có thể không chỉ là XML, như tên của công nghệ gợi ý. Ngoài XML, bạn có thể nhận được phản hồi ở dạng văn bản thuần túy hoặc JSON ( Đối tượng Javascript Ký hiệu). Nếu nhận được phản hồi trong văn bản thuần túy, thì nó có thể được hiển thị ngay lập tức trong vùng chứa trên trang. Khi nhận được phản hồi dưới dạng XML, phản hồi nhận được thường được xử lý tài liệu XMLở phía máy khách và chuyển đổi dữ liệu sang (X)HTML. Khi nhận được phản hồi ở định dạng JSON, máy khách chỉ cần thực thi mã nhận được (hàm eval của Javascript) để có được một đối tượng Javascript chính thức. Nhưng ở đây bạn cần phải cẩn thận và tính đến thực tế là mã độc có thể được truyền bằng công nghệ này, vì vậy trước khi thực thi mã nhận được từ máy chủ, bạn nên kiểm tra và xử lý cẩn thận. Có một thực tế giống như một yêu cầu "nhàn rỗi", trong đó không nhận được phản hồi nào từ máy chủ, chỉ có dữ liệu ở phía máy chủ được thay đổi.

    TRONG các trình duyệt khác nhau đối tượng này có những tính chất khác nhau nhưng nhìn chung thì giống nhau.

    Các phương thức đối tượng XMLHttpRequest

    Lưu ý rằng tên phương thức được viết theo kiểu Camel giống như các hàm Javascript khác. Hãy cẩn thận khi sử dụng chúng.

    Huỷ bỏ()- hủy yêu cầu hiện tại đến máy chủ.

    getAllResponseHeaders()- nhận tất cả các tiêu đề phản hồi từ máy chủ.

    getResponseHeader("header_name")- lấy tiêu đề được chỉ định.

    open("request_type", "URL", "không đồng bộ", "tên người dùng", "mật khẩu")- khởi tạo một yêu cầu đến máy chủ, chỉ định phương thức yêu cầu. Loại yêu cầu và URL là các tham số bắt buộc. Đối số thứ ba là giá trị boolean. Thông thường true luôn được chỉ định hoặc không được chỉ định gì cả (mặc định là true). Đối số thứ tư và thứ năm được sử dụng để xác thực (rất không an toàn khi lưu trữ dữ liệu xác thực trong tập lệnh vì bất kỳ người dùng nào cũng có thể xem tập lệnh).

    gửi("nội dung")- gửi Yêu cầu HTTPđến máy chủ và nhận được phản hồi.

    setRequestHeader("header_name", "value")- đặt giá trị tiêu đề yêu cầu.

    Thuộc tính của đối tượng XMLHttpRequest

    onreadystatechange- một trong những thuộc tính quan trọng nhất của đối tượng XMLHttpRequest. Sử dụng thuộc tính này, một trình xử lý được chỉ định sẽ được gọi bất cứ khi nào trạng thái của đối tượng thay đổi.

    trạng thái sẵn sàng- một con số cho biết trạng thái của đối tượng.

    phản hồivăn bản- biểu diễn phản hồi của máy chủ dưới dạng văn bản thuần túy (chuỗi).

    phản hồiXML- một đối tượng tài liệu tương thích với DOM nhận được từ máy chủ.

    trạng thái- trạng thái phản hồi từ máy chủ.

    văn bản trạng thái- văn bản trình bày trạng thái phản hồi từ máy chủ.

    Chúng ta hãy xem xét kỹ hơn thuộc tính ReadyState:

    • 0 - Đối tượng không được khởi tạo.
    • 1 – Đối tượng đang tải dữ liệu.
    • 2 - Đối tượng đã tải dữ liệu của nó.
    • 3 - Đối tượng không được tải đầy đủ nhưng người dùng có thể tương tác.
    • 4 – Đối tượng được khởi tạo đầy đủ; đã nhận được phản hồi từ máy chủ.
    Dựa trên trạng thái sẵn sàng của đối tượng mà bạn có thể cung cấp cho khách truy cập thông tin về giai đoạn của quá trình trao đổi dữ liệu với máy chủ và có thể thông báo cho họ về điều này một cách trực quan.

    Như đã đề cập ở trên, việc tạo đối tượng này cho từng loại trình duyệt là một quá trình riêng biệt.

    Ví dụ: để tạo một đối tượng trong các trình duyệt tương thích với Gecko, Konqueror và Safari, bạn cần sử dụng biểu thức sau:

    Yêu cầu Var = XMLHttpRequest mới();

    Và đối với Internet Explorer, phần sau được sử dụng:

    Yêu cầu Var = ActiveXObject mới ("Microsoft.XMLHTTP");

    Yêu cầu Var = ActiveXObject mới ("Msxml2.XMLHTTP");

    Bây giờ, để đạt được khả năng tương thích giữa nhiều trình duyệt, bạn cần kết hợp tất cả các chức năng thành một:

    Hàm CreateRequest() ( var Yêu cầu = false; if (window.XMLHttpRequest) ( //Các trình duyệt tương thích với tắc kè, Safari, Konqueror Yêu cầu = new XMLHttpRequest(); ) else if (window.ActiveXObject) ( // Trình duyệt web IE thử ( Yêu cầu = new ActiveXObject("Microsoft.XMLHTTP"); ) bắt (CatchException) ( Yêu cầu = new ActiveXObject("Msxml2.XMLHTTP"); ) ) if (!Request) ( cảnh báo ("Không thể tạo XMLHttpRequest"); ) Yêu cầu trả lại; )

    Sau tất cả những điều này, bạn có thể tạo đối tượng này và không phải lo lắng về hiệu suất trên trình duyệt phổ biến. Nhưng bạn có thể tạo một đối tượng ở những nơi khác nhau. Nếu bạn tạo nó trên toàn cầu thì chỉ có thể thực hiện được một yêu cầu tới máy chủ tại một thời điểm nhất định. Bạn có thể tạo một đối tượng mỗi khi có yêu cầu đến máy chủ (điều này gần như sẽ giải quyết được hoàn toàn vấn đề).

    Yêu cầu tới máy chủ

    Thuật toán yêu cầu máy chủ trông như thế này:

    • Kiểm tra sự tồn tại của XMLHttpRequest.
    • Đang khởi tạo kết nối đến máy chủ.
    • Gửi yêu cầu đến máy chủ.
    • Xử lý dữ liệu nhận được.
    Để tạo một yêu cầu đến máy chủ, chúng ta sẽ tạo một hàm nhỏ sẽ kết hợp các hàm cho yêu cầu GET và POST về mặt chức năng.

    /* Hàm gửi yêu cầu đến một tệp trên máy chủ r_method - loại yêu cầu: GET hoặc POST r_path - đường dẫn đến tệp r_args - các đối số như a=1&b=2&c=3... r_handler - hàm xử lý phản hồi từ server */ function SendRequest(r_method , r_path, r_args, r_handler) ( //Tạo một yêu cầu var Yêu cầu = CreateRequest(); // Kiểm tra lại sự tồn tại của yêu cầu if (!Request) ( return; ) //Gán một tùy chỉnh handler Yêu cầu.onreadystatechange = function() ( // Nếu quá trình trao đổi dữ liệu hoàn tất if (Request.readyState == 4) ( // Chuyển quyền điều khiển cho trình xử lý người dùng r_handler(Request); ) ) // Kiểm tra xem có cần thiết không thực hiện yêu cầu GET if (r_method.toLowerCase() == "get" && r_args.length > 0) r_path += "?" + r_args; // Khởi tạo kết nối request.open(r_method, r_path, true); r_method.toLowerCase() == "post") ( //Nếu đây là POST- request // Đặt tiêu đề request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf- 8"); //Gửi yêu cầu request.send(r_args); ) else ( //Nếu đây là yêu cầu GET //Gửi yêu cầu null.Request.send(null); ) )

    Việc tạo một yêu cầu đã trở nên dễ dàng hơn nhiều. Ví dụ: hãy viết một hàm sẽ nhận nội dung của một tệp trên máy chủ và xuất nó vào một vùng chứa.

    Function ReadFile(filename, container) ( //Tạo một hàm xử lý var Handler = function(Request) ( document.getElementById(container).innerHTML =Request.responseText; ) //Gửi yêu cầu SendRequest("GET",filename," ", Người xử lý);

    Đây là cách tương tác với máy chủ xảy ra.

    Xử lý phản hồi

    Trong ví dụ trước, chúng tôi đã tạo một hàm yêu cầu tới máy chủ. Nhưng về cơ bản nó không an toàn vì chúng tôi không xử lý trạng thái của đối tượng và trạng thái phản hồi từ máy chủ.

    Hãy thêm vào mã của chúng tôi để nó có thể hiển thị thông báo trực quan về quá trình tải.

    request.onreadystatechange = function() ( //Nếu quá trình trao đổi dữ liệu hoàn tất if (Request.readyState == 4) ( //Chuyển quyền điều khiển cho trình xử lý người dùng r_handler(Request); ) else ( //Thông báo cho người dùng về việc tải xuống ) ) ...

    Như bạn đã biết, đối tượng XMLHttpRequest cho phép bạn biết trạng thái phản hồi từ máy chủ. Hãy tận dụng cơ hội này.

    request.onreadystatechange = function() ( //Nếu quá trình trao đổi dữ liệu hoàn tất if (Request.readyState == 4) ( if (Request.status == 200) ( //Chuyển quyền điều khiển cho trình xử lý người dùng r_handler(Request); ) else ( // Chúng tôi thông báo cho người dùng về lỗi đã xảy ra) ) else ( // Thông báo cho người dùng về việc tải xuống ) ) ...

    Tùy chọn phản hồi của máy chủ

    Bạn có thể nhận một số loại dữ liệu từ máy chủ:

    • Văn bản thô
    Nếu bạn nhận được văn bản thuần túy, thì bạn có thể gửi ngay nó đến vùng chứa, tức là đến đầu ra. Khi nhận dữ liệu dưới dạng XML, bạn phải xử lý dữ liệu bằng các hàm DOM và trình bày kết quả bằng HTML.

    JSON là ký hiệu đối tượng Javascript. Với sự trợ giúp của nó, bạn có thể biểu diễn một đối tượng dưới dạng một chuỗi (ở đây bạn có thể đưa ra một sự tương tự với hàm tuần tự hóa). Khi nhận dữ liệu JSON, bạn phải thực thi nó để có được một đối tượng Javascript đầy đủ và thực hiện các thao tác cần thiết trên đó. Xin lưu ý rằng việc truyền và thực thi dữ liệu như vậy không an toàn. Bạn phải theo dõi những gì được thực hiện.

    Mã JSON mẫu:
    ("data": ( "misc": [ ("name" : "Phần tử JSON một", "type" : "Tiêu đề phụ 1" ), ("name" : "Phần tử JSON hai", "type" : " Phụ đề 2 " )] ) )

    Khi nhận được mã như vậy, hãy thực hiện hành động sau:

    Var dữ liệu phản hồi = eval("(" + request.responseText + ")")

    Sau khi thực thi mã này, đối tượng sẽ có sẵn cho bạn dữ liệu phản hồi.

    Làm việc với các ngôn ngữ lập trình phía máy chủ

    Loại công việc này không khác gì công việc bình thường. Ví dụ: tôi sẽ lấy PHP làm ngôn ngữ phía máy chủ. Không có gì thay đổi ở phía máy khách, nhưng phía máy chủ hiện được biểu thị bằng tệp PHP.

    Theo truyền thống, hãy bắt đầu bằng lời chào đến thế giới tuyệt vời của chúng ta:

    Echo "Xin chào thế giới!";

    Khi truy cập file này, chuỗi Hello, World sẽ được trả về cho client. Như bạn có thể tưởng tượng, điều này tượng trưng cơ hội rộng lớn nhất cho việc xây dựng các ứng dụng. Bằng cách chuyển các đối số khi gọi máy chủ bằng XMLHttpRequest, bạn có thể tham số hóa đầu ra, từ đó cung cấp chức năng mở rộng cho ứng dụng Web.

    Ngoài PHP, bạn có thể sử dụng bất kỳ ngôn ngữ lập trình phía máy chủ nào khác.

    Đưa ra yêu cầu tới máy chủ mà không cần tải lại trang. Đây là phương pháp cấp thấp có một lượng lớn cài đặt. Nó làm nền tảng cho hoạt động của tất cả các phương pháp ajax khác. Có hai lựa chọn sử dụng:

    url - địa chỉ yêu cầu.
    cài đặt - trong tham số này, bạn có thể chỉ định cài đặt cho của yêu cầu này. Được chỉ định bằng cách sử dụng một đối tượng có định dạng (name:value, name:value...) . Không có cài đặt nào được yêu cầu. Bạn có thể đặt cài đặt mặc định bằng phương thức $.ajaxSetup().

    Danh sách cài đặt

    ↓ tên :type (giá trị mặc định)

    Khi yêu cầu được thực hiện, các tiêu đề cho biết loại nội dung được phép mong đợi từ máy chủ. Giá trị của các loại này sẽ được lấy từ tham số Accept.

    Theo mặc định, tất cả các yêu cầu không tải lại trang đều diễn ra không đồng bộ (nghĩa là sau khi gửi yêu cầu đến máy chủ, trang sẽ không ngừng hoạt động trong khi chờ phản hồi). Nếu bạn cần thực hiện yêu cầu một cách đồng bộ thì hãy đặt tham số thành false. Không thể thực thi các yêu cầu tên miền chéo và "jsonp" ở chế độ đồng bộ.

    Xin lưu ý rằng việc thực hiện các yêu cầu ở chế độ đồng bộ có thể khiến trang bị chặn cho đến khi yêu cầu được hoàn thành đầy đủ.

    Trường này chứa một hàm sẽ được gọi ngay trước khi gửi yêu cầu ajax đến máy chủ. Hàm như vậy có thể hữu ích cho việc sửa đổi đối tượng jqXHR (trong phiên bản trước thư viện (tối đa 1,5), XMLHttpRequest được sử dụng thay vì jqXHR). Ví dụ: bạn có thể thay đổi/chỉ định các tiêu đề cần thiết, v.v. Đối tượng jqXHR sẽ được chuyển đến hàm làm đối số đầu tiên. Đối số thứ hai là cài đặt yêu cầu.

    Trong trường này, bạn có thể chỉ định các tiêu đề yêu cầu bổ sung. Những thay đổi này sẽ được nhập trước khi gọi beforeSend, nơi có thể thực hiện các chỉnh sửa tiêu đề cuối cùng.

    Khi cài đặt này được đặt thành true, yêu cầu sẽ chỉ được thực thi với trạng thái "thành công" nếu phản hồi từ máy chủ khác với phản hồi trước đó. jQuery kiểm tra thực tế này bằng cách xem tiêu đề Sửa đổi lần cuối. Vì jQuery-1.4, ngoài Last-Modified, "etag" cũng được kiểm tra (cả hai đều được máy chủ cung cấp và cần thiết để thông báo cho trình duyệt rằng dữ liệu được yêu cầu từ máy chủ không bị thay đổi so với yêu cầu trước đó) .

    Cho phép bạn đặt trạng thái nguồn của một trang thành cục bộ (như thể nó nằm trên giao thức tệp), ngay cả khi jQuery nhận ra nó theo cách khác. Thư viện quyết định rằng trang đang chạy cục bộ trong trường hợp các giao thức sau: tệp, *-extension và widget.

    Nên đặt giá trị tham số là địa phương trên toàn cầu - sử dụng hàm $.ajaxSetup() chứ không phải trong cài đặt của các yêu cầu ajax riêng lẻ.

    Xác định tên của tham số được thêm vào url trong yêu cầu jsonp (theo mặc định, “gọi lại” được sử dụng - “http://siteName.ru?callback=...").

    Kể từ jQuery-1.5, việc đặt tham số này thành false sẽ ngăn không cho tham số này được thêm vào url tham số bổ sung. Trong trường hợp này, bạn phải đặt rõ ràng giá trị của thuộc tính jsonpCallback. Ví dụ: (jsonp:false, jsonpCallback:"callbackName") .

    Xác định tên của hàm sẽ được gọi khi máy chủ phản hồi yêu cầu jsonp. Theo mặc định, jQuery tạo một tên tùy chỉnh cho hàm này. tùy chọn ưa thích, đơn giản hóa công việc của thư viện. Một trong những lý do để chỉ định chức năng xử lý yêu cầu jsonp của riêng bạn là để cải thiện bộ nhớ đệm của các yêu cầu GET.

    Kể từ jQuery-1.5, bạn có thể chỉ định một hàm trong tham số này để tự xử lý phản hồi của máy chủ. Trong trường hợp này, hàm được chỉ định phải trả về dữ liệu nhận được từ máy chủ (trong chức năng được chỉ định chúng sẽ có sẵn trong tham số đầu tiên).

    Theo mặc định, tất cả dữ liệu truyền đến máy chủ đều được chuyển đổi trước thành chuỗi (định dạng url: fName1=value1&fName2=value2&...) tương ứng với "application/x-www-form-urlencoded". Nếu bạn cần gửi dữ liệu không thể xử lý được (ví dụ: tài liệu DOM), thì bạn nên tắt tùy chọn processData.

    Tham số này được sử dụng cho các yêu cầu ajax tên miền chéo thuộc loại GET, kiểu dữ liệu có thể là "jsonp" hoặc "script". Xác định mã hóa trong đó yêu cầu tên miền chéo sẽ được thực thi. Điều này là cần thiết nếu máy chủ trên miền nước ngoài sử dụng mã hóa khác với mã hóa trên máy chủ của miền gốc.

    (Cài đặt này đã được giới thiệu trong jQuery-1.5) một tập hợp các cặp trong đó mã thực thi yêu cầu được liên kết với các hàm sẽ được gọi. Ví dụ: đối với mã 404 (trang không tồn tại), bạn có thể hiển thị thông báo trên màn hình:

    $.ajax (( statusCode: ( 404 : function () ( cảnh báo ("Không tìm thấy trang" ) ; ) ) ) );

    Các hàm phản hồi mã thành công của yêu cầu sẽ nhận được các đối số giống như các hàm xử lý yêu cầu thành công (được chỉ định trong tham số thành công) và các hàm phản hồi mã lỗi sẽ giống như các hàm xử lý lỗi.

    Một chức năng sẽ được gọi nếu yêu cầu tới máy chủ hoàn thành thành công. Nó sẽ được chuyển qua ba tham số: dữ liệu được gửi bởi máy chủ và đã được xử lý trước (khác với các kiểu dữ liệu khác nhau). Tham số thứ hai là một chuỗi có trạng thái thực thi. Tham số thứ ba chứa đối tượng jqXHR (trong các phiên bản trước của thư viện (tối đa 1.5), XMLHttpRequest được sử dụng thay vì jqXHR). Kể từ jQuery-1.5, thay vì một hàm duy nhất, tham số này có thể chấp nhận một mảng hàm.

    Thời gian chờ phản hồi từ máy chủ. Đặt tính bằng mili giây. Nếu vượt quá thời gian này, yêu cầu sẽ được hoàn thành với lỗi và sự kiện lỗi sẽ xảy ra (xem mô tả ở trên), lỗi này sẽ có trạng thái "hết thời gian chờ".

    Thời gian được tính kể từ thời điểm hàm $.ajax được gọi. Có thể xảy ra trường hợp một số yêu cầu khác đang chạy tại thời điểm này và trình duyệt sẽ trì hoãn việc thực hiện yêu cầu hiện tại. Trong trường hợp này hết giờ có thể hoàn thành, mặc dù trên thực tế, yêu cầu thậm chí còn chưa được bắt đầu.

    Trong jQuery-1.4 trở về trước, khi đối tượng XMLHttpRequest hết thời gian chờ, nó sẽ chuyển sang trạng thái lỗi và việc truy cập vào các trường của nó có thể tạo ra một ngoại lệ. Trong Firefox 3.0+, các yêu cầu tập lệnh và JSONP sẽ không bị hủy nếu hết thời gian chờ. Chúng sẽ được hoàn thành ngay cả khi thời gian này đã hết.

    Một hàm sẽ cung cấp một đối tượng XMLHttpRequest. Theo mặc định, đối với trình duyệt IE, đối tượng này là ActiveXObject và trong các trường hợp khác nó là XMLHttpRequest. Với tùy chọn này bạn có thể thực hiện phiên bản riêngđối tượng này.

    (Cài đặt này đã được giới thiệu trong jQuery-1.5.1) Một tập hợp các cặp (name:value) để thay đổi/thêm giá trị của các trường tương ứng của đối tượng XMLHttpRequest. Ví dụ: bạn có thể đặt thuộc tính withCredentials của nó thành true khi thực hiện yêu cầu tên miền chéo:

    $.ajax (( url: a_cross_domain_url, xhrFields: ( withCredentials: true ) ) ) ;

    Trong jQuery-1.5, thuộc tính withCredentials không được XMLHttpRequest gốc hỗ trợ và sẽ bị bỏ qua trong yêu cầu tên miền chéo. Trong tất cả các phiên bản tiếp theo thư viện, điều này đã được sửa.

    Trình xử lý sự kiện

    Các cài đặt beforeSend, error, dataFilter, thành công và hoàn thành (mô tả của chúng nằm trong phần trước) cho phép bạn đặt các trình xử lý sự kiện xảy ra tại một số thời điểm nhất định khi thực hiện từng yêu cầu ajax.

    trướcGửi xảy ra ngay trước khi yêu cầu được gửi đến máy chủ. lỗi xảy ra khi yêu cầu thất bại. bộ lọc dữ liệu xảy ra khi dữ liệu đến từ máy chủ. Cho phép bạn xử lý dữ liệu “thô” do máy chủ gửi. thành công xảy ra khi yêu cầu hoàn thành thành công. hoàn thành xảy ra sau khi hoàn thành bất kỳ yêu cầu nào.

    Ví dụ dễ sử dụng. Chúng tôi sẽ hiển thị thông báo khi yêu cầu được hoàn thành thành công:

    $.ajax (( url: "ajax/test.html" , thành công: function () ( cảnh báo ("Tải đã được thực hiện." ) ; ) ) );

    Bắt đầu với jQuery-1.5, phương thức $.ajax() trả về một đối tượng jqXHR, trong số những thứ khác, thực hiện giao diện trì hoãn, cho phép bạn chỉ định các trình xử lý thực thi bổ sung. Ngoài tiêu chuẩn các phương thức .done(), .fail() và .then() cho đối tượng bị trì hoãn mà bạn có thể cài đặt các trình xử lý, jqXHR còn triển khai .success(), .error() và .complete() . Điều này được thực hiện để tuân theo tên thông thường của các phương thức mà trình xử lý thực hiện yêu cầu ajax được cài đặt. Tuy nhiên, kể từ jQuery-1.8, ba phương thức này sẽ không còn được dùng nữa.

    Một số loại yêu cầu, chẳng hạn như yêu cầu jsonp hoặc GET tên miền chéo, không hỗ trợ việc sử dụng các đối tượng XMLHttpRequest. Trong trường hợp này, XMLHttpRequest và textStatus được chuyển tới trình xử lý sẽ chứa giá trị unknown .

    Trình xử lý bên trong, biến này sẽ chứa giá trị của tham số bối cảnh. Trong trường hợp nó chưa được đặt, đối tượng này sẽ chứa đối tượng cài đặt.

    tham số kiểu dữ liệu

    Hàm $.ajax() tìm hiểu về loại dữ liệu được máy chủ gửi từ chính máy chủ đó (thông qua MIME). Ngoài ra, còn có cơ hội để cá nhân chỉ ra (làm rõ) cách diễn giải những dữ liệu này. Điều này được thực hiện bằng cách sử dụng tham số dataType. Các giá trị có thể có cho tham số này:

    "xml"— tài liệu xml thu được sẽ có sẵn ở dạng văn bản. Bạn có thể làm việc với anh ấy phương tiện tiêu chuẩn jQuery (giống như với tài liệu html). "html"— html kết quả sẽ có sẵn ở dạng văn bản. Nếu nó chứa các tập lệnh trong thẻ thì chúng sẽ chỉ được thực thi tự động khi văn bản html được đặt trong DOM. "kịch bản"- dữ liệu nhận được sẽ được thực thi dưới dạng javascript. Các biến thường chứa phản hồi từ máy chủ sẽ chứa đối tượng jqXHR. "json", "jsonp"- dữ liệu nhận được sẽ được chuyển đổi trước thành đối tượng javascript. Nếu phân tích cú pháp không thành công (điều này có thể xảy ra nếu json chứa lỗi), thì ngoại lệ lỗi phân tích cú pháp tệp sẽ được đưa ra. Nếu máy chủ bạn đang truy cập nằm trên một miền khác thì nên sử dụng jsonp thay vì json. Bạn có thể tìm hiểu về json và jsonp trên Wikipedia. "chữ"— dữ liệu nhận được sẽ có sẵn ở dạng văn bản thuần túy, không cần xử lý sơ bộ.

    Lưu ý 1: Khi một yêu cầu được gửi đến miền của bên thứ ba (điều này chỉ có thể thực hiện được với dataType bằng jsonp hoặc script), trình xử lý lỗi và sự kiện chung sẽ không kích hoạt.

    Lưu ý 2: Kiểu dữ liệu được chỉ định trong dataType không được xung đột với thông tin MIME do máy chủ cung cấp. Ví dụ: dữ liệu xml phải được máy chủ biểu thị dưới dạng text/xml hoặc application/xml . Nếu điều này không thành công, jquery sẽ cố gắng chuyển đổi dữ liệu đã nhận sang loại được chỉ định (thông tin thêm về điều này trong phần Bộ chuyển đổi).

    Gửi dữ liệu đến máy chủ

    Theo mặc định, yêu cầu tới máy chủ được thực hiện bằng phương thức HTTP GET. Nếu bạn cần thực hiện yêu cầu bằng phương thức POST, bạn cần chỉ định giá trị thích hợp trong cài đặt loại. Dữ liệu được gửi bằng phương thức POST sẽ được chuyển đổi thành UTF-8 nếu nó ở dạng mã hóa khác, theo yêu cầu của tiêu chuẩn W3C XMLHTTPRequest.

    Tham số dữ liệu có thể được chỉ định dưới dạng chuỗi ở định dạng key1=value1&key2=value2 (định dạng truyền dữ liệu trong url) hoặc dưới dạng đối tượng có tập hợp các cặp (tên:giá trị) - (key1: "value1", key2: "giá trị2") . Trong trường hợp sau, trước khi gửi dữ liệu, jQuery chuyển đổi đối tượng nhất định thành một chuỗi bằng cách sử dụng $.param() . Tuy nhiên, chuyển đổi này có thể được đảo ngược bằng cách đặt cài đặt processData thành false. Việc chuyển đổi thành chuỗi là điều không mong muốn, chẳng hạn như trong trường hợp gửi một đối tượng xml đến máy chủ. Trong trường hợp này, bạn nên thay đổi cài đặt contentType từ ứng dụng/x-www-form-urlencoded sang một loại mime phù hợp hơn.

    Bình luận: Hầu hết các trình duyệt không cho phép các yêu cầu Ajax đối với các tài nguyên có tên miền, tên miền phụ và giao thức khác với giao thức hiện tại. Tuy nhiên, giới hạn này không áp dụng cho các yêu cầu jsonp và script.

    Nhận dữ liệu từ máy chủ

    Dữ liệu nhận được từ máy chủ có thể được cung cấp dưới dạng chuỗi hoặc đối tượng, tùy thuộc vào giá trị của tham số dataType (xem dataType ở trên). Dữ liệu này luôn có sẵn trong tham số đầu tiên của trình xử lý thực thi yêu cầu ajax:

    $.ajax (( url: "some.php" , thành công: hàm (dữ liệu) ( cảnh báo ("Dữ liệu lợi nhuận: " + data ) ; ) ) );

    Đối với các loại văn bản và xml, dữ liệu được máy chủ gửi cũng sẽ có sẵn trong jqXHR, cụ thể là trong các trường replyText hoặc replyXML tương ứng.

    Cài đặt nâng cao

    Bằng cách sử dụng tham số chung, bạn có thể vô hiệu hóa việc thực thi các trình xử lý sự kiện (.ajaxSend(), .ajaxError(), v.v.) cho yêu cầu cá nhân. Điều này có thể hữu ích, chẳng hạn như nếu việc tải hoạt ảnh được bắt đầu/dừng trong các trình xử lý này. Sau đó, nếu một số yêu cầu được thực thi rất thường xuyên và nhanh chóng, thì việc vô hiệu hóa việc thực thi các trình xử lý sẽ rất hữu ích đối với chúng. Đối với các yêu cầu tập lệnh và jsonp trên nhiều miền, tham số chung sẽ tự động bị tắt.

    Nếu cần có dữ liệu xác thực (thông tin đăng nhập/mật khẩu) để gửi yêu cầu đến máy chủ thì bạn có thể chỉ định dữ liệu đó trong cài đặt tên người dùng và mật khẩu của yêu cầu ajax.

    Một khoảng thời gian nhất định được phân bổ để hoàn thành yêu cầu tới máy chủ. Nếu máy chủ không gửi phản hồi trong thời gian này, yêu cầu sẽ kết thúc với lỗi (trạng thái "hết thời gian"). Thời gian chờ phản hồi từ máy chủ có thể được thay đổi bằng cách đặt giá trị bắt buộc (tính bằng mili giây) trong cài đặt thời gian chờ.

    Có thể xảy ra trường hợp mã hóa máy chủ khác với mã hóa được yêu cầu trong yêu cầu ajax tập tin javascript. Trong những trường hợp như vậy, bạn phải chỉ định mã hóa sau trong cài đặt scriptCharset.

    Trong hầu hết các trường hợp, yêu cầu Ajax xảy ra không đồng bộ, nhưng trong một số trường hợp, có thể cần phải thực hiện yêu cầu một cách tuần tự (khi không thể thực thi thêm tập lệnh nếu không nhận được phản hồi từ máy chủ). Bạn có thể thực hiện yêu cầu đồng bộ nếu bạn tắt cài đặt không đồng bộ. Tuy nhiên, điều cần nhớ là trong trường hợp này trang sẽ bị treo trong khi chờ phản hồi từ máy chủ.

    Ví dụ về việc sử dụng

    Hầu hết tùy chọn đơn giản việc sử dụng sẽ gọi $.ajax() mà không chỉ định tham số:

    $.ajax(); // một yêu cầu GET sẽ được gửi đến máy chủ tới URL của trang hiện tại mà không chỉ định bất kỳ tham số nào.

    Nếu bạn cần tải và thực thi tệp js, bạn có thể làm như thế này:

    $.ajax (( type: "GET", url: "test.js", dataType: "script" ) );

    Hãy tạo một yêu cầu POST tới máy chủ, chỉ định hai tham số và thông báo cho người dùng về yêu cầu đã hoàn thành thành công:

    $.ajax (( type: "POST" , url: "some.php" , data: "name=John&location=Boston" , thành công: function (tin nhắn) ( cảnh báo ("Dữ liệu đã đến: " + msg ) ; ) ) ) ;

    Hãy cập nhật nội dung của trang html mong muốn:

    $.ajax (( url: "test.html" , cache: false , thành công: function (html) ( $("#results" ) .append (html) ; ) ) ) ;

    Hãy thực hiện một yêu cầu đồng bộ đến máy chủ. Trong khi yêu cầu đang được thực thi, trang sẽ không phản hồi hành động của người dùng:

    // ghi dữ liệu được gửi từ máy chủ vào biến html var html = $.ajax (( url: "some.php", async: false ) ) .responseText ;

    Với tư cách là một tham số, chúng tôi sẽ gửi một đối tượng xml đến máy chủ. Để truyền nó một cách chính xác, bạn phải hủy chuyển đổi sơ bộ các tham số (processData:false). Là người xử lý để hoàn thành thành công một yêu cầu, chúng tôi sẽ chỉ định chức năng tùy chỉnh xử lýPhản hồi:

    var xmlDocument = [tạo tài liệu xml] ; $.ajax (( url: "page.php", processData: false , data: xmlDocument, thành công: handResponse ) );

    Phương pháp tiếp cận nâng cao

    Bắt đầu với jQuery-1.5, có ba hướng mới cho phép bạn sử dụng $.ajax() sâu hơn nữa. Bộ đầu tiên trong số chúng (Bộ lọc trước) cho phép bạn thực hiện các thao tác bổ sung ngay trước khi gửi yêu cầu. Với cách tiếp cận thứ hai (Bộ chuyển đổi), bạn có thể cho jQuery biết cách chuyển đổi dữ liệu nhận được từ máy chủ nếu nó không khớp với định dạng mong đợi. Cách tiếp cận thứ ba (Transports) là mức thấp nhất; nó cho phép bạn tổ chức yêu cầu đến máy chủ một cách độc lập.

    Bộ lọc sơ bộ

    Cách tiếp cận này bao gồm việc thiết lập một trình xử lý được gọi trước khi mỗi yêu cầu ajax được thực hiện. Trình xử lý này đi trước việc thực thi bất kỳ trình xử lý ajax nào khác. Nó được cài đặt bằng hàm $.ajaxPrefilter():

    $.ajaxPrefilter (hàm (tùy chọn, originalOptions, jqXHR) ( ) ) ;

    Ở đâu
    tùy chọn- cài đặt của yêu cầu hiện tại,
    Tùy chọn gốc- thiết lập mặc định,
    jqXHR- đối tượng jqXHR của yêu cầu này.

    Thuận tiện khi xử lý trong Prefilters cài đặt tùy chỉnh(tức là các cài đặt mới chưa được xác định đối với thư viện được chỉ định trong yêu cầu). Ví dụ: bạn có thể nhập thiết lập riêng abortOnRetry , khi được bật, các yêu cầu chưa hoàn thành sẽ được đặt lại nếu nhận được yêu cầu sau tại cùng một url:

    var currentRequests = ( ) ; $.ajaxPrefilter (hàm (options, originalOptions, jqXHR) ( if (options.abortOnRetry) ( if (currentRequests[ options.url ]) ( currentRequests[ options.url ] .abort () ; ) currentRequests[ options.url ] = jqXHR ; ) ) ) ;

    Thuận tiện cho việc xử lý và cài đặt hiện có. Ví dụ: đây là cách bạn có thể thay đổi yêu cầu tên miền chéo thành yêu cầu được chuyển hướng qua máy chủ tên miền của bạn:

    $.ajaxPrefilter (hàm (tùy chọn) ( if (options.crossDomain) ( options.url = "http://mydomain.net/proxy/" + EncodeURIComponent( options.url ) ; options.crossDomain = false ; ) ) ;

    Ngoài ra, bạn có thể chỉ định các giá trị dataType mà bộ lọc trước sẽ hoạt động trên đó. Vì vậy, ví dụ: bạn có thể chỉ định loại json và tập lệnh:

    $.ajaxPrefilter ("json script" , function (options, originalOptions, jqXHR) ( // Thay đổi tùy chọn, kiểm tra cài đặt cơ bản(originOptions) và đối tượng jqXHR) );

    Cuối cùng, bạn có thể thay đổi giá trị dataType để trả về giá trị mong muốn:

    $.ajaxPrefilter (function (options) ( // thay đổi dataType thành script nếu url đáp ứng các điều kiện nhất định if (isActuallyScript(options.url) ) ( return "script" ; ) );

    Cách tiếp cận này đảm bảo không chỉ rằng yêu cầu sẽ thay đổi loại của nó thành tập lệnh mà cả các trình xử lý lọc trước khác chỉ định loại này trong tham số đầu tiên cũng sẽ được thực thi.

    Bộ chuyển đổi

    Nguyên tắc này bao gồm việc cài đặt một trình xử lý sẽ hoạt động nếu kiểu dữ liệu được chỉ định trong cài đặt không khớp với kiểu dữ liệu được máy chủ gửi.

    Bộ chuyển đổi là cài đặt ajax, do đó có thể được đặt trên toàn cầu:

    // bằng cách này, bạn có thể thiết lập một trình xử lý sẽ hoạt động nếu, thay vì // loại mydatatype bạn đã chỉ định trong dataType, dữ liệu thuộc loại text được nhận $.ajaxSetup (( bộ chuyển đổi: ("text mydatatype" : function ( textValue ) ( if (valid( textValue ) ) ( // xử lý văn bản được truyền return mydatatypeValue; ) else ( // nếu dữ liệu được gửi bởi máy chủ không tương ứng với những gì được mong đợi, // bạn có thể ném một ngoại lệ. ném ngoại lệObject; ) ) ) ) ;

    Trình chuyển đổi sẽ giúp bạn khi giới thiệu Kiểu dữ liệu (tùy chỉnh) của riêng bạn. Điều quan trọng cần lưu ý là tên của kiểu dữ liệu đó chỉ nên sử dụng chữ thường! Yêu cầu về kiểu dữ liệu "mydatatype" được đề cập ở trên có thể trông như thế này:

    $.ajax (url, (dataType: "mydatatype" ) );

    Bài học trong đó chúng ta sẽ xem xét việc tạo các yêu cầu AJAX không đồng bộ đơn giản tới máy chủ bằng các ví dụ. Chúng tôi sẽ sử dụng cả hai phương thức GET và POST làm phương thức truyền yêu cầu. Trên máy chủ, chúng tôi sẽ xử lý các yêu cầu bằng cách sử dụng tập lệnh PHP.

    Yêu cầu AJAX không đồng bộ là gì?

    Công nghệ AJAX chủ yếu được sử dụng để tạo các yêu cầu không đồng bộ tới máy chủ. Yêu cầu không đồng bộ là yêu cầu chạy ở chế độ nền và không cản trở sự tương tác của người dùng với trang.

    Khi gửi yêu cầu không đồng bộ, trình duyệt (trang) không bị “đóng băng”, tức là. bạn có thể làm việc với nó như trước đây. Nhưng làm sao bạn biết khi nào có phản hồi từ máy chủ? Để xác định điều này, bạn cần giám sát thuộc tính ReadyState của trình duyệt. Tài sản này chứa một số có giá trị có thể được sử dụng để xác định yêu cầu đang ở giai đoạn nào. Bảng sau hiển thị các giá trị chính của thuộc tính ReadyState và trạng thái tương ứng của chúng.

    Những thứ kia. Hóa ra chúng ta cần theo dõi khi giá trị của thuộc tính ReadyState bằng 4. Điều này có nghĩa là yêu cầu đã gửi đã nhận được phản hồi từ máy chủ. Các giá trị còn lại hiếm khi được sử dụng trong thực tế và một số trình duyệt có thể không hỗ trợ chúng.

    Để xác định yêu cầu đang ở giai đoạn nào, bạn phải sử dụng sự kiện onreadystatechange của đối tượng XMLHttpRequest. Sự kiện này xảy ra mỗi khi giá trị của thuộc tính ReadyState thay đổi. Do đó, trong trình xử lý sự kiện này (hàm chưa được đặt tên hoặc được đặt tên), bạn có thể viết các hành động sẽ kiểm tra xem thuộc tính này có bằng 4 hay không và nếu nó bằng thì, chẳng hạn, sẽ hiển thị phản hồi của máy chủ trên trang.

    Tạo yêu cầu AJAX không đồng bộ (phương thức GET)

    Hãy xem việc tạo một yêu cầu AJAX không đồng bộ bằng một ví dụ, nó sẽ chào người dùng sau khi tải trang và hiển thị địa chỉ IP của người đó.

    Để thực hiện việc này, bạn cần tạo 2 tệp trên máy chủ trong một thư mục:

  • Welcome.html – Trang HTML sẽ được hiển thị cho người dùng. Trên cùng một trang, chúng tôi sẽ đặt một tập lệnh sẽ thực hiện tất cả các hành động cần thiết để AJAX hoạt động ở phía máy khách.
  • Đang xử lý.php – Tệp PHP sẽ xử lý yêu cầu ở phía máy chủ và tạo phản hồi. Hãy bắt đầu phát triển bằng cách tạo cấu trúc cơ bản của tệp Welcome.html
    • Một ví dụ về công việc AJAX Một ví dụ về công việc AJAX // Ở đây chúng tôi sẽ đặt mã JavaScript sẽ gửi yêu cầu đến máy chủ, nhận yêu cầu và cập nhật nội dung của trang. Tất cả điều này sẽ hoạt động mà không cần tải lại trang

    Hãy xem chuỗi hành động cần được thực hiện ở phía máy khách (bằng mã JavaScript):

    Hãy chuẩn bị dữ liệu cần thiết để thực hiện yêu cầu trên máy chủ. Nếu không cần dữ liệu để hoàn thành yêu cầu trên máy chủ thì sân khấu này bạn có thể bỏ qua nó.

    Hãy tạo một biến chứa một phiên bản của đối tượng XHR (XMLHttpRequest).

    Hãy thiết lập yêu cầu bằng phương thức open().

    Các thông số sau được chỉ định:

    • Phương thức gửi yêu cầu đến máy chủ (GET, POST).
    • URL sẽ xử lý yêu cầu trên máy chủ.
    • Loại yêu cầu: đồng bộ (sai) hoặc không đồng bộ (đúng).
    • Tên người dùng và mật khẩu nếu được yêu cầu.

  • Hãy đăng ký sự kiện onreadystatechange của đối tượng XHR và chỉ định trình xử lý là hàm ẩn danh hoặc được đặt tên. Sau đó, chúng ta sẽ tạo mã bên trong hàm này để kiểm tra trạng thái phản hồi và thực thi hành động nhất định Trên trang. Phản hồi đến từ máy chủ luôn nằm trong thuộc tính replyText.

    Ngoài việc kiểm tra giá trị của thuộc tính ReadyState đến số 4, bạn cũng có thể kiểm tra giá trị của thuộc tính trạng thái. Thuộc tính này xác định trạng thái của yêu cầu. Nếu nó bằng 200 thì mọi thứ đều ổn. Nếu không thì đã xảy ra lỗi (ví dụ: 404 - Không tìm thấy URL).

    Hãy gửi yêu cầu đến máy chủ bằng phương thức send().

    Nếu chúng ta sử dụng phương thức GET để gửi yêu cầu thì truyền dữ liệu vào tham số phương pháp này Không cần. Chúng được gửi như một phần của URL.

    Nếu chúng ta sử dụng phương thức POST để gửi yêu cầu thì dữ liệu phải được truyền dưới dạng tham số cho phương thức send(). Ngoài ra, trước khi gọi phương thức này, bạn phải đặt tiêu đề Content-Type để máy chủ biết yêu cầu gửi đến nó bằng mã hóa nào và có thể giải mã nó.

    Nội dung của phần tử script:

    // 2. Tạo biến yêu cầu var request = new XMLHttpRequest(); // 3. Thiết lập yêu cầu request.open("GET","processing.php",true); // 4. Đăng ký sự kiện onreadystatechange và xử lý nó bằng hàm ẩn danh request.addEventListener("readystatechange", function() ( // nếu trạng thái yêu cầu là 4 và trạng thái yêu cầu là 200 (OK) if ((request. ReadyState==4) && (request.status==200)) ( // ví dụ: xuất một đối tượng XHR ra bảng điều khiển trình duyệt console.log(request); // và phản hồi (văn bản) đến từ máy chủ tới cửa sổ cảnh báo console.log(request.responseText); // lấy một phần tử có id = Welcome var Welcome = document.getElementById("welcome"); // thay thế nội dung của phần tử bằng phản hồi đến từ máy chủ Welcome.innerHTML = request.responseText; ) )); // 5. Gửi yêu cầu đến máy chủ request.send();

    Kết quả file Welcome.html sẽ có đoạn code sau:

    Ví dụ về hoạt động của AJAX Ví dụ về hoạt động của AJAX window.addEventListener("load",function() ( var request = new XMLHttpRequest(); request.open("GET","processing.php",true); request.addEventListener(" Readystatechange" , function() ( if ((request.readyState==4) && (request.status==200)) ( var Welcome = document.getElementById("welcome"); Welcome.innerHTML = request.responseText; ) ) ); yêu cầu.send();

    Trên máy chủ (sử dụng php):

  • Hãy lấy dữ liệu. Nếu dữ liệu được gửi qua phương thức GET thì từ mảng toàn cục $_GET["name"] . Và nếu dữ liệu được truyền bằng phương thức POST thì từ mảng toàn cục $_POST["name"] .
  • Sử dụng dữ liệu này, chúng tôi sẽ thực hiện một số hành động trên máy chủ. Kết quả là chúng ta nhận được một số câu trả lời. Hãy hiển thị nó bằng cách sử dụng echo .