Ajax là một trong những công cụ quan trọng mà mọi nhà phát triển web nên biết. Khái niệm mà AJAX sử dụng xuất hiện vào khoảng năm 1998 nhưng AJAX đã trở nên phổ biến khi một bài báo có tiêu đề “AJAX. Một cách tiếp cận mới cho ứng dụng web được xuất bản
AJAX là gì?
Trước khi biết AJAX là gì, chúng ta nên hiểu rõ rằng AJAX không phải là một ngôn ngữ lập trình. Chúng ta đều biết rằng AJAX là viết tắt của Javascript và XML không đồng bộ. Vì vậy, đúng như tên gọi của nó, nó giúp cập nhật các trang web một cách không đồng bộ bằng cách gửi và nhận dữ liệu từ máy chủ web. Vì vậy, AJAX này đã giải quyết vấn đề tải lại toàn bộ trang mặc dù có yêu cầu cập nhật một thành phần nhỏ của trang
Nhiều người nhầm lẫn rằng AJAX chỉ sử dụng XML để truyền dữ liệu khi thấy X là viết tắt của XML trong AJAX. Nhưng AJAX có thể sử dụng XML, JSON hoặc bất kỳ văn bản thuần túy nào khác để truyền dữ liệu
Hoạt động của AJAX
AJAX hoạt động theo quy trình năm bước-
- Khi có bất kỳ sự kiện nào xảy ra đối với việc truyền dữ liệu thì một đối tượng có tên XMLHttpRequest sẽ được tạo
- Đối tượng này sẽ gửi yêu cầu đến máy chủ
- Sau đó, máy chủ sẽ xử lý yêu cầu và gửi lại phản hồi
- Sau đó, phản hồi đó được Javascript lấy lại
- Sau đó, hành động bắt buộc được thực hiện mà không cần tải lại toàn bộ trang
Cho đến bây giờ chúng ta đã hiểu AJAX là gì và loại vấn đề nào nó giải quyết, nhưng bây giờ chúng ta sẽ hiểu Ajax khác với Javascript như thế nào và các thư viện, khung và Môi trường thời gian chạy của nó
Bài viết này hướng dẫn bạn những kiến thức cơ bản về AJAX và cung cấp cho bạn một số ví dụ thực hành đơn giản để bạn bắt đầu
AJAX là viết tắt của JavaScript và XML không đồng bộ. Tóm lại, đó là việc sử dụng đối tượng
httpRequest.onreadystatechange = [] => {
// Process the server response here.
};
2 để giao tiếp với các máy chủ. Nó có thể gửi và nhận thông tin ở nhiều định dạng khác nhau, bao gồm tệp JSON, XML, HTML và văn bản. Đặc điểm hấp dẫn nhất của AJAX là tính chất "không đồng bộ" của nó, có nghĩa là nó có thể giao tiếp với máy chủ, trao đổi dữ liệu và cập nhật trang mà không cần phải làm mới trangHai tính năng chính của AJAX cho phép bạn thực hiện những việc sau
- Gửi yêu cầu đến máy chủ mà không cần tải lại trang
- Nhận và làm việc với dữ liệu từ máy chủ
Để thực hiện một yêu cầu HTTP tới máy chủ bằng JavaScript, bạn cần một phiên bản của một đối tượng có chức năng cần thiết. Đây là nơi mà
httpRequest.onreadystatechange = [] => {
// Process the server response here.
};
2 xuất hiệnconst httpRequest = new XMLHttpRequest[];
Sau khi thực hiện yêu cầu, bạn sẽ nhận được phản hồi. Ở giai đoạn này, bạn cần báo cho đối tượng
httpRequest.onreadystatechange = [] => {
// Process the server response here.
};
2 hàm JavaScript nào sẽ xử lý phản hồi, bằng cách đặt thuộc tính httpRequest.onreadystatechange = [] => {
// Process the server response here.
};
5 của đối tượng thành hàm được gọi khi yêu cầu thay đổi trạng thái, như thế nàyfunction handler[] {
// Process the server response here.
}
httpRequest.onreadystatechange = handler;
Lưu ý rằng không có dấu ngoặc đơn hoặc tham số sau tên hàm, bởi vì bạn đang gán tham chiếu cho hàm chứ không thực sự gọi nó. Ngoài ra, thay vì đặt tên hàm, bạn có thể sử dụng kỹ thuật JavaScript để xác định hàm một cách nhanh chóng [được gọi là "hàm ẩn danh"] để xác định các hành động sẽ xử lý phản hồi, như sau
httpRequest.onreadystatechange = [] => {
// Process the server response here.
};
Tiếp theo, sau khi khai báo điều gì sẽ xảy ra khi bạn nhận được phản hồi, bạn cần thực sự thực hiện yêu cầu, bằng cách gọi các phương thức
httpRequest.onreadystatechange = [] => {
// Process the server response here.
};
6 và httpRequest.onreadystatechange = [] => {
// Process the server response here.
};
7 của đối tượng yêu cầu HTTP, như thế nàyhttpRequest.open['GET', '//www.example.org/some.file', true];
httpRequest.send[];
- Tham số đầu tiên của lệnh gọi tới
6 là phương thức yêu cầu HTTP – GET, POST, HEAD hoặc phương thức khác được máy chủ của bạn hỗ trợ. Giữ phương thức viết hoa tất cả theo tiêu chuẩn HTTP, nếu không một số trình duyệt [như Firefox] có thể không xử lý yêu cầu. Để biết thêm thông tin về các phương thức yêu cầu HTTP có thể có, hãy kiểm trahttpRequest.onreadystatechange = [] => { // Process the server response here. };
- Tham số thứ hai là URL bạn đang gửi yêu cầu tới. Là một tính năng bảo mật, theo mặc định, bạn không thể gọi URL trên miền của bên thứ ba. Đảm bảo sử dụng tên miền chính xác trên tất cả các trang của bạn, nếu không bạn sẽ nhận được lỗi "quyền bị từ chối" khi gọi tới số
6. Một cạm bẫy phổ biến là truy cập trang web của bạn bằnghttpRequest.onreadystatechange = [] => { // Process the server response here. };
0, nhưng lại cố gọi các trang bằnghttpRequest.open['GET', '//www.example.org/some.file', true]; httpRequest.send[];
1. Nếu bạn thực sự cần gửi yêu cầu đến một miền khác, hãy xem Kiểm soát truy cập HTTP [CORS]httpRequest.open['GET', '//www.example.org/some.file', true]; httpRequest.send[];
- Tham số thứ ba tùy chọn đặt xem yêu cầu có không đồng bộ hay không. Nếu
2 [mặc định], việc thực thi JavaScript sẽ tiếp tục và người dùng có thể tương tác với trang trong khi phản hồi của máy chủ vẫn chưa đến. Đây là chữ A đầu tiên trong AJAXhttpRequest.open['GET', '//www.example.org/some.file', true]; httpRequest.send[];
Tham số của phương thức
httpRequest.onreadystatechange = [] => {
// Process the server response here.
};
7 có thể là bất kỳ dữ liệu nào bạn muốn gửi đến máy chủ nếu httpRequest.open['GET', '//www.example.org/some.file', true];
httpRequest.send[];
4 gửi yêu cầu. Dữ liệu biểu mẫu phải được gửi ở định dạng mà máy chủ có thể phân tích cú pháp, chẳng hạn như chuỗi truy vấn"name=value&anothername="+encodeURIComponent[myVar]+"&so=on"
hoặc các định dạng khác, như
httpRequest.open['GET', '//www.example.org/some.file', true];
httpRequest.send[];
5, JSON, XML, v.v.Lưu ý rằng nếu bạn muốn
httpRequest.open['GET', '//www.example.org/some.file', true];
httpRequest.send[];
4 dữ liệu, bạn có thể phải đặt loại MIME của yêu cầu. Ví dụ: sử dụng thông tin sau trước khi gọi httpRequest.onreadystatechange = [] => {
// Process the server response here.
};
7 cho dữ liệu biểu mẫu được gửi dưới dạng chuỗi truy vấnhttpRequest.setRequestHeader['Content-Type', 'application/x-www-form-urlencoded'];
Khi gửi yêu cầu, bạn đã cung cấp tên của hàm JavaScript để xử lý phản hồi
httpRequest.onreadystatechange = nameOfTheFunction;
Chức năng này nên làm gì? . Nếu trạng thái có giá trị là
httpRequest.open['GET', '//www.example.org/some.file', true];
httpRequest.send[];
8 [tương ứng với 4], điều đó có nghĩa là đã nhận được toàn bộ phản hồi của máy chủ và bạn có thể tiếp tục xử lý phản hồi đóif [httpRequest.readyState === XMLHttpRequest.DONE] {
// Everything is good, the response was received.
} else {
// Not ready yet.
}
Danh sách đầy đủ các giá trị
httpRequest.open['GET', '//www.example.org/some.file', true];
httpRequest.send[];
9 được ghi lại tại XMLHTTPRequest. readyState và như sau- 0 [chưa được khởi tạo] hoặc [yêu cầu chưa được khởi tạo]
- 1 [đang tải] hoặc [đã thiết lập kết nối máy chủ]
- 2 [đã tải] hoặc [đã nhận yêu cầu]
- 3 [tương tác] hoặc [xử lý yêu cầu]
- 4 [hoàn thành] hoặc [yêu cầu đã hoàn thành và sẵn sàng phản hồi]
Tiếp theo, hãy kiểm tra mã trạng thái phản hồi HTTP của phản hồi HTTP. Các mã có thể được liệt kê tại W3C. Trong ví dụ sau, chúng tôi phân biệt giữa lệnh gọi AJAX thành công và không thành công bằng cách kiểm tra mã phản hồi
if [httpRequest.status === 200] {
// Perfect!
} else {
// There was a problem with the request.
// For example, the response may have a 404 [Not Found]
// or 500 [Internal Server Error] response code.
}
Sau khi kiểm tra trạng thái của yêu cầu và mã trạng thái HTTP của phản hồi, bạn có thể làm bất cứ điều gì bạn muốn với dữ liệu mà máy chủ đã gửi. Bạn có hai tùy chọn để truy cập dữ liệu đó
"name=value&anothername="+encodeURIComponent[myVar]+"&so=on"
1 – trả về phản hồi của máy chủ dưới dạng một chuỗi văn bản"name=value&anothername="+encodeURIComponent[myVar]+"&so=on"
2 – trả về phản hồi dưới dạng đối tượng"name=value&anothername="+encodeURIComponent[myVar]+"&so=on"
3 mà bạn có thể duyệt bằng các hàm JavaScript DOM
Lưu ý rằng các bước trên chỉ có hiệu lực nếu bạn đã sử dụng yêu cầu không đồng bộ [tham số thứ ba của
httpRequest.onreadystatechange = [] => {
// Process the server response here.
};
6 không được chỉ định hoặc được đặt thành httpRequest.open['GET', '//www.example.org/some.file', true];
httpRequest.send[];
2]. Nếu bạn đã sử dụng một yêu cầu đồng bộ, bạn không cần chỉ định một chức năng, nhưng điều này rất không được khuyến khích vì nó tạo ra trải nghiệm người dùng tồi tệHãy kết hợp tất cả lại với một yêu cầu HTTP đơn giản. JavaScript của chúng tôi sẽ yêu cầu một tài liệu HTML,
"name=value&anothername="+encodeURIComponent[myVar]+"&so=on"6, chứa văn bản "Tôi là một bài kiểm tra. " Sau đó, chúng tôi sẽ
"name=value&anothername="+encodeURIComponent[myVar]+"&so=on"7 nội dung của phản hồi. Lưu ý rằng ví dụ này sử dụng vanilla JavaScript — không liên quan đến jQuery. Ngoài ra, các tệp HTML, XML và PHP phải được đặt trong cùng một thư mục
Make a request
[[] => {
let httpRequest;
document
.getElementById["ajaxButton"]
.addEventListener["click", makeRequest];
function makeRequest[] {
httpRequest = new XMLHttpRequest[];
if [!httpRequest] {
alert["Giving up :[ Cannot create an XMLHTTP instance"];
return false;
}
httpRequest.onreadystatechange = alertContents;
httpRequest.open["GET", "test.html"];
httpRequest.send[];
}
function alertContents[] {
if [httpRequest.readyState === XMLHttpRequest.DONE] {
if [httpRequest.status === 200] {
alert[httpRequest.responseText];
} else {
alert["There was a problem with the request."];
}
}
}
}][];
trong ví dụ này
- Người dùng nhấp vào nút "Đặt yêu cầu";
- Trình xử lý sự kiện gọi hàm
"name=value&anothername="+encodeURIComponent[myVar]+"&so=on"
8; - Yêu cầu được đưa ra và sau đó [
5] việc thực hiện được chuyển chohttpRequest.onreadystatechange = [] => { // Process the server response here. };
0;httpRequest.setRequestHeader['Content-Type', 'application/x-www-form-urlencoded'];
0 kiểm tra xem đã nhận được phản hồi và OK chưa, sau đóhttpRequest.setRequestHeader['Content-Type', 'application/x-www-form-urlencoded'];
"name=value&anothername="+encodeURIComponent[myVar]+"&so=on"
7 nội dung của tệp"name=value&anothername="+encodeURIComponent[myVar]+"&so=on"
6
Ghi chú. Nếu bạn đang gửi yêu cầu tới một đoạn mã sẽ trả về XML, thay vì tệp HTML tĩnh, bạn phải đặt tiêu đề phản hồi để hoạt động trong Internet Explorer. Nếu bạn không đặt tiêu đề
httpRequest.setRequestHeader['Content-Type', 'application/x-www-form-urlencoded'];
4, IE sẽ đưa ra lỗi "Đối tượng mong đợi" của JavaScript sau dòng mà bạn đã cố truy cập một phần tử XMLGhi chú. Nếu bạn không đặt tiêu đề
httpRequest.setRequestHeader['Content-Type', 'application/x-www-form-urlencoded'];
5, trình duyệt sẽ lưu phản hồi vào bộ đệm ẩn và không bao giờ gửi lại yêu cầu, khiến việc gỡ lỗi trở nên khó khăn. Bạn cũng có thể thêm tham số GET luôn khác, chẳng hạn như dấu thời gian hoặc số ngẫu nhiên [xem tài liệu tham khảo]Ghi chú. Nếu biến
httpRequest.setRequestHeader['Content-Type', 'application/x-www-form-urlencoded'];
6 được sử dụng trên toàn cầu, các hàm cạnh tranh gọi ____17_______8 có thể ghi đè lên nhau, gây ra tình trạng cạnh tranh. Việc khai báo biến cục bộ httpRequest.setRequestHeader['Content-Type', 'application/x-www-form-urlencoded'];
6 cho một bao đóng chứa các hàm AJAX sẽ tránh được điều nàyTrong trường hợp xảy ra lỗi giao tiếp [chẳng hạn như máy chủ gặp sự cố], một ngoại lệ sẽ được đưa ra trong phương thức
httpRequest.onreadystatechange = [] => {
// Process the server response here.
};
5 khi truy cập trạng thái phản hồi. Để giảm thiểu vấn đề này, bạn có thể gói câu lệnh httpRequest.onreadystatechange = nameOfTheFunction;
0 của mình trong một câu lệnh httpRequest.onreadystatechange = nameOfTheFunction;
1function handler[] {
// Process the server response here.
}
httpRequest.onreadystatechange = handler;
0Trong ví dụ trước, sau khi nhận được phản hồi cho yêu cầu HTTP, chúng tôi đã sử dụng thuộc tính
httpRequest.onreadystatechange = nameOfTheFunction;
2 của đối tượng yêu cầu, thuộc tính này chứa nội dung của tệp "name=value&anothername="+encodeURIComponent[myVar]+"&so=on"6. Bây giờ, hãy thử thuộc tính
httpRequest.onreadystatechange = nameOfTheFunction;
4Trước hết, hãy tạo một tài liệu XML hợp lệ mà chúng ta sẽ yêu cầu sau này. Tài liệu [
httpRequest.onreadystatechange = nameOfTheFunction;
5] có nội dung saufunction handler[] {
// Process the server response here.
}
httpRequest.onreadystatechange = handler;
1Tiếp theo, trong
"name=value&anothername="+encodeURIComponent[myVar]+"&so=on"8, chúng ta cần thay thế
"name=value&anothername="+encodeURIComponent[myVar]+"&so=on"6 bằng tệp XML mà chúng ta vừa tạo
function handler[] {
// Process the server response here.
}
httpRequest.onreadystatechange = handler;
2Sau đó, trong
httpRequest.setRequestHeader['Content-Type', 'application/x-www-form-urlencoded'];
0, chúng ta cần thay thế dòng httpRequest.onreadystatechange = nameOfTheFunction;
9 bằngfunction handler[] {
// Process the server response here.
}
httpRequest.onreadystatechange = handler;
3Đoạn mã này lấy đối tượng
"name=value&anothername="+encodeURIComponent[myVar]+"&so=on"3 được cung cấp bởi
httpRequest.onreadystatechange = nameOfTheFunction;
4 và sử dụng các phương thức DOM để truy cập một số dữ liệu có trong tài liệu XMLCuối cùng, hãy gửi một số dữ liệu đến máy chủ và nhận phản hồi. Lần này, JavaScript của chúng tôi sẽ yêu cầu một trang động,
if [httpRequest.readyState === XMLHttpRequest.DONE] {
// Everything is good, the response was received.
} else {
// Not ready yet.
}
2, trang này sẽ lấy dữ liệu chúng tôi gửi và trả về một chuỗi "đã tính" - "Xin chào, [dữ liệu người dùng]. " - mà chúng tôi sẽ if [httpRequest.readyState === XMLHttpRequest.DONE] {
// Everything is good, the response was received.
} else {
// Not ready yet.
}
3Trước tiên, chúng tôi sẽ thêm một hộp văn bản vào HTML của mình để người dùng có thể nhập tên của họ
function handler[] {
// Process the server response here.
}
httpRequest.onreadystatechange = handler;
4Chúng tôi cũng sẽ thêm một dòng vào trình xử lý sự kiện của mình để lấy dữ liệu của người dùng từ hộp văn bản và gửi nó đến hàm
"name=value&anothername="+encodeURIComponent[myVar]+"&so=on"8 cùng với URL của tập lệnh phía máy chủ của chúng tôi
function handler[] {
// Process the server response here.
}
httpRequest.onreadystatechange = handler;
5Chúng tôi cần sửa đổi
"name=value&anothername="+encodeURIComponent[myVar]+"&so=on"8 để chấp nhận dữ liệu người dùng và chuyển dữ liệu đó đến máy chủ. Chúng tôi sẽ thay đổi phương thức yêu cầu từ
if [httpRequest.readyState === XMLHttpRequest.DONE] {
// Everything is good, the response was received.
} else {
// Not ready yet.
}
6 thành httpRequest.open['GET', '//www.example.org/some.file', true];
httpRequest.send[];
4 và bao gồm dữ liệu của chúng tôi dưới dạng tham số trong lệnh gọi tới if [httpRequest.readyState === XMLHttpRequest.DONE] {
// Everything is good, the response was received.
} else {
// Not ready yet.
}
8function handler[] {
// Process the server response here.
}
httpRequest.onreadystatechange = handler;
6Hàm
httpRequest.setRequestHeader['Content-Type', 'application/x-www-form-urlencoded'];
0 có thể được viết giống như ở Bước 3 để cảnh báo chuỗi đã tính của chúng ta, nếu đó là tất cả thì máy chủ trả về. Tuy nhiên, giả sử máy chủ sẽ trả về cả chuỗi được tính toán và dữ liệu người dùng ban đầu. Vì vậy, nếu người dùng của chúng tôi nhập "Jane" vào hộp văn bản, phản hồi của máy chủ sẽ như thế nàyfunction handler[] {
// Process the server response here.
}
httpRequest.onreadystatechange = handler;
7Để sử dụng dữ liệu này trong phạm vi
httpRequest.setRequestHeader['Content-Type', 'application/x-www-form-urlencoded'];
0, chúng tôi không thể chỉ thông báo cho httpRequest.onreadystatechange = nameOfTheFunction;
2, chúng tôi phải phân tích cú pháp và thông báo cho if [httpRequest.status === 200] {
// Perfect!
} else {
// There was a problem with the request.
// For example, the response may have a 404 [Not Found]
// or 500 [Internal Server Error] response code.
}
2, thuộc tính mà chúng tôi muốnfunction handler[] {
// Process the server response here.
}
httpRequest.onreadystatechange = handler;
8Tệp
if [httpRequest.readyState === XMLHttpRequest.DONE] {
// Everything is good, the response was received.
} else {
// Not ready yet.
}
2 phải chứa các nội dung saufunction handler[] {
// Process the server response here.
}
httpRequest.onreadystatechange = handler;
9Để biết thêm về các phương thức DOM, hãy nhớ xem Mô hình đối tượng tài liệu [DOM]
Một ví dụ đơn giản khác sau đây - ở đây chúng tôi đang tải một tệp văn bản qua XHR, cấu trúc của nó được giả định là như thế này
httpRequest.onreadystatechange = [] => {
// Process the server response here.
};
0Sau khi tệp văn bản được tải, chúng tôi
if [httpRequest.status === 200] {
// Perfect!
} else {
// There was a problem with the request.
// For example, the response may have a 404 [Not Found]
// or 500 [Internal Server Error] response code.
}
4 các mục thành một mảng ở mỗi ký tự dòng mới [if [httpRequest.status === 200] {
// Perfect!
} else {
// There was a problem with the request.
// For example, the response may have a 404 [Not Found]
// or 500 [Internal Server Error] response code.
}
5 - về cơ bản là nơi mỗi ngắt dòng nằm trong tệp văn bản], sau đó in danh sách đầy đủ các dấu thời gian và dấu thời gian cuối cùng lên trangĐiều này được lặp lại sau mỗi 5 giây, sử dụng lệnh gọi
if [httpRequest.status === 200] {
// Perfect!
} else {
// There was a problem with the request.
// For example, the response may have a 404 [Not Found]
// or 500 [Internal Server Error] response code.
}
6. Ý tưởng là một loại tập lệnh phía máy chủ nào đó sẽ liên tục cập nhật tệp văn bản với dấu thời gian mới và mã XHR của chúng tôi sẽ được sử dụng để báo cáo dấu thời gian mới nhất ở phía máy khách