Thực đơn
trang chủSự liên quan

Ajax là gì. AJAX: nó là gì, tác động của nó đến SEO, ưu điểm và nhược điểm của công nghệ. Lập chỉ mục AJAX bởi các công cụ tìm kiếm

Hiện nay trên Internet có rất nhiều phát triển tích cực(và thậm chí cả việc sử dụng) các công nghệ mới. Một công nghệ như vậy là AJAX.

AJAX là gì?

AJAX là từ viết tắt của Asynchronous Javascript and XML. Trên thực tế, AJAX không phải là một công nghệ mới, vì cả Javascript và XML đều đã xuất hiện 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.

Khi 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 pháp 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 nhiều 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

Để 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 giao tiếp trong ứ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 (Ký hiệu đối tượng Javascript). 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ạng XML, tài liệu XML nhận được thường được xử lý ở phía máy khách và dữ liệu được chuyển đổi thành (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.

abort() - hủy yêu cầu hiện tại tới 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","asynchronous","user_name","password") - khởi tạo một yêu cầu tới 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).

send("content") - gửi yêu cầu HTTP đến máy chủ và nhận 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 là 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.

ReadyState là một con số chỉ trạng thái của đối tượng.

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

replyXML là 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ủ.

statusText - văn bản thể hiện trạng thái phản hồi từ máy chủ.

Bạn nên 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.

Tạo một đối tượng XMLHttpRequest

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:

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

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

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

var Yêu cầu = 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:

function 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) ( //Internet explorer 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"); ) trả về Yêu cầu; )

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 trong Những nơi khác nhau. Nếu bạn tạo nó trên toàn cầu thì tại một thời điểm nhất định chỉ có thể thực hiện được một yêu cầu tới máy chủ. 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 một 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); if ( 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.

    Bài viết này mô tả AJAX ở cấp độ tính năng và ví dụ. Các tính năng của tương tác không đồng bộ và các ví dụ sử dụng được xem xét nhưng có tối thiểu các chi tiết kỹ thuật.

    Tôi hy vọng nó sẽ hữu ích cho việc hiểu AJAX là gì và nó được sử dụng để làm gì.

    AJAX là gì? Ví dụ thực hiện.

    AJAX, hoặc lâu hơn, MỘTđồng bộ J bản viết sẵn MỘT thứ X ml là công nghệ tương tác với máy chủ mà không cần tải lại trang.

    Do đó, thời gian phản hồi giảm xuống và ứng dụng web gợi nhớ nhiều hơn đến máy tính để bàn về khả năng tương tác.

    Công nghệ AJAX, như chữ cái đầu tiên A trong tên của nó chỉ ra, là không đồng bộ, tức là trình duyệt, sau khi gửi yêu cầu, có thể làm bất cứ điều gì, chẳng hạn như hiển thị một thông báo
    về việc chờ phản hồi, cuộn trang, v.v.

    Đây là mã nút trong ví dụ trên:

    Khi được nhấp vào, nó sẽ gọi hàm bỏ phiếu, hàm này sẽ gửi yêu cầu đến máy chủ, chờ phản hồi và sau đó hiển thị thông báo về nó trong div bên dưới nút:

    Phản hồi của máy chủ sẽ ở đây

    Để trao đổi dữ liệu với máy chủ, một đối tượng XmlHttpRequest đặc biệt được sử dụng, đối tượng này có thể gửi yêu cầu và nhận phản hồi từ máy chủ. Bạn có thể tạo một đối tượng đa trình duyệt như vậy, ví dụ như sau:

    Hàm getXmlHttp())( var xmlhttp; try ( xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); ) Catch (e) ( try ( xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); ) Catch (E) ( xmlhttp = false; ) ) if (!xmlhttp && typeof XMLHttpRequest!="không xác định") ( xmlhttp = new XMLHttpRequest(); ) trả về xmlhttp; )

    Bạn có thể đọc thêm về chi tiết triển khai AJAX bằng XmlHttpRequest và các phương tiện truyền tải khác trong phần giao tiếp với máy chủ.

    Chúng ta sẽ không tập trung vào vấn đề này ở đây và đi thẳng vào chức năng bỏ phiếu:

    // mã biểu quyết javascript từ hàm ví dụ vote() ( // (1) tạo một đối tượng cho yêu cầu tới máy chủ var req = getXmlHttp() // (2) // span bên cạnh nút // nó sẽ hiển thị tiến trình thực thi var statusElem = document.getElementById("vote_status") req.onreadystatechange = function() ( // onreadystatechange được kích hoạt khi nhận được phản hồi của máy chủ if (req.readyState == 4) ( // nếu yêu cầu kết thúc thực thi statusElem.innerHTML = req.statusText / / hiển thị trạng thái ( Không tìm thấy, OK..) if(req.status == 200) ( // nếu trạng thái là 200 (OK) - đưa ra phản hồi cho cảnh báo của người dùng("Phản hồi của máy chủ: "+req.responseText); ) // đây bạn có thể thêm else với yêu cầu xử lý lỗi ) ) // (3) đặt địa chỉ kết nối req.open("GET", "/ajax_intro/vote.php", true); // đối tượng yêu cầu đã được chuẩn bị: địa chỉ được chỉ định và hàm onreadystatechange được tạo // để xử lý phản hồi của máy chủ // (4) req.send(null); // gửi yêu cầu // (5) statusElem.innerHTML = "Đang chờ phản hồi của máy chủ..." )

    Luồng thực thi được sử dụng bởi phiếu bầu khá điển hình và trông như thế này:

  • Hàm tạo đối tượng XmlHttpRequest
  • gán trình xử lý phản hồi của máy chủ cho onreadystatechange
  • mở kết nối mở
  • gửi yêu cầu bằng lệnh gọi send (hàm onreadystatechange nhận được phản hồi của máy chủ, hàm này sẽ kích hoạt không đồng bộ)
  • hiển thị cho khách truy cập một chỉ báo trạng thái quy trình

    • Trình xử lý máy chủ xử lý yêu cầu AJAX (trong ví dụ này là vote.php) về cơ bản không khác gì trang thông thường. Yêu cầu AJAX do XmlHttpRequest gửi không khác gì yêu cầu thông thường.

    Chỉ là văn bản mà máy chủ trả về không được hiển thị dưới dạng HTML mà được đọc và xử lý bởi hàm onreadystatechange.

    Ý nghĩa của AJAX là tích hợp các công nghệ

    Công nghệ AJAX sử dụng kết hợp:

    • (X)HTML, CSS để trình bày và tạo kiểu thông tin
    • Mô hình DOM, các hoạt động được thực hiện bởi javascript ở phía máy khách để cung cấp khả năng hiển thị động và tương tác với thông tin
    • XMLHttpRequest để liên lạc không đồng bộ với máy chủ web. Trong một số khung AJAX và trong một số trường hợp, IFrame, thẻ SCRIPT hoặc phương thức vận chuyển tương tự khác được sử dụng thay vì XMLHttpRequest.
    • JSON thường được sử dụng để trao đổi dữ liệu, nhưng mọi định dạng đều hoạt động, bao gồm HTML, văn bản, XML và thậm chí một số EBML phong phú

    Một ứng dụng AJAX điển hình bao gồm ít nhất hai phần.

    Cái đầu tiên chạy trong trình duyệt và thường được viết bằng JavaScript, cái thứ hai nằm trên máy chủ và được viết, chẳng hạn như bằng Ruby, Java hoặc PHP.

    Dữ liệu được trao đổi giữa hai phần này thông qua XMLHttpRequest (hoặc phương thức vận chuyển khác).

    Tôi có thể làm gì với AJAX?

    Ưu điểm của AJAX là tính tương tác và thời gian phản hồi nhanh.

    Điều khiển nhỏ

    Trước hết, AJAX rất hữu ích cho các phần tử nhỏ liên quan đến các hành động cơ bản: thêm vào giỏ hàng, đăng ký, v.v.

    Tải động dữ liệu từ máy chủ.

    Ví dụ: một cây có các nút được tải khi chúng mở rộng.

    Vào thời điểm xuất hiện, nó là cửa hàng mở duy nhất dịch vụ bưu chính sử dụng AJAX cho các tính năng sau.

    • Kiểm tra lỗi nhập biểu mẫu TRƯỚC KHI gửi

      Tên người dùng được gửi đến máy chủ và kết quả kiểm tra sẽ được trả về trang.

    • "Tải về ngay lập tức

      Trình duyệt chỉ liên hệ với máy chủ để lấy dữ liệu chứ không cập nhật toàn bộ giao diện rườm rà

    • Tự động "gửi" thư đến một thư mục đang mở

      Thỉnh thoảng một yêu cầu được gửi đến máy chủ và nếu có thư mới đến, chúng sẽ xuất hiện trong trình duyệt.

    • Tự động hoàn thành

      Chỉ cần nhập các chữ cái đầu tiên của tên người nhận là đủ và phần còn lại sẽ tự động được hoàn thành, như trong các ứng dụng trên máy tính để bàn.

    Kết quả: phổ biến rộng rãi, nhu cầu về tài khoản cao kể từ khi mở.

    Mô hình đồng bộ VS Mô hình không đồng bộ

    Trong lập trình thông thường, tất cả các hoạt động đều đồng bộ, nghĩa là chúng được thực hiện lần lượt.

    Nói một cách tương đối, chúng ta hành động như thế này:

  • quăng cần câu
  • chờ nó cắn
  • bit - bật siết chặt thanh quay

    • Với cách tiếp cận không đồng bộ, chúng tôi:

  • chúng tôi treo một máy dò vết cắn đặc biệt trên cần câu, yêu cầu nó kéo cần quay khi nó cắn
  • quăng cần câu
  • chúng tôi đang làm những việc khác
  • máy dò vết cắn được kích hoạt, kích hoạt sự rút lại của thanh quay

    • Tức là trong trường hợp đồng bộ, chiếc cần câu liên tục thu hút sự chú ý của chúng ta. Đánh bắt cá là một quá trình tuần tự.

    Ở phiên bản không đồng bộ, trước tiên chúng tôi thiết lập chương trình những việc cần làm khi cắn câu, sau đó hạ cần câu xuống để bắt và làm những việc khác.
    Ví dụ, chúng tôi đã lắp thêm 5 chiếc cần câu như vậy.

    Lập trình không đồng bộ khó hơn lập trình đồng bộ và ban đầu nó không bình thường vì nó trước những gì sẽ làm việc được đưa ra sau đó.
    Nghĩa là, chương trình “phải làm gì khi nó cắn” phải được thiết lập trước khi vết cắn xảy ra và nói chung người ta không biết liệu có cá trong hồ chứa hay không.

    Có những kỹ thuật giúp lập trình không đồng bộ dễ dàng hơn, chẳng hạn như đối tượng Trì hoãn (Twisted, Dojo, Mochikit), nhưng điều này sẽ được thảo luận trong một bài viết riêng.

    Mô hình đồng bộ và không đồng bộ trong AJAX

    Hãy quay trở lại với con cừu của chúng ta: trình duyệt, máy chủ và cơ sở dữ liệu.

    Trong mô hình đồng bộ, trình duyệt gửi yêu cầu đến máy chủ và bị treo, chờ nó hoàn thành mọi thứ. công việc cần thiết. Máy chủ thực hiện các truy vấn tới cơ sở dữ liệu, gói phản hồi theo định dạng được yêu cầu và xuất ra. Trình duyệt. Sau khi nhận được câu trả lời, nó gọi hàm show.

    Tất cả các quá trình được thực hiện tuần tự, lần lượt.

    Độ trễ mạng được bao gồm trong thời gian chờ, được biểu thị bằng màu xám trong sơ đồ.

    Người dùng không thể làm bất cứ điều gì khác trên cùng một trang trong khi dữ liệu đồng bộ đang được trao đổi.

    Trong mô hình không đồng bộ, yêu cầu được gửi (“mồi nhử đã được đặt”) và bạn có thể chuyển sang thứ khác. Khi yêu cầu được hoàn thành ("vẫy chào") - nó sẽ được đưa ra trước
    một chức năng được lập trình viên chuẩn bị (“kéo cần quay lên”) để hiển thị thông báo máy chủ.

    Tại đây, máy chủ ngay lập tức thông báo cho trình duyệt rằng yêu cầu đã được chấp nhận để xử lý và giải phóng nó để xử lý. công việc tiếp theo. Khi phản hồi sẵn sàng, máy chủ sẽ chuyển tiếp nó và chức năng hiển thị tương ứng sẽ được gọi trên trình duyệt, nhưng trong khi phản hồi này đang được tạo và gửi thì trình duyệt vẫn rảnh.

    Người dùng có thể viết nhận xét, điền và gửi biểu mẫu, v.v.: Có thể thực hiện các yêu cầu không đồng bộ mới.

    Mô hình không đồng bộ được đặc trưng bởi phản hồi gần như tức thời đối với hành động của người dùng, do đó ứng dụng mang lại cảm giác thuận tiện và nhanh chóng.

    Do khoảng cách giữa hành động và kết quả thực tế, ứng dụng trở nên dễ mắc lỗi hơn nhiều.

    Đặc biệt trong trường hợp có nhiều yêu cầu không đồng bộ đồng thời, bạn cần quan tâm đến thứ tự thực hiện và phản hồi (điều kiện chủng tộc) và trong trường hợp xảy ra lỗi, hãy để ứng dụng ở trạng thái nhất quán.

    Đặc điểm của mô hình không đồng bộ
    • Khó thực hiện
      • Khả năng của trình duyệt không đủ (javascript)
      • Mô hình không đồng bộ khó gỡ lỗi hơn
    • Điều kiện cuộc đua
      • Trình tự thực hiện không xác định
      • Bạn có thể thực hiện nhiều nhiệm vụ đồng thời ("cần câu"), nhưng nhiệm vụ bắt đầu trước có thể kết thúc sau cùng.
    • Phản ứng xảy ra ngay lập tức nhưng không biết kết quả sẽ như thế nào. Xử lý lỗi phức tạp hơn
      • Lỗi giao tiếp - ngắt kết nối, v.v.
      • Lỗi người dùng - ví dụ: không có đủ đặc quyền
    • Kiểm soát tính toàn vẹn (chống lỗi)
      • Ví dụ: người soạn thảo đã gửi yêu cầu không đồng bộ để xóa một nhánh cây. Việc thêm vào nó phải bị vô hiệu hóa cho đến khi có phản hồi của máy chủ. Nếu đột nhiên không có đủ đặc quyền thì thao tác đã thất bại.
    • Tương tác
    • Giao diện nhanh

    Chỉ có hai lợi thế, nhưng lợi thế là gì! Trò chơi đáng giá.

    Kéo "n" thả không đồng bộ.

    Đôi khi, đối với các hoạt động không đồng bộ, cần phải thực hiện nhiều “thủ thuật tai” khác nhau. Ví dụ: bạn muốn thực hiện thao tác kéo "n" thả trong cây, nghĩa là kéo các bài viết từ phần này sang phần khác bằng chuột và để chúng thay đổi phần gốc trên máy chủ trong cơ sở dữ liệu.

    Kéo "n" thả - đây là "lấy đối tượng chuột - đặt nó vào nơi cần - xong." Nhưng trong mô hình không đồng bộ, mọi thứ không thể “sẵn sàng” ngay lập tức.
    Bạn cần kiểm tra các đặc quyền trên máy chủ, kiểm tra xem đối tượng có còn tồn tại hay không, đề phòng trường hợp người dùng khác xóa nó.

    Chúng ta cần bằng cách nào đó chứng tỏ rằng quá trình đã bắt đầu, nhưng kết quả sẽ là “điều gì sẽ xảy ra…”. Nhưng như? Trong mô hình không đồng bộ, con trỏ chuột không thể di chuột qua một đối tượng và biến thành đồng hồ.

    Trong trường hợp này, họ sử dụng các yêu cầu đồng bộ đến máy chủ - và sau đó mọi thứ thực sự bị đóng băng hoặc giải pháp ban đầu là đặt đối tượng như thể nó đã được chuyển và thông báo bằng biểu tượng hoạt hình rằng phản hồi đang chờ.
    Nếu câu trả lời là phủ định, trình xử lý phản hồi sẽ chuyển đối tượng trở lại.

    Bối cảnh cũ, bối cảnh lỗi thời

    Ví dụ kéo"n"drop cũng đề cập đến vấn đề "ngữ cảnh cũ" - ngữ cảnh lỗi thời.

    Web là một môi trường nhiều người dùng. Nếu được sử dụng để điều hướng,
    Giả sử một cây bài viết, sau đó có nhiều người làm việc trên đó. Một trong số họ có thể xóa nhánh cây mà người kia đang làm việc: xung đột.

    Theo quy định, các phương tiện sau đây được sử dụng để khắc phục những sự cố như vậy:

    Chính sách chỉnh sửa

    Đây là lúc mọi người đều biết ai đang làm gì và ở cấp độ phân chia quyền lực cũng như giao tiếp cá nhân, việc xóa như vậy đã được thống nhất. Tùy chọn này rõ ràng là không an toàn nhưng thường hoạt động.

    Khóa và/hoặc kiểm soát phiên bản

    Khóa - chặn tài liệu đã chỉnh sửa.

    Kiểm soát phiên bản - mọi tài liệu mới đều trở thành một phiên bản nên các thay đổi sẽ không bao giờ bị mất. Việc lập phiên bản gây ra xung đột khi Petya bắt đầu chỉnh sửa tài liệu trước Vasya và lưu nó sau đó. Đồng thời, trong phiên bản mới nhất, những thay đổi của Vasya đã bị mất, mặc dù phiên bản áp chót (của Vasya) chắc chắn có sẵn trong hệ thống.

    Bạn có thể đọc thêm về khóa và lập phiên bản, chẳng hạn như trong tài liệu dành cho hệ thống kiểm soát phiên bản Subversion.

    Cập nhật ngữ cảnh tự động

    Vấn đề nội dung lỗi thời có thể được giải quyết 99% bằng tính năng tự động cập nhật tức thì.

    Trình duyệt duy trì kết nối liên tục với máy chủ (hoặc thỉnh thoảng đưa ra các yêu cầu khắc phục) - và những thay đổi cần thiết sẽ được gửi qua kênh này.

    Ví dụ: các bài viết mới đôi khi được tải vào một nhánh cây đang mở; giao diện thư- chữ cái mới.

    Nhìn chung, vấn đề bối cảnh lỗi thời liên quan trực tiếp đến vấn đề toàn vẹn dữ liệu. Trong mọi trường hợp, máy chủ chịu trách nhiệm kiểm tra tính toàn vẹn cuối cùng, cũng như xác thực biểu mẫu.

    AJAX - Nó là gì?

    Khi các cơ hội hiện có trở nên khan hiếm và không còn chỗ để cải thiện những gì hiện có thì đột phá về công nghệ sẽ xảy ra. Một bước đột phá như vậy là AJAX (JavaScript không đồng bộ và XML) - một cách tiếp cận để xây dựng giao diện người dùng các ứng dụng web trong đó trang web tự tải mà không cần tải lại người dùng cần dữ liệu. AJAX là một trong những thành phần của khái niệm DHTML.

    Công nghệ này mang lại cho chúng ta những gì? Hiện nay Phát triển web các ứng dụng có xu hướng phân biệt giữa phần máy khách và phần máy chủ, điều này quyết định việc sử dụng rộng rãi các mẫu như Smarty và XSLT. Bây giờ các dự án đang trở nên phức tạp và đan xen hơn công nghệ khác nhau trở nên quá tốn kém đối với thời gian của nhà phát triển. Vì vậy, ví dụ: tất cả các kiểu định dạng được đưa vào tệp CSS hoặc XSL, HTML hoặc dữ liệu XMLđược lưu trữ trong các phần khác, bộ xử lý máy chủ ở phần thứ ba, cơ sở dữ liệu ở phần thứ tư. Và nếu cách đây 5-6 năm, hầu hết mọi nơi bạn đều có thể thấy sự đan xen của tất cả những thứ này trong một tệp, thì giờ đây điều này ngày càng trở nên hiếm.

    Khi phát triển các dự án phức tạp hơn, cần có mã có cấu trúc và dễ đọc. Bạn không nên làm lộn xộn mã của lập trình viên với mã của trình thiết kế bố cục và mã của trình thiết kế bố cục với các chỉnh sửa của trình thiết kế, v.v.

    Cần phải phân biệt công việc. Vì vậy, chẳng hạn, một nhà thiết kế sẽ làm công việc của mình, một nhà thiết kế bố cục sẽ làm công việc của mình, một lập trình viên sẽ làm công việc của mình và không ai được can thiệp lẫn nhau. Do đó, mỗi người tham gia dự án sẽ chỉ cần biết dữ liệu mà mình sẽ phải làm việc. Trong trường hợp này, năng suất của nhóm và chất lượng của dự án tăng lên đáng kể. Hiện tại, vấn đề này đã được giải quyết thành công bằng cách sử dụng các mẫu, nhưng điều này cũng tạo ra những khó khăn nhất định, vì để kết nối Smarty, bạn cần kết nối mô-đun phần mềm xử lý mẫu và liên kết rõ ràng với cấu trúc dự án. Nhưng điều này không phải lúc nào cũng có thể thực hiện được và đòi hỏi những chi phí nhất định. Việc sử dụng XML + XSL sẽ dễ dàng hơn một chút vì chúng cung cấp nhiều chức năng hơn, nhưng đó chỉ là một giải pháp thay thế, không có gì hơn. Điều gì sẽ xảy ra nếu chúng ta hướng tới một thứ gì đó hoàn toàn mới cho phép chúng ta kết hợp mọi thứ tốt hơn bằng cách sử dụng khả năng của những gì chúng ta có? Hãy thử tưởng tượng JavaScript, có tất cả các khả năng của PHP hoặc Perl, bao gồm cả đồ họa và cơ sở dữ liệu, có khả năng mở rộng và thực tế thuận tiện hơn nhiều, đồng thời cũng có tính đa nền tảng.

    Vậy AJAX là gì? Mọi người lần đầu tiên bắt đầu nói về Ajax sau bài báo tháng 2 năm 2005 của Jesse James Garrett, “Phương pháp tiếp cận mới đối với các ứng dụng web”. Ajax không phải là một công nghệ độc lập. Đây là một ý tưởng dựa trên hai nguyên tắc chính.

    Sử dụng DHTML để thay đổi nội dung trang một cách linh hoạt.

    Sử dụng XMLHttpRequest để liên hệ với máy chủ một cách nhanh chóng.

    Việc sử dụng hai phương pháp này cho phép bạn tạo giao diện người dùng WEB thuận tiện hơn nhiều trên các trang web yêu cầu sự tương tác tích cực của người dùng. Sử dụng Ajax trở nên phổ biến nhất sau khi công ty Google bắt đầu tích cực sử dụng nó khi tạo các trang web của bạn, chẳng hạn như Gmail, Google maps và Google đề xuất. Việc tạo ra các trang web này đã khẳng định tính hiệu quả của phương pháp này.

    Vì vậy, chi tiết hơn: nếu chúng ta sử dụng mô hình ứng dụng WEB cổ điển:

    Máy khách, nhập địa chỉ của tài nguyên mà mình quan tâm vào thanh tìm kiếm, đến máy chủ và gửi yêu cầu tới nó. Máy chủ thực hiện các phép tính theo yêu cầu, truy cập cơ sở dữ liệu, v.v., sau đó dữ liệu nhận được sẽ được chuyển đến máy khách và nếu cần, sẽ được thay thế thành các mẫu và được trình duyệt xử lý. Kết quả là trang mà chúng tôi thấy và 80% dân số cả nước sử dụng WEB gọi Internet. Cái này mô hình cổ điển, đã cố gắng chứng tỏ bản thân và giành được cho mình một vị trí danh dự dưới ánh mặt trời. Đây là nhiều nhất mô hình đơn giản tương tác và do đó là phổ biến nhất. Tuy nhiên, nó ngày càng trở nên không đủ. Hãy tưởng tượng một trò chơi trực tuyến "Battleship", được chơi bởi hai người bạn thâm niên - một cư dân Nam Phi và một cư dân Nhật Bản. Bạn có thể sử dụng mô hình này như thế nào để làm cho trò chơi của họ trở nên thú vị nhất có thể? Trong mọi trường hợp, dữ liệu về tàu bị chìm sẽ được lưu trữ trên máy chủ và để kiểm tra xem đối thủ có thất bại hay không, cần phải làm mới trang mỗi lần và cập nhật dữ liệu lỗi thời. “Nhưng người ta đã phát minh ra bộ nhớ đệm,” bạn sẽ nói, và bạn sẽ hoàn toàn đúng, nhưng điều đó sẽ không khiến mọi việc dễ dàng hơn chút nào. Bộ nhớ đệm sẽ chỉ tăng tốc thời gian tương tác với máy chủ nhưng sẽ không loại bỏ nhu cầu tải lại trang. Ngoài ra, bạn có thể đặt thời gian nhất định tự cập nhật, nhưng trong trường hợp này trang sẽ được tải lại hoàn toàn.

    Bây giờ hãy xem mô hình tương tác AJAX:

    Trình tự hành động của khách hàng được giữ nguyên và rất có thể anh ta sẽ không hiểu điều gì sẽ xảy ra và từ AJAX sẽ chỉ được liên kết với tên của câu lạc bộ bóng đá. Nhưng về phía máy chủ, mọi thứ có vẻ khác.

    Khi truy cập vào máy chủ, một trang sẽ được tạo sẽ hiển thị cho người dùng và nhắc anh ta thực hiện một chuỗi hành động mà anh ta quan tâm. Với sự lựa chọn có ý thức (mặc dù không nhất thiết) của khách hàng, yêu cầu của anh ta sẽ liên hệ với mô-đun AJAX, mô-đun này sẽ thực hiện tất cả các phép tính mà anh ta quan tâm và làm việc với máy chủ như vậy. Nhưng có gì mới? Sự khác biệt chính là phương pháp này cho chúng ta cơ hội truy cập động vào máy chủ và thực hiện các hành động mà chúng ta quan tâm. Ví dụ: chúng ta cần truy cập vào cơ sở dữ liệu và lấy dữ liệu mà chúng ta quan tâm, sau đó chúng ta sẽ sử dụng. Chúng tôi sẽ lưu trữ dữ liệu trong một tệp XML sẽ được tạo động, do đó:

    Tạo một cái mới Đối tượng JavaScript:

    Var req = new ActiveXObject("Microsoft.XMLHTTP"); (đối với IE) var req = new XMLHttpRequest(); (Đối với mọi thứ khác)

    Sau đó chúng ta viết một hàm sử dụng đối tượng này

    Var req; hàm LoadXMLDoc(url) ( // nhánh cho đối tượng XMLHttpRequest nguyên gốc if (window.XMLHttpRequest) ( req = new XMLHttpRequest(); req.onreadystatechange = processReqChange; req.open("GET", url, true); req.send( null); // nhánh cho phiên bản IE/Windows ActiveX ) else if (window.ActiveXObject) ( req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) ( req.onreadystatechange = processReqChange; req.open("GET ", url, true); req.send(); ) ) )

    Điện thoại tập tin HTML chúng tôi viết một kịch bản sẽ:

    Hàm checkName(input, reply) ( if (response != "")( // Chế độ phản hồi message = document.getElementById("nameCheckFailed"); if (response == "1")( message.className = "error"; )else( message.className = "hidden"; ) )else( // Chế độ nhập url = "http://localhost/xml/checkUserName.php?q=" \\ + input; LoadXMLDoc(url); ) )

    Trong tệp localhost/xml/checkUserName.php chúng tôi xử lý dữ liệu nhận được từ dòng lệnh V. trong trường hợp này trong biến q. Và chúng tôi lưu kết quả vào Cấu trúc XML, mà chúng tôi lưu trữ trong cùng một tệp. Bằng cách này, chúng tôi có thể nhận và xử lý dữ liệu thu được từ cơ sở dữ liệu hoặc bất kỳ thứ gì khác mà chúng tôi cần. Ngoài ra, máy chủ sẽ chỉ xử lý dữ liệu mà chúng tôi cần cập nhật chứ không phải toàn bộ trang nếu được tải lại.

    Bây giờ chúng ta hãy quay lại với hai người bạn - những người yêu thích các trận hải chiến: trước sự xuất hiện của sự đổi mới này, chúng ta có thể làm như sau: kiểm tra tệp XML ba giây một lần séc này liên quan đến việc kiểm tra cơ sở dữ liệu lối đi mới, tức là nước đi của đối phương. Nếu thực hiện một động thái, trang sẽ đánh chìm tàu ​​mà không khởi động lại, do đó làm hỏng tâm trạng của những người tham gia trận chiến dưới nước. Chức năng này đạt được bằng cách sử dụng cơ bản Javascript và biểu định kiểu. Ví dụ này khá rõ ràng nhưng vẫn chưa hoàn chỉnh; việc ứng dụng công nghệ này còn quan trọng hơn nhiều.

    Tuy nhiên, không phải tất cả đều đơn giản như vậy. Bây giờ chúng ta hãy nhìn vào những đặc điểm tiêu cực.

    Thứ nhất, chúng ta chỉ có thể truyền dữ liệu bằng phương thức GET nên sẽ phải để lại một lượng lớn dữ liệu. Vấn đề này Tôi đã nhiều lần leo núi nguồn khác nhau, nhưng thưa quý vị, có những Cookie, loại này hoàn toàn có thể chấp nhận được trong trường hợp truyền nhiều dữ liệu hơn mức yêu cầu GET có thể đáp ứng và đến lượt mình, Javascript lại có các chức năng để làm việc với chúng.

    Vấn đề thứ hai là khả năng tương thích giữa nhiều trình duyệt. Đối tượng XMLHttpRequest chưa phải là một phần của bất kỳ tiêu chuẩn nào (mặc dù một cái gì đó tương tự đã được đề xuất trong đặc tả Tải và Lưu Cấp 3 của W3C DOM). Do đó, có hai phương pháp khác nhau để gọi đối tượng này trong mã script. Trong Internet Explorer, đối tượng ActiveX được gọi như sau:

    Var req = new ActiveXObject("Microsoft.XMLHTTP");

    Trong Mozilla và Safari, việc này dễ dàng hơn (vì nó là một đối tượng được tích hợp trong JavaScript):

    Var req = new XMLHttpRequest();

    Tất cả các trình duyệt hiện đại đều hỗ trợ đối tượng này và các vấn đề sẽ chỉ phát sinh đối với 1,8% người dùng (theo thống kê từ SpyLog) sử dụng các phiên bản trình duyệt rất cũ không hỗ trợ đối tượng này.

    Và cuối cùng là an ninh. Chúng ta hãy xem xét kỹ hơn về điều này. Vấn đề chính là tất cả dữ liệu và mã nguồn của các hàm JavaScript đều có thể được xem bằng cách xem mã nguồn theo đó, kẻ tấn công có thể theo dõi logic thực hiện yêu cầu và trong một số trường hợp nhất định, thực thi tập hợp lệnh mà hắn cần. Điều này không đóng vai trò đặc biệt khi chúng ta so sánh dữ liệu đơn giản, nhưng phải làm gì trong những tình huống phức tạp hơn, chẳng hạn như trong quá trình ủy quyền và cách chuyển mật khẩu trong trường hợp này. Như đã đề cập ở trên, Cookies đã ra tay giải cứu. Dữ liệu cần thiết có thể được gửi bằng cách sử dụng chúng và chúng cũng có thể được xử lý. Hãy lấy một ví dụ trong đó người dùng sẽ được xác thực bằng công nghệ mà bài viết hướng tới.

    Khi tạo một trang, chúng tôi tạo ra các giá trị duy nhất, sau đó chúng tôi đặt các giá trị này vào các biến máy chủ. Và trong Cookie trình duyệt, sau đó trong quá trình ủy quyền, chúng tôi sẽ nhận được tên người dùng và mật khẩu mà chúng tôi cần chuyển đến mô-đun xử lý trên máy chủ.

    Sau khi người dùng nhập dữ liệu và nhấn nút Gửi, mật khẩu của anh ta sẽ được nhập vào Cookies và tên người dùng được truyền công khai - có liên kết chẳng hạn http://www.mubestajax.com/ajax.php?login=pupkin Khi nhận dữ liệu, trước hết máy chủ sẽ tiến hành đối chiếu dữ liệu nhận được. Vì các giá trị mà chúng tôi tạo từ khi khởi động máy chủ và sau đó chuyển chúng đến các biến và cookie của máy chủ toàn cầu phải khớp nhau nên khi kiểm tra tính toàn vẹn của dữ liệu được truyền, trong trường hợp không khớp, chương trình sẽ ngừng hoạt động. Nếu mọi thứ diễn ra tốt đẹp, thì tất cả dữ liệu cần thiết sẽ được trích xuất và các tính toán cũng như công việc cần thiết sẽ được thực hiện. Phương pháp bảo vệ này khá đơn giản và hiệu quả. Nếu không có dự án lớn nó sẽ không vừa.

    Khi vấn đề bảo mật được đặt lên hàng đầu, tốt hơn hết bạn nên sử dụng các giải pháp phức tạp và đáng tin cậy hơn. Nhưng trong hầu hết các trường hợp, những biện pháp phòng ngừa này sẽ là quá đủ, vì việc sử dụng các mô-đun phức tạp hơn đòi hỏi phải sử dụng các công nghệ không phải lúc nào cũng có trong phần mềm tiêu chuẩn. máy chủ hiện đại, tính năng chính của nó là sự đơn giản. Đây là lý do tại sao các công nghệ như MySQL và PHP đã trở nên rất phổ biến, bởi vì... chúng mang lại sự dễ dàng vận hành với mức tiêu thụ tài nguyên thấp và đủ độ tin cậy. Và trong khuôn khổ phần mềm này, giải pháp đề xuất ở trên là phù hợp nhất.

    Tóm lại, tôi muốn nói rằng AJAX, một mặt, là một bước nhảy vọt vượt bậc trong kỹ thuật WEB, nhưng mặt khác, nó là một giai đoạn phát triển kéo dài đã mở ra những chân trời mới trong lĩnh vực phát triển phần mềm. . Đồng thời, công nghệ này vẫn còn khá “thô sơ” vì việc sử dụng nó vào thời điểm hiện tại khá là một ngoại lệ thú vị. Nhưng tôi chắc chắn rằng mọi người sẽ nghe về nó nhiều lần.

    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 trang động.

    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ọc 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 với sử dụ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. Để biết thêm thông tin đầy đủ 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 một trang HTML hoàn toàn mới, sau đó trình duyệt sẽ hiển thị, 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 được ẩn khỏi khách truy cập, họ không cần phải rời khỏi trang mình đang xem. 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ý các 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 trừu tượng hóa 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"JavaScript không đồng bộ và XML" ( JavaScript không đồng bộ và XML). 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.

    Chúng ta hãy làm NHẬN yêu cầu sử dụ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 cách sử dụng Phương thức HTTP GET (được sử dụng để truy xuất URL, chẳng hạn 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).

    TRONG hình thức đơn giản nhất bạn có thể gọi phương thức như thế này:

    Trong đó url là URL của tài nguyên mà từ đó dự kiến ​​sẽ có phản hồ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ù 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 là 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à ví dụ về cách 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 ví dụ đơn giản trên máy chủ tập tin văn bản 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 cho " + 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 phần tử nút "Nhận dự báo thời tiết" có 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 họa cách hoạt động của một yêu cầu AJAX bằng phương thức $.get().

    Từ tác giả: Loạt bài này Các bài viết được thiết kế nhằm giới thiệu cho các nhà thiết kế front-end và các nhà phát triển mới làm quen với công nghệ AJAX, công nghệ front-end chính. Trong bài học đầu tiên, chúng ta sẽ đề cập đến những điều cơ bản về AJAX, bắt đầu tìm hiểu các chi tiết khác nhau của công nghệ này, tìm hiểu nó là gì, cách thức hoạt động và những hạn chế của nó là gì.

    Bắt đầu nào! Xin lưu ý: điều này giả định rằng bạn đã biết các công nghệ giao diện người dùng cơ bản như HTML và CSS.

    AJAX là gì?

    AJAX là viết tắt của JavaScript và XML không đồng bộ. AJAX đề cập đến nhiều công nghệ và nó không phải là mới. Nó thực sự là một nhóm công nghệ (HTML, CSS, Javascript, XML, v.v.) được gắn kết với nhau để tạo ra các ứng dụng web hiện đại.

    Sử dụng AJAX, máy khách (trình duyệt) giao tiếp với máy chủ và yêu cầu dữ liệu từ nó. Phản hồi nhận được sẽ được xử lý và các thay đổi được thực hiện đối với trang mà không cần tải lại hoàn toàn. Hãy nhìn vào từ viết tắt AJAX:

    "Không đồng bộ" có nghĩa là khi máy khách yêu cầu dữ liệu từ máy chủ, trình duyệt sẽ không bị treo cho đến khi nhận được phản hồi. Ngược lại, người dùng có thể điều hướng qua các trang. Khi máy chủ đã trả về phản hồi, phản hồi sẽ bắt đầu được xử lý ở chế độ nền bằng các chức năng thích hợp.

    "JavaScript" là ngôn ngữ lập trình được sử dụng để tạo đối tượng yêu cầu AJAX, phân tích phản hồi đó và cập nhật DOM của trang.

    Máy khách sử dụng API XMLHttpRequest hoặc XHR để gửi yêu cầu đến máy chủ. API (giao diện chương trình ứng dụng) là một tập hợp các phương thức xác định các quy tắc giao tiếp giữa hai bên quan tâm. Tuy nhiên, dữ liệu đến từ yêu cầu AJAX có thể ở bất kỳ định dạng nào, không chỉ XML.

    Cách thức hoạt động của AJAX

    Để hiểu nguyên lý làm việc cơ bản chúng ta hãy xem hình ảnh dưới đây:

    Hình ảnh mô tả tập lệnh AJAX tiêu chuẩn:

    Người dùng muốn xem thêm bài viết và click vào nút mong muốn. Sự kiện này kích hoạt lệnh gọi AJAX.

    Yêu cầu được gửi đến máy chủ. Dữ liệu khác nhau có thể được gửi cùng với yêu cầu. Yêu cầu có thể được gửi đến một tệp tĩnh (ví dụ: example.php) được lưu trữ trên máy chủ. Bạn cũng có thể thực thi các tập lệnh động (functions.php), ở mỗi giai đoạn giao tiếp sẽ diễn ra với cơ sở dữ liệu (hoặc hệ thống khác) để truy xuất thông tin cần thiết.

    Cơ sở dữ liệu sẽ gửi lại các bài viết được yêu cầu đến máy chủ. Và máy chủ sẽ gửi chúng đến trình duyệt.

    JavaScript phân tích phản hồi và cập nhật một phần của DOM (cấu trúc trang). Trong ví dụ của chúng tôi, chỉ có thanh bên sẽ được cập nhật. Phần còn lại của trang vẫn không thay đổi.

    Với suy nghĩ này, bạn sẽ hiểu tại sao AJAX lại là một công nghệ quan trọng trong internet hiện đại. Bằng cách phát triển các ứng dụng chạy AJAX, chúng ta có thể kiểm soát lượng lớn dữ liệu được tải xuống từ máy chủ.

    Ví dụ trực tiếp sử dụng AJAX

    AJAX bây giờ có mặt ở khắp mọi nơi. Để thuyết phục bạn về điều này, chúng tôi sẽ xem xét ngắn gọn một số trang web phổ biến tận dụng tối đa công nghệ này.

    Đầu tiên, hãy xem Facebook và Twitter hoạt động như thế nào. Khi bạn cuộn xuống trang, AJAX sẽ tải nội dung mới. Ngoài ra, nếu bạn thích hoặc không thích các câu hỏi và câu trả lời trên Stack Overflow, AJAX sẽ được kích hoạt lại. Ngay khi bạn nhập nội dung nào đó vào thanh tìm kiếm trên Google hoặc Youtube, nhiều yêu cầu AJAX sẽ được kích hoạt.

    Hơn nữa, nếu muốn, chúng ta có thể theo dõi những yêu cầu này. Ví dụ, trong Bảng điều khiển Chromeđiều này có thể được thực hiện bằng cách nhấp chuột phải và kích hoạt chức năng Log XMLHttpRequests.

    Cách tạo yêu cầu

    Chúng tôi đã nói ở trên rằng API XMLHttpRequest được sử dụng để tạo yêu cầu. Ngoài ra, jQuery, thư viện JS phổ biến nhất, có nhiều hàm và phương thức Ajax khác nhau. Trong một loạt bài viết, chúng ta sẽ xem xét các ví dụ khác nhau trong JS và JQuery thuần túy để gửi yêu cầu đến máy chủ.

    Quản lý yêu cầu

    Dữ liệu được lấy từ máy chủ có thể được lưu trữ ở nhiều định dạng khác nhau. XML, JSON, JSONP, văn bản thuần túy và HTML.

    XML

    XML (Ngôn ngữ đánh dấu mở rộng) là một trong những định dạng phổ biến nhất để trao đổi dữ liệu giữa các ứng dụng. Định dạng này tương tự như HTML và sử dụng các thẻ làm cấu trúc. Tuy nhiên, không có thẻ tạo sẵn trong XML; chúng tôi tự đặt chúng. Cấu trúc ví dụ dưới đây:

    Mike Mathew Người Úc Tiếng Anh Tiếng Tây Ban Nha Tiếng Pháp Tiếng Nga

    < person >

    < name >Mike< / name >

    < surname >Mathew< / surname >

    < nationality >người Úc< / nationality >

    < languages >

    < language >Tiếng Anh< / language >

    < language >người Tây Ban Nha< / language >

    < language >người Pháp< / language >

    < language >tiếng Nga< / language >

    < / languages >

    < / person >

    Mạng đã đầy biên tập viên trực tuyến, nhờ đó bạn có thể tạo các tài liệu XML. Yêu thích của tôi là: XMLGrid.net. Trong trình chỉnh sửa này, ví dụ của chúng tôi trông như thế này:

    JSON

    JSON( Đối tượng JavaScript Ký hiệu là một định dạng trao đổi dữ liệu phổ biến khác. Trong JSON, ví dụ trên sẽ trông như thế này:

    ("tên" : "Mike", "họ" : "Mathew", "quốc tịch" : "Úc", "ngôn ngữ" : ["tiếng Anh", "tiếng Tây Ban Nha", "tiếng Pháp", "tiếng Nga"] )

    "tên" : "Mike",

    Trình soạn thảo JSON trực tuyến

    Trong trình soạn thảo JSN, ví dụ của chúng ta sẽ trông như thế này:

    Hạn chế trong yêu cầu AJAX

    Trước khi bắt đầu sử dụng AJAX, bạn cần biết về những hạn chế. Chúng ta sẽ chỉ xem xét hai vấn đề.
    Đầu tiên là lỗi trong bảng điều khiển Chrome:

    Lỗi xuất hiện khi yêu cầu tham chiếu đến tệp cục bộ. Trong ví dụ này, chúng tôi muốn truy cập dữ liệu từ tập tin cục bộ(Demo.json), không được lưu trữ trên máy chủ. Để giải quyết vấn đề này, bạn có thể cài đặt máy chủ cục bộ và lưu trữ tệp ở đó. Vấn đề thứ hai:

    Lỗi xuất hiện khi dữ liệu từ yêu cầu được lưu trữ trên một tên miền khác với trang của chúng tôi (lỗi được gọi là quy tắc hạn chế tên miền). Trong ví dụ của chúng tôi, dữ liệu được lưu trữ trên Máy chủ cục bộ và trang được lưu trữ trên máy chủ Codepen. May mắn thay, những lỗi này có thể được giải quyết.

    Một cách là CORS từ W3C. Nhưng cơ chế này yêu cầu thay đổi cấu hình của các tệp trên máy chủ. Ví dụ: trang này mô tả cách định cấu hình máy chủ Apache. Một cách khác là JSONP (JSON có phần đệm).

    Phần kết luận

    Phần tổng quan này đã cung cấp cho bạn ý tưởng về AJAX là gì, bạn có thể đã gặp phải nó ở đâu và có những vấn đề tiềm ẩn nào. Chúng tôi cũng đã xem xét các định dạng trao đổi dữ liệu phổ biến nhất. Trong bài viết tiếp theo chúng ta sẽ xem xét một ví dụ hoạt động. Thấy bạn!