Làm cách nào để chuyển đổi biến jquery thành biến php mà không cần sử dụng ajax?

Hôm nay, chúng ta sẽ khám phá khái niệm AJAX với PHP và JavaScript. Kỹ thuật AJAX  giúp bạn cải thiện giao diện người dùng của ứng dụng và nâng cao trải nghiệm tổng thể của người dùng cuối

Cách sử dụng AJAX trong PHP và jQuery

AJAX là gì?

AJAX là viết tắt của JavaScript và XML không đồng bộ và nó cho phép bạn tìm nạp nội dung từ máy chủ phụ trợ một cách không đồng bộ mà không cần làm mới trang. Do đó, nó cho phép bạn cập nhật nội dung của trang web mà không cần tải lại

Hãy xem một ví dụ để hiểu cách bạn có thể sử dụng AJAX trong quá trình phát triển ứng dụng hàng ngày của mình. Giả sử bạn muốn tạo một trang hiển thị thông tin hồ sơ của người dùng, với các phần khác nhau như thông tin cá nhân, thông tin xã hội, thông báo, tin nhắn, v.v.

Cách tiếp cận thông thường là xây dựng các trang web khác nhau cho mỗi phần. Vì vậy, ví dụ: người dùng sẽ nhấp vào liên kết thông tin xã hội để tải lại trình duyệt và hiển thị trang có thông tin xã hội. Tuy nhiên, điều này làm cho việc điều hướng giữa các phần chậm hơn vì người dùng phải đợi trình duyệt tải lại và trang hiển thị lại mỗi lần

Mặt khác, bạn cũng có thể sử dụng AJAX để xây dựng giao diện tải tất cả thông tin mà không cần làm mới trang. Trong trường hợp này, bạn có thể hiển thị các tab khác nhau cho tất cả các phần và bằng cách nhấp vào tab, nó sẽ tải nội dung tương ứng từ máy chủ phụ trợ và cập nhật trang mà không cần làm mới trình duyệt. Điều này giúp bạn cải thiện trải nghiệm tổng thể của người dùng cuối

Cuộc gọi AJAX tổng thể hoạt động giống như thế này

Hãy nhanh chóng lướt qua quy trình AJAX thông thường

1. Đầu tiên, người dùng sẽ mở một trang web như bình thường với yêu cầu đồng bộ
2. Tiếp theo, người dùng nhấp vào một phần tử DOM—thường là một nút hoặc liên kết—bắt đầu một yêu cầu không đồng bộ tới máy chủ phụ trợ. Người dùng cuối sẽ không nhận thấy điều này vì cuộc gọi được thực hiện không đồng bộ và không làm mới trình duyệt. Tuy nhiên, bạn có thể phát hiện các lệnh gọi AJAX này bằng công cụ như Firebug
3. Đáp lại yêu cầu AJAX, máy chủ có thể trả về dữ liệu chuỗi XML, JSON hoặc HTML
4. Dữ liệu phản hồi được phân tích cú pháp bằng JavaScript
5. Cuối cùng, dữ liệu đã phân tích cú pháp được cập nhật trong DOM của trang web

Như bạn có thể thấy, trang web được cập nhật dữ liệu theo thời gian thực từ máy chủ mà không cần tải lại trình duyệt

Trong phần tiếp theo, chúng tôi sẽ hướng dẫn cách triển khai AJAX bằng vanilla JavaScript

Cách AJAX hoạt động bằng Vanilla JavaScript

Trong phần này, chúng ta sẽ xem cách AJAX hoạt động trong vanilla JavaScript. Tất nhiên, có sẵn các thư viện JavaScript giúp thực hiện các cuộc gọi AJAX dễ dàng hơn, nhưng thật thú vị khi biết điều gì đang xảy ra bên trong

Chúng ta hãy xem mã JavaScript vanilla sau đây, mã này thực hiện lệnh gọi AJAX và tìm nạp phản hồi từ máy chủ một cách không đồng bộ

Hãy xem qua đoạn mã trên để hiểu điều gì đang xảy ra đằng sau hậu trường

1. Đầu tiên, chúng tôi khởi tạo đối tượng 

   function AjaxCallWithPromise() {
       return new Promise(function (resolve, reject) {
           const objXMLHttpRequest = new XMLHttpRequest();
   
           objXMLHttpRequest.onreadystatechange = function () {
               if (objXMLHttpRequest.readyState === 4) {
                   if (objXMLHttpRequest.status == 200) {
                       resolve(objXMLHttpRequest.responseText);
                   } else {
                       reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                   }
               }
           }
   
           objXMLHttpRequest.open('GET', 'request_ajax_data.php');
           objXMLHttpRequest.send();
       });
   }
   
   AjaxCallWithPromise().then(
       data => { console.log('Success Response: ' + data) },
       error => { console.log(error) }
   );

   7, chịu trách nhiệm thực hiện lệnh gọi AJAX
2. Đối tượng 

   function AjaxCallWithPromise() {
       return new Promise(function (resolve, reject) {
           const objXMLHttpRequest = new XMLHttpRequest();
   
           objXMLHttpRequest.onreadystatechange = function () {
               if (objXMLHttpRequest.readyState === 4) {
                   if (objXMLHttpRequest.status == 200) {
                       resolve(objXMLHttpRequest.responseText);
                   } else {
                       reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                   }
               }
           }
   
           objXMLHttpRequest.open('GET', 'request_ajax_data.php');
           objXMLHttpRequest.send();
       });
   }
   
   AjaxCallWithPromise().then(
       data => { console.log('Success Response: ' + data) },
       error => { console.log(error) }
   );

   7 có thuộc tính 

   function AjaxCallWithPromise() {
       return new Promise(function (resolve, reject) {
           const objXMLHttpRequest = new XMLHttpRequest();
   
           objXMLHttpRequest.onreadystatechange = function () {
               if (objXMLHttpRequest.readyState === 4) {
                   if (objXMLHttpRequest.status == 200) {
                       resolve(objXMLHttpRequest.responseText);
                   } else {
                       reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                   }
               }
           }
   
           objXMLHttpRequest.open('GET', 'request_ajax_data.php');
           objXMLHttpRequest.send();
       });
   }
   
   AjaxCallWithPromise().then(
       data => { console.log('Success Response: ' + data) },
       error => { console.log(error) }
   );

   9 và giá trị của thuộc tính đó thay đổi trong vòng đời của yêu cầu. Nó có thể giữ một trong bốn giá trị.

   function AjaxCallWithPromise() {
       return new Promise(function (resolve, reject) {
           const objXMLHttpRequest = new XMLHttpRequest();
   
           objXMLHttpRequest.onreadystatechange = function () {
               if (objXMLHttpRequest.readyState === 4) {
                   if (objXMLHttpRequest.status == 200) {
                       resolve(objXMLHttpRequest.responseText);
                   } else {
                       reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                   }
               }
           }
   
           objXMLHttpRequest.open('GET', 'request_ajax_data.php');
           objXMLHttpRequest.send();
       });
   }
   
   AjaxCallWithPromise().then(
       data => { console.log('Success Response: ' + data) },
       error => { console.log(error) }
   );

   0, 

   function AjaxCallWithPromise() {
       return new Promise(function (resolve, reject) {
           const objXMLHttpRequest = new XMLHttpRequest();
   
           objXMLHttpRequest.onreadystatechange = function () {
               if (objXMLHttpRequest.readyState === 4) {
                   if (objXMLHttpRequest.status == 200) {
                       resolve(objXMLHttpRequest.responseText);
                   } else {
                       reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                   }
               }
           }
   
           objXMLHttpRequest.open('GET', 'request_ajax_data.php');
           objXMLHttpRequest.send();
       });
   }
   
   AjaxCallWithPromise().then(
       data => { console.log('Success Response: ' + data) },
       error => { console.log(error) }
   );

   0, 

   function AjaxCallWithPromise() {
       return new Promise(function (resolve, reject) {
           const objXMLHttpRequest = new XMLHttpRequest();
   
           objXMLHttpRequest.onreadystatechange = function () {
               if (objXMLHttpRequest.readyState === 4) {
                   if (objXMLHttpRequest.status == 200) {
                       resolve(objXMLHttpRequest.responseText);
                   } else {
                       reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                   }
               }
           }
   
           objXMLHttpRequest.open('GET', 'request_ajax_data.php');
           objXMLHttpRequest.send();
       });
   }
   
   AjaxCallWithPromise().then(
       data => { console.log('Success Response: ' + data) },
       error => { console.log(error) }
   );

   1, và 

   function AjaxCallWithPromise() {
       return new Promise(function (resolve, reject) {
           const objXMLHttpRequest = new XMLHttpRequest();
   
           objXMLHttpRequest.onreadystatechange = function () {
               if (objXMLHttpRequest.readyState === 4) {
                   if (objXMLHttpRequest.status == 200) {
                       resolve(objXMLHttpRequest.responseText);
                   } else {
                       reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                   }
               }
           }
   
           objXMLHttpRequest.open('GET', 'request_ajax_data.php');
           objXMLHttpRequest.send();
       });
   }
   
   AjaxCallWithPromise().then(
       data => { console.log('Success Response: ' + data) },
       error => { console.log(error) }
   );

   2
3. Chúng ta có thể thiết lập hàm nghe để thay đổi trạng thái bằng cách sử dụng thuộc tính 

   function AjaxCallWithPromise() {
       return new Promise(function (resolve, reject) {
           const objXMLHttpRequest = new XMLHttpRequest();
   
           objXMLHttpRequest.onreadystatechange = function () {
               if (objXMLHttpRequest.readyState === 4) {
                   if (objXMLHttpRequest.status == 200) {
                       resolve(objXMLHttpRequest.responseText);
                   } else {
                       reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                   }
               }
           }
   
           objXMLHttpRequest.open('GET', 'request_ajax_data.php');
           objXMLHttpRequest.send();
       });
   }
   
   AjaxCallWithPromise().then(
       data => { console.log('Success Response: ' + data) },
       error => { console.log(error) }
   );

   3. Và đó là những gì chúng tôi đã làm trong ví dụ trên. chúng tôi đã sử dụng một chức năng sẽ được gọi mỗi khi thay đổi thuộc tính trạng thái
4. Trong chức năng đó, chúng tôi đã kiểm tra xem giá trị 

   function AjaxCallWithPromise() {
       return new Promise(function (resolve, reject) {
           const objXMLHttpRequest = new XMLHttpRequest();
   
           objXMLHttpRequest.onreadystatechange = function () {
               if (objXMLHttpRequest.readyState === 4) {
                   if (objXMLHttpRequest.status == 200) {
                       resolve(objXMLHttpRequest.responseText);
                   } else {
                       reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                   }
               }
           }
   
           objXMLHttpRequest.open('GET', 'request_ajax_data.php');
           objXMLHttpRequest.send();
       });
   }
   
   AjaxCallWithPromise().then(
       data => { console.log('Success Response: ' + data) },
       error => { console.log(error) }
   );

   9 có bằng 

   function AjaxCallWithPromise() {
       return new Promise(function (resolve, reject) {
           const objXMLHttpRequest = new XMLHttpRequest();
   
           objXMLHttpRequest.onreadystatechange = function () {
               if (objXMLHttpRequest.readyState === 4) {
                   if (objXMLHttpRequest.status == 200) {
                       resolve(objXMLHttpRequest.responseText);
                   } else {
                       reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                   }
               }
           }
   
           objXMLHttpRequest.open('GET', 'request_ajax_data.php');
           objXMLHttpRequest.send();
       });
   }
   
   AjaxCallWithPromise().then(
       data => { console.log('Success Response: ' + data) },
       error => { console.log(error) }
   );

   5 hay không, có nghĩa là yêu cầu đã hoàn thành và chúng tôi đã nhận được phản hồi từ máy chủ. Tiếp theo, chúng tôi đã kiểm tra xem mã trạng thái có bằng 

   function AjaxCallWithPromise() {
       return new Promise(function (resolve, reject) {
           const objXMLHttpRequest = new XMLHttpRequest();
   
           objXMLHttpRequest.onreadystatechange = function () {
               if (objXMLHttpRequest.readyState === 4) {
                   if (objXMLHttpRequest.status == 200) {
                       resolve(objXMLHttpRequest.responseText);
                   } else {
                       reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                   }
               }
           }
   
           objXMLHttpRequest.open('GET', 'request_ajax_data.php');
           objXMLHttpRequest.send();
       });
   }
   
   AjaxCallWithPromise().then(
       data => { console.log('Success Response: ' + data) },
       error => { console.log(error) }
   );

   6 hay không, nghĩa là yêu cầu đã thành công. Cuối cùng, chúng tôi tìm nạp phản hồi được lưu trữ trong thuộc tính 

   function AjaxCallWithPromise() {
       return new Promise(function (resolve, reject) {
           const objXMLHttpRequest = new XMLHttpRequest();
   
           objXMLHttpRequest.onreadystatechange = function () {
               if (objXMLHttpRequest.readyState === 4) {
                   if (objXMLHttpRequest.status == 200) {
                       resolve(objXMLHttpRequest.responseText);
                   } else {
                       reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                   }
               }
           }
   
           objXMLHttpRequest.open('GET', 'request_ajax_data.php');
           objXMLHttpRequest.send();
       });
   }
   
   AjaxCallWithPromise().then(
       data => { console.log('Success Response: ' + data) },
       error => { console.log(error) }
   );

   7 của đối tượng 

   function AjaxCallWithPromise() {
       return new Promise(function (resolve, reject) {
           const objXMLHttpRequest = new XMLHttpRequest();
   
           objXMLHttpRequest.onreadystatechange = function () {
               if (objXMLHttpRequest.readyState === 4) {
                   if (objXMLHttpRequest.status == 200) {
                       resolve(objXMLHttpRequest.responseText);
                   } else {
                       reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                   }
               }
           }
   
           objXMLHttpRequest.open('GET', 'request_ajax_data.php');
           objXMLHttpRequest.send();
       });
   }
   
   AjaxCallWithPromise().then(
       data => { console.log('Success Response: ' + data) },
       error => { console.log(error) }
   );

   7
5. Sau khi thiết lập bộ lắng nghe, chúng tôi bắt đầu yêu cầu bằng cách gọi phương thức 

   function AjaxCallWithPromise() {
       return new Promise(function (resolve, reject) {
           const objXMLHttpRequest = new XMLHttpRequest();
   
           objXMLHttpRequest.onreadystatechange = function () {
               if (objXMLHttpRequest.readyState === 4) {
                   if (objXMLHttpRequest.status == 200) {
                       resolve(objXMLHttpRequest.responseText);
                   } else {
                       reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                   }
               }
           }
   
           objXMLHttpRequest.open('GET', 'request_ajax_data.php');
           objXMLHttpRequest.send();
       });
   }
   
   AjaxCallWithPromise().then(
       data => { console.log('Success Response: ' + data) },
       error => { console.log(error) }
   );

   9 của đối tượng 

   function AjaxCallWithPromise() {
       return new Promise(function (resolve, reject) {
           const objXMLHttpRequest = new XMLHttpRequest();
   
           objXMLHttpRequest.onreadystatechange = function () {
               if (objXMLHttpRequest.readyState === 4) {
                   if (objXMLHttpRequest.status == 200) {
                       resolve(objXMLHttpRequest.responseText);
                   } else {
                       reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                   }
               }
           }
   
           objXMLHttpRequest.open('GET', 'request_ajax_data.php');
           objXMLHttpRequest.send();
       });
   }
   
   AjaxCallWithPromise().then(
       data => { console.log('Success Response: ' + data) },
       error => { console.log(error) }
   );

   7. Giá trị thuộc tính 

   function AjaxCallWithPromise() {
       return new Promise(function (resolve, reject) {
           const objXMLHttpRequest = new XMLHttpRequest();
   
           objXMLHttpRequest.onreadystatechange = function () {
               if (objXMLHttpRequest.readyState === 4) {
                   if (objXMLHttpRequest.status == 200) {
                       resolve(objXMLHttpRequest.responseText);
                   } else {
                       reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                   }
               }
           }
   
           objXMLHttpRequest.open('GET', 'request_ajax_data.php');
           objXMLHttpRequest.send();
       });
   }
   
   AjaxCallWithPromise().then(
       data => { console.log('Success Response: ' + data) },
       error => { console.log(error) }
   );

   9 sẽ được đặt thành 1 sau lệnh gọi này
6. Cuối cùng, chúng ta đã gọi phương thức 
   2 của đối tượng 

   function AjaxCallWithPromise() {
       return new Promise(function (resolve, reject) {
           const objXMLHttpRequest = new XMLHttpRequest();
   
           objXMLHttpRequest.onreadystatechange = function () {
               if (objXMLHttpRequest.readyState === 4) {
                   if (objXMLHttpRequest.status == 200) {
                       resolve(objXMLHttpRequest.responseText);
                   } else {
                       reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                   }
               }
           }
   
           objXMLHttpRequest.open('GET', 'request_ajax_data.php');
           objXMLHttpRequest.send();
       });
   }
   
   AjaxCallWithPromise().then(
       data => { console.log('Success Response: ' + data) },
       error => { console.log(error) }
   );

   7, phương thức này thực sự gửi yêu cầu đến máy chủ. Giá trị thuộc tính 

   function AjaxCallWithPromise() {
       return new Promise(function (resolve, reject) {
           const objXMLHttpRequest = new XMLHttpRequest();
   
           objXMLHttpRequest.onreadystatechange = function () {
               if (objXMLHttpRequest.readyState === 4) {
                   if (objXMLHttpRequest.status == 200) {
                       resolve(objXMLHttpRequest.responseText);
                   } else {
                       reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                   }
               }
           }
   
           objXMLHttpRequest.open('GET', 'request_ajax_data.php');
           objXMLHttpRequest.send();
       });
   }
   
   AjaxCallWithPromise().then(
       data => { console.log('Success Response: ' + data) },
       error => { console.log(error) }
   );

   9 sẽ được đặt thành 2 sau lệnh gọi này
7. Khi máy chủ phản hồi, cuối cùng nó sẽ đặt giá trị 

   function AjaxCallWithPromise() {
       return new Promise(function (resolve, reject) {
           const objXMLHttpRequest = new XMLHttpRequest();
   
           objXMLHttpRequest.onreadystatechange = function () {
               if (objXMLHttpRequest.readyState === 4) {
                   if (objXMLHttpRequest.status == 200) {
                       resolve(objXMLHttpRequest.responseText);
                   } else {
                       reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                   }
               }
           }
   
           objXMLHttpRequest.open('GET', 'request_ajax_data.php');
           objXMLHttpRequest.send();
       });
   }
   
   AjaxCallWithPromise().then(
       data => { console.log('Success Response: ' + data) },
       error => { console.log(error) }
   );

   9 thành 4 và bạn sẽ thấy hộp cảnh báo hiển thị phản hồi từ máy chủ

Vì vậy, đó là cách AJAX hoạt động với vanilla JavaScript. Phương pháp ở đây, sử dụng "hàm gọi lại" là cách truyền thống để viết mã AJAX, nhưng một cách sạch hơn và hiện đại hơn là với Promise

Trong phần tiếp theo, chúng ta sẽ xem cách sử dụng đối tượng 

Cách sử dụng lời hứa JavaScript cho AJAX

Các lời hứa trong JavaScript cung cấp một cách tốt hơn để quản lý các hoạt động và lệnh gọi lại không đồng bộ phụ thuộc vào các lệnh gọi lại khác. Trong JavaScript, 

Hãy nhanh chóng sửa lại ví dụ trước với đối tượng 

function AjaxCallWithPromise() {
    return new Promise(function (resolve, reject) {
        const objXMLHttpRequest = new XMLHttpRequest();

        objXMLHttpRequest.onreadystatechange = function () {
            if (objXMLHttpRequest.readyState === 4) {
                if (objXMLHttpRequest.status == 200) {
                    resolve(objXMLHttpRequest.responseText);
                } else {
                    reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                }
            }
        }

        objXMLHttpRequest.open('GET', 'request_ajax_data.php');
        objXMLHttpRequest.send();
    });
}

AjaxCallWithPromise().then(
    data => { console.log('Success Response: ' + data) },
    error => { console.log(error) }
);

Khi hàm 

function AjaxCallWithPromise() {
    return new Promise(function (resolve, reject) {
        const objXMLHttpRequest = new XMLHttpRequest();

        objXMLHttpRequest.onreadystatechange = function () {
            if (objXMLHttpRequest.readyState === 4) {
                if (objXMLHttpRequest.status == 200) {
                    resolve(objXMLHttpRequest.responseText);
                } else {
                    reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                }
            }
        }

        objXMLHttpRequest.open('GET', 'request_ajax_data.php');
        objXMLHttpRequest.send();
    });
}

AjaxCallWithPromise().then(
    data => { console.log('Success Response: ' + data) },
    error => { console.log(error) }
);

function AjaxCallWithPromise() {
    return new Promise(function (resolve, reject) {
        const objXMLHttpRequest = new XMLHttpRequest();

        objXMLHttpRequest.onreadystatechange = function () {
            if (objXMLHttpRequest.readyState === 4) {
                if (objXMLHttpRequest.status == 200) {
                    resolve(objXMLHttpRequest.responseText);
                } else {
                    reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                }
            }
        }

        objXMLHttpRequest.open('GET', 'request_ajax_data.php');
        objXMLHttpRequest.send();
    });
}

AjaxCallWithPromise().then(
    data => { console.log('Success Response: ' + data) },
    error => { console.log(error) }
);

function AjaxCallWithPromise() {
    return new Promise(function (resolve, reject) {
        const objXMLHttpRequest = new XMLHttpRequest();

        objXMLHttpRequest.onreadystatechange = function () {
            if (objXMLHttpRequest.readyState === 4) {
                if (objXMLHttpRequest.status == 200) {
                    resolve(objXMLHttpRequest.responseText);
                } else {
                    reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                }
            }
        }

        objXMLHttpRequest.open('GET', 'request_ajax_data.php');
        objXMLHttpRequest.send();
    });
}

AjaxCallWithPromise().then(
    data => { console.log('Success Response: ' + data) },
    error => { console.log(error) }
);

Tiếp theo, chúng tôi sử dụng phương pháp

function AjaxCallWithPromise() {
    return new Promise(function (resolve, reject) {
        const objXMLHttpRequest = new XMLHttpRequest();

        objXMLHttpRequest.onreadystatechange = function () {
            if (objXMLHttpRequest.readyState === 4) {
                if (objXMLHttpRequest.status == 200) {
                    resolve(objXMLHttpRequest.responseText);
                } else {
                    reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                }
            }
        }

        objXMLHttpRequest.open('GET', 'request_ajax_data.php');
        objXMLHttpRequest.send();
    });
}

AjaxCallWithPromise().then(
    data => { console.log('Success Response: ' + data) },
    error => { console.log(error) }
);

function AjaxCallWithPromise() {
    return new Promise(function (resolve, reject) {
        const objXMLHttpRequest = new XMLHttpRequest();

        objXMLHttpRequest.onreadystatechange = function () {
            if (objXMLHttpRequest.readyState === 4) {
                if (objXMLHttpRequest.status == 200) {
                    resolve(objXMLHttpRequest.responseText);
                } else {
                    reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                }
            }
        }

        objXMLHttpRequest.open('GET', 'request_ajax_data.php');
        objXMLHttpRequest.send();
    });
}

AjaxCallWithPromise().then(
    data => { console.log('Success Response: ' + data) },
    error => { console.log(error) }
);

Vì vậy, đó là cách bạn có thể sử dụng Lời hứa JavaScript cho AJAX. Trong phần tiếp theo, chúng ta sẽ xem cách sử dụng thư viện jQuery để thực hiện lệnh gọi AJAX

Cách thức hoạt động của AJAX bằng thư viện jQuery

Trong phần trước, chúng tôi đã thảo luận về cách bạn có thể thực hiện các lệnh gọi AJAX bằng vanilla JavaScript. Trong phần này, chúng ta sẽ sử dụng thư viện jQuery để chứng minh điều này. Tôi cho rằng bạn đã biết những kiến ​​thức cơ bản về thư viện jQuery

Thư viện jQuery cung cấp một vài phương thức khác nhau để thực hiện lệnh gọi AJAX, mặc dù ở đây chúng ta sẽ xem xét phương thức 

function AjaxCallWithPromise() {
    return new Promise(function (resolve, reject) {
        const objXMLHttpRequest = new XMLHttpRequest();

        objXMLHttpRequest.onreadystatechange = function () {
            if (objXMLHttpRequest.readyState === 4) {
                if (objXMLHttpRequest.status == 200) {
                    resolve(objXMLHttpRequest.responseText);
                } else {
                    reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                }
            }
        }

        objXMLHttpRequest.open('GET', 'request_ajax_data.php');
        objXMLHttpRequest.send();
    });
}

AjaxCallWithPromise().then(
    data => { console.log('Success Response: ' + data) },
    error => { console.log(error) }
);

Hãy xem ví dụ sau

Như bạn đã biết, ký hiệu 

function AjaxCallWithPromise() {
    return new Promise(function (resolve, reject) {
        const objXMLHttpRequest = new XMLHttpRequest();

        objXMLHttpRequest.onreadystatechange = function () {
            if (objXMLHttpRequest.readyState === 4) {
                if (objXMLHttpRequest.status == 200) {
                    resolve(objXMLHttpRequest.responseText);
                } else {
                    reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                }
            }
        }

        objXMLHttpRequest.open('GET', 'request_ajax_data.php');
        objXMLHttpRequest.send();
    });
}

AjaxCallWithPromise().then(
    data => { console.log('Success Response: ' + data) },
    error => { console.log(error) }
);

Tham số đầu tiên của phương thức 

function AjaxCallWithPromise() {
    return new Promise(function (resolve, reject) {
        const objXMLHttpRequest = new XMLHttpRequest();

        objXMLHttpRequest.onreadystatechange = function () {
            if (objXMLHttpRequest.readyState === 4) {
                if (objXMLHttpRequest.status == 200) {
                    resolve(objXMLHttpRequest.responseText);
                } else {
                    reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                }
            }
        }

        objXMLHttpRequest.open('GET', 'request_ajax_data.php');
        objXMLHttpRequest.send();
    });
}

AjaxCallWithPromise().then(
    data => { console.log('Success Response: ' + data) },
    error => { console.log(error) }
);

function AjaxCallWithPromise() {
    return new Promise(function (resolve, reject) {
        const objXMLHttpRequest = new XMLHttpRequest();

        objXMLHttpRequest.onreadystatechange = function () {
            if (objXMLHttpRequest.readyState === 4) {
                if (objXMLHttpRequest.status == 200) {
                    resolve(objXMLHttpRequest.responseText);
                } else {
                    reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                }
            }
        }

        objXMLHttpRequest.open('GET', 'request_ajax_data.php');
        objXMLHttpRequest.send();
    });
}

AjaxCallWithPromise().then(
    data => { console.log('Success Response: ' + data) },
    error => { console.log(error) }
);

Trong hầu hết các trường hợp, bạn sẽ cần chỉ định các lệnh gọi lại thành công và lỗi. Cuộc gọi lại thành công sẽ được gọi sau khi hoàn thành thành công cuộc gọi AJAX. Phản hồi do máy chủ trả về sẽ được chuyển đến cuộc gọi lại thành công. Mặt khác, cuộc gọi lại thất bại sẽ được gọi nếu có sự cố và xảy ra sự cố khi thực hiện cuộc gọi AJAX

Như bạn có thể thấy, thật dễ dàng để thực hiện các thao tác AJAX bằng thư viện jQuery. Trên thực tế, quy trình này ít nhiều giống nhau, bất kể thư viện JavaScript mà bạn chọn để thực hiện lệnh gọi AJAX

Trong phần tiếp theo, chúng ta sẽ xem một ví dụ thực tế để hiểu cách thức hoạt động của tất cả điều này với PHP

Một ví dụ AJAX trong thế giới thực với PHP

Trong phần này, chúng ta sẽ xây dựng một ví dụ tìm nạp nội dung JSON từ tệp PHP ở phía máy chủ bằng AJAX

Đối với mục đích trình diễn, chúng tôi sẽ xây dựng một ví dụ thực hiện đăng nhập của người dùng bằng AJAX và jQuery. Để bắt đầu, hãy tạo chỉ mục. php, như được hiển thị trong đoạn mã sau, hiển thị biểu mẫu đăng nhập cơ bản

function AjaxCallWithPromise() {
    return new Promise(function (resolve, reject) {
        const objXMLHttpRequest = new XMLHttpRequest();

        objXMLHttpRequest.onreadystatechange = function () {
            if (objXMLHttpRequest.readyState === 4) {
                if (objXMLHttpRequest.status == 200) {
                    resolve(objXMLHttpRequest.responseText);
                } else {
                    reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                }
            }
        }

        objXMLHttpRequest.open('GET', 'request_ajax_data.php');
        objXMLHttpRequest.send();
    });
}

AjaxCallWithPromise().then(
    data => { console.log('Success Response: ' + data) },
    error => { console.log(error) }
);

chỉ mục. tệp php là một biểu mẫu HTML khá chuẩn chứa các trường tên người dùng và mật khẩu. Nó cũng chứa một đoạn mã JavaScript jQuery, đoạn mã này tuân theo phác thảo mà chúng ta đã thấy ở trên

Chúng tôi đã sử dụng sự kiện 

function AjaxCallWithPromise() {
    return new Promise(function (resolve, reject) {
        const objXMLHttpRequest = new XMLHttpRequest();

        objXMLHttpRequest.onreadystatechange = function () {
            if (objXMLHttpRequest.readyState === 4) {
                if (objXMLHttpRequest.status == 200) {
                    resolve(objXMLHttpRequest.responseText);
                } else {
                    reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                }
            }
        }

        objXMLHttpRequest.open('GET', 'request_ajax_data.php');
        objXMLHttpRequest.send();
    });
}

AjaxCallWithPromise().then(
    data => { console.log('Success Response: ' + data) },
    error => { console.log(error) }
);

function AjaxCallWithPromise() {
    return new Promise(function (resolve, reject) {
        const objXMLHttpRequest = new XMLHttpRequest();

        objXMLHttpRequest.onreadystatechange = function () {
            if (objXMLHttpRequest.readyState === 4) {
                if (objXMLHttpRequest.status == 200) {
                    resolve(objXMLHttpRequest.responseText);
                } else {
                    reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                }
            }
        }

        objXMLHttpRequest.open('GET', 'request_ajax_data.php');
        objXMLHttpRequest.send();
    });
}

AjaxCallWithPromise().then(
    data => { console.log('Success Response: ' + data) },
    error => { console.log(error) }
);

function AjaxCallWithPromise() {
    return new Promise(function (resolve, reject) {
        const objXMLHttpRequest = new XMLHttpRequest();

        objXMLHttpRequest.onreadystatechange = function () {
            if (objXMLHttpRequest.readyState === 4) {
                if (objXMLHttpRequest.status == 200) {
                    resolve(objXMLHttpRequest.responseText);
                } else {
                    reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                }
            }
        }

        objXMLHttpRequest.open('GET', 'request_ajax_data.php');
        objXMLHttpRequest.send();
    });
}

AjaxCallWithPromise().then(
    data => { console.log('Success Response: ' + data) },
    error => { console.log(error) }
);

Hãy cũng xem những gì đăng nhập. php trông giống như

function AjaxCallWithPromise() {
    return new Promise(function (resolve, reject) {
        const objXMLHttpRequest = new XMLHttpRequest();

        objXMLHttpRequest.onreadystatechange = function () {
            if (objXMLHttpRequest.readyState === 4) {
                if (objXMLHttpRequest.status == 200) {
                    resolve(objXMLHttpRequest.responseText);
                } else {
                    reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                }
            }
        }

        objXMLHttpRequest.open('GET', 'request_ajax_data.php');
        objXMLHttpRequest.send();
    });
}

AjaxCallWithPromise().then(
    data => { console.log('Success Response: ' + data) },
    error => { console.log(error) }
);

Đăng nhập. tệp php chứa logic xác thực người dùng và trả về phản hồi JSON dựa trên thành công hay thất bại của đăng nhập

Sử dụng lời hứa cho AJAX với jQuery

Ngoài ra, phương thức 

function AjaxCallWithPromise() {
    return new Promise(function (resolve, reject) {
        const objXMLHttpRequest = new XMLHttpRequest();

        objXMLHttpRequest.onreadystatechange = function () {
            if (objXMLHttpRequest.readyState === 4) {
                if (objXMLHttpRequest.status == 200) {
                    resolve(objXMLHttpRequest.responseText);
                } else {
                    reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                }
            }
        }

        objXMLHttpRequest.open('GET', 'request_ajax_data.php');
        objXMLHttpRequest.send();
    });
}

AjaxCallWithPromise().then(
    data => { console.log('Success Response: ' + data) },
    error => { console.log(error) }
);

function AjaxCallWithPromise() {
    return new Promise(function (resolve, reject) {
        const objXMLHttpRequest = new XMLHttpRequest();

        objXMLHttpRequest.onreadystatechange = function () {
            if (objXMLHttpRequest.readyState === 4) {
                if (objXMLHttpRequest.status == 200) {
                    resolve(objXMLHttpRequest.responseText);
                } else {
                    reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                }
            }
        }

        objXMLHttpRequest.open('GET', 'request_ajax_data.php');
        objXMLHttpRequest.send();
    });
}

AjaxCallWithPromise().then(
    data => { console.log('Success Response: ' + data) },
    error => { console.log(error) }
);

function AjaxCallWithPromise() {
    return new Promise(function (resolve, reject) {
        const objXMLHttpRequest = new XMLHttpRequest();

        objXMLHttpRequest.onreadystatechange = function () {
            if (objXMLHttpRequest.readyState === 4) {
                if (objXMLHttpRequest.status == 200) {
                    resolve(objXMLHttpRequest.responseText);
                } else {
                    reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                }
            }
        }

        objXMLHttpRequest.open('GET', 'request_ajax_data.php');
        objXMLHttpRequest.send();
    });
}

AjaxCallWithPromise().then(
    data => { console.log('Success Response: ' + data) },
    error => { console.log(error) }
);

function AjaxCallWithPromise() {
    return new Promise(function (resolve, reject) {
        const objXMLHttpRequest = new XMLHttpRequest();

        objXMLHttpRequest.onreadystatechange = function () {
            if (objXMLHttpRequest.readyState === 4) {
                if (objXMLHttpRequest.status == 200) {
                    resolve(objXMLHttpRequest.responseText);
                } else {
                    reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                }
            }
        }

        objXMLHttpRequest.open('GET', 'request_ajax_data.php');
        objXMLHttpRequest.send();
    });
}

AjaxCallWithPromise().then(
    data => { console.log('Success Response: ' + data) },
    error => { console.log(error) }
);

function AjaxCallWithPromise() {
    return new Promise(function (resolve, reject) {
        const objXMLHttpRequest = new XMLHttpRequest();

        objXMLHttpRequest.onreadystatechange = function () {
            if (objXMLHttpRequest.readyState === 4) {
                if (objXMLHttpRequest.status == 200) {
                    resolve(objXMLHttpRequest.responseText);
                } else {
                    reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                }
            }
        }

        objXMLHttpRequest.open('GET', 'request_ajax_data.php');
        objXMLHttpRequest.send();
    });
}

AjaxCallWithPromise().then(
    data => { console.log('Success Response: ' + data) },
    error => { console.log(error) }
);

Hãy nhanh chóng sửa lại đoạn mã jQuery mà chúng ta đã sử dụng trong ví dụ của mình để chỉ ra cách sử dụng nó với phương thức 

function AjaxCallWithPromise() {
    return new Promise(function (resolve, reject) {
        const objXMLHttpRequest = new XMLHttpRequest();

        objXMLHttpRequest.onreadystatechange = function () {
            if (objXMLHttpRequest.readyState === 4) {
                if (objXMLHttpRequest.status == 200) {
                    resolve(objXMLHttpRequest.responseText);
                } else {
                    reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                }
            }
        }

        objXMLHttpRequest.open('GET', 'request_ajax_data.php');
        objXMLHttpRequest.send();
    });
}

AjaxCallWithPromise().then(
    data => { console.log('Success Response: ' + data) },
    error => { console.log(error) }
);

function AjaxCallWithPromise() {
    return new Promise(function (resolve, reject) {
        const objXMLHttpRequest = new XMLHttpRequest();

        objXMLHttpRequest.onreadystatechange = function () {
            if (objXMLHttpRequest.readyState === 4) {
                if (objXMLHttpRequest.status == 200) {
                    resolve(objXMLHttpRequest.responseText);
                } else {
                    reject('Error Code: ' +  objXMLHttpRequest.status + ' Error Message: ' + objXMLHttpRequest.statusText);
                }
            }
        }

        objXMLHttpRequest.open('GET', 'request_ajax_data.php');
        objXMLHttpRequest.send();
    });
}

AjaxCallWithPromise().then(
    data => { console.log('Success Response: ' + data) },
    error => { console.log(error) }
);

Sự kết luận

Trong hướng dẫn này, chúng ta đã thảo luận những kiến ​​thức cơ bản về AJAX và cách nó hoạt động với ứng dụng PHP. Trong nửa đầu của bài viết, chúng ta đã xem xét cách AJAX hoạt động trong vanilla JS và trong thư viện jQuery. Trong nửa sau, chúng tôi đã xây dựng một ví dụ thực tế minh họa cách bạn có thể sử dụng AJAX để tìm nạp nội dung PHP phía máy chủ

Học PHP với một khóa học trực tuyến miễn phí

Nếu bạn muốn học PHP, hãy xem khóa học trực tuyến miễn phí của chúng tôi về các nguyên tắc cơ bản của PHP

Trong khóa học này, bạn sẽ học các nguyên tắc cơ bản của lập trình PHP. Bạn sẽ bắt đầu với những kiến ​​thức cơ bản, học cách PHP hoạt động và viết các hàm và vòng lặp PHP đơn giản. Sau đó, bạn sẽ xây dựng các lớp mã hóa để lập trình hướng đối tượng đơn giản (OOP). Đồng thời, bạn sẽ học tất cả các kỹ năng quan trọng nhất để viết ứng dụng cho web. bạn sẽ có cơ hội thực hành phản hồi các yêu cầu GET và POST, phân tích cú pháp JSON, xác thực người dùng và sử dụng cơ sở dữ liệu MySQL

• 
  

  Nguyên tắc cơ bản về PHP

  
  

  Jeremy McPeak

  29 Thg 10 2021

Bạn cũng có thể học JavaScript miễn phí trên Envato Tuts+. JavaScript là ngôn ngữ của web. Nếu bạn muốn viết mã cho web, bạn cần biết JavaScript từ trong ra ngoài. Từ những khởi đầu khiêm tốn, JavaScript đã phát triển thành một ngôn ngữ mạnh mẽ và phức tạp với các tính năng như lớp, lời hứa, hàm mũi tên, trình tạo, mẫu chuỗi, v.v.

Trong khóa học này, bạn sẽ học tất cả các khái niệm cơ bản về ngôn ngữ JavaScript. Đúng rồi. Tất cả bọn họ

Làm cách nào để lưu trữ giá trị biến biến trong jquery trong PHP?

Tôi có thể sử dụng biến JavaScript trong PHP không?

Làm cách nào tôi có thể sử dụng jquery trong PHP?

JavaScript có thể thay đổi biến PHP không?