Hướng dẫn how does ajax work with php? - ajax hoạt động như thế nào với php?

AJAX được sử dụng để tạo ra các ứng dụng tương tác nhiều hơn.

Ví dụ AJAX PHP

Ví dụ sau đây sẽ chứng minh cách một trang web có thể giao tiếp với máy chủ web trong khi một nhân vật kiểu người dùng trong trường đầu vào:

Thí dụ

Bắt đầu nhập tên trong trường đầu vào bên dưới:

Đề xuất:

Ví dụ giải thích

Trong ví dụ trên, khi người dùng nhập ký tự trong trường đầu vào, một hàm gọi là "showhint ()" được thực thi.

Hàm được kích hoạt bởi sự kiện Onkeyup.

Đây là mã HTML:

Thí dụ

Bắt đầu nhập tên trong trường đầu vào bên dưới:

Đề xuất:

Suggestions:

Ví dụ giải thích

Trong ví dụ trên, khi người dùng nhập ký tự trong trường đầu vào, một hàm gọi là "showhint ()" được thực thi.

Hàm được kích hoạt bởi sự kiện Onkeyup.

Đây là mã HTML:

• hàm showHint (str) {& nbsp; if (str.length == 0) {& nbsp; & nbsp; & nbsp; & nbsp; document.getEuityById ("txthint"). ; & nbsp; & nbsp; var xmlHttp = new xmlhttprequest (); & nbsp; & nbsp; & nbsp; xmlHttp.onReadyStateChange = function () {& nbsp; & nbsp; & nbsp; & nbsp; if (this.ReadyState == 4 && this.status == 200) {& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; document.getEuityById ("txthint"). Internhtml = this.responsetext; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;} & nbsp; & nbsp; & nbsp; & nbsp;}; & nbsp; xmlhttp.open ("get", "gethint.php? q =" + str, true); & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;}}
• Bắt đầu nhập tên trong trường đầu vào bên dưới: & nbsp; Tên đầu tiên: & nbsp; Đề xuất:
• Chạy ví dụ »
• Giải thích mã:
• Đầu tiên, kiểm tra xem trường đầu vào có trống không (str.length == 0). Nếu có, hãy xóa nội dung của trình giữ chỗ TXTHINT và thoát chức năng.

Tuy nhiên, nếu trường đầu vào không trống, hãy làm như sau:

Tạo đối tượng XMLHTTPREQUEST

Tạo chức năng sẽ được thực thi khi phản hồi máy chủ đã sẵn sàng
// Array with names
$a[] = "Anna";
$a[] = "Brittany";
$a[] = "Cinderella";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Gunda";
$a[] = "Hege";
$a[] = "Inga";
$a[] = "Johanna";
$a[] = "Kitty";
$a[] = "Linda";
$a[] = "Nina";
$a[] = "Ophelia";
$a[] = "Petunia";
$a[] = "Amanda";
$a[] = "Raquel";
$a[] = "Cindy";
$a[] = "Doris";
$a[] = "Eve";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vicky";

Gửi yêu cầu đến tệp PHP (gethint.php) trên máy chủ
$q = $_REQUEST["q"];

Lưu ý rằng tham số Q được thêm vào URL (gethint.php? Q = "+str)

Và biến STR giữ nội dung của trường đầu vào
if ($q !== "") {
  $q = strtolower($q);
  $len=strlen($q);
  foreach($a as $name) {
    if (stristr($q, substr($name, 0, $len))) {
      if ($hint === "") {
        $hint = $name;
      } else {
        $hint .= ", $name";
      }
    }
  }
}

Tệp PHP - "gethint.php"
echo $hint === "" ? "no suggestion" : $hint;
?>

Hôm nay, chúng tôi sẽ khám phá khái niệm AJAX với PHP và JavaScript. Ajax & nbsp; Kỹ thuật 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 người dùng cuối.

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ủ back-end 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 một trang web mà không tải lại nó.

Hãy cùng xem xét một ví dụ để hiểu làm thế nào bạn có thể sử dụng AJAX trong phát triển ứng dụng hàng ngày của bạn. Giả sử bạn muốn xây dựng một trang hiển thị thông tin hồ sơ của người dùng, với & nbsp; 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 sẽ 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ị một trang với & nbsp; thông tin xã hội. Điều này làm cho nó chậm hơn để điều hướng giữa các phần, vì người dùng phải chờ 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 một giao diện tải tất cả thông tin mà không 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ó tìm thấy nội dung tương ứng từ máy chủ back-end và cập nhật trang mà không cần làm mới trình duyệt. Điều này & nbsp; giúp bạn cải thiện trải nghiệm người dùng cuối tổng thể.

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

Hãy để nhanh chóng đi qua luồng Ajax thông thường:

1. Đầu tiên, người dùng mở một trang web như bình thường với yêu cầu đồng bộ A & nbsp;
2. Tiếp theo, người dùng nhấp vào phần tử DOM thông thường là một nút hoặc liên kết mà bắt đầu yêu cầu không đồng bộ đến máy chủ back-end. Người dùng cuối đã giành được thông báo 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 ra các cuộc gọi AJAX này bằng một công cụ như FireBug.
3. Để đáp ứng 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 cập nhật trong trang web & nbsp; dom.

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

Trong phần tiếp theo, chúng tôi sẽ làm thế nào để triển khai Ajax bằng Vanilla JavaScript.

Cách hoạt động của Ajax bằng Vanilla JavaScript

Trong phần này, chúng tôi sẽ thấy Ajax hoạt động như thế nào trong Vanilla JavaScript. Tất nhiên, có những thư viện JavaScript có sẵn giúp thực hiện các cuộc gọi Ajax dễ dàng hơn, nhưng nó luôn luôn thú vị khi biết những gì xảy ra dưới mui xe.

Hãy cùng xem mã JavaScript Vanilla sau đây, thực hiện cuộc gọi AJAX và nhận được phản hồi từ máy chủ một cách không đồng bộ.

Hãy cùng đi qua mã trên để hiểu những gì xảy ra sau hậu trường.

1. Đầu tiên, chúng tôi khởi tạo & nbsp; ____ ____ 6 & nbsp; đối tượng, chịu trách nhiệm thực hiện các cuộc gọi Ajax.
2. Đối tượng & nbsp; Nó có thể chứa một trong bốn giá trị: & nbsp; ________ 9, & nbsp; ____ 10, & nbsp; ________ 11, và & nbsp; ________ 12.
3. Chúng ta có thể thiết lập chức năng người nghe cho các thay đổi trạng thái bằng cách sử dụng thuộc tính & nbsp; ____ 13 & nbsp; Và đó là những gì chúng tôi đã thực hiện trong ví dụ trên: Chúng tôi đã sử dụng một hàm sẽ được gọi là mỗi khi tài sản trạng thái được thay đổi.
4. Trong chức năng đó, chúng tôi đã kiểm tra xem & NBSP; Tiếp theo, chúng tôi đã kiểm tra xem mã trạng thái bằng & nbsp; ________ 16, điều đó có 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 ứng được lưu trữ trong & nbsp; ________ 17 & nbsp; thuộc tính của & nbsp; ________ 6 & nbsp; object.
5. Sau khi thiết lập trình nghe, chúng tôi bắt đầu yêu cầu bằng cách gọi & nbsp; & Nbsp; ________ 8 & nbsp; giá trị thuộc tính sẽ được đặt thành 1 sau cuộc gọi này.
6. Cuối cùng, chúng tôi đã gọi & nbsp; ________ 22 & nbsp; đối tượng của & nbsp; ________ 6 & nbsp;, thực sự gửi yêu cầu đến máy chủ. & Nbsp; ________ 8 & nbsp; giá trị thuộc tính sẽ được đặt thành 2 sau cuộc gọi này.
7. Khi máy chủ trả lời, cuối cùng nó sẽ đặt & nbsp; ________ 8 & nbsp; giá trị thành 4 và bạn sẽ thấy một hộp cảnh báo hiển thị phản hồi từ máy chủ.

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

Trong phần tiếp theo, chúng ta sẽ xem cách sử dụng & nbsp; ____ ____ 26 & nbsp; đối tượng cho ajax.

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

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 không đồng bộ và các cuộc gọi lại phụ thuộc vào các cuộc gọi lại khác. Trong JavaScript, & nbsp; ____ ____ 26 & nbsp; là một đối tượng có thể có một trong ba trạng thái: đang chờ xử lý, giải quyết hoặc bị từ chối. Ban đầu, đối tượng & NBSP;

Hãy nhanh chóng sửa đổi ví dụ trước với & nbsp; ____ ____ 26 & nbsp; đố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 chức năng & nbsp; ____ 30 & nbsp; nó được gọi, nó sẽ trả về đối tượng hứa hẹn và nó ở trạng thái đang chờ xử lý ban đầu. Dựa trên phản hồi, nó sẽ gọi & nbsp; ________ 31 & nbsp; hoặc & nbsp; ________ 32 & nbsp; function. & Nbsp;

Tiếp theo, chúng tôi sử dụng phương thức & nbsp; Phương thức & nbsp; ________ 33 & nbsp; có hai đối số. Đối số đầu tiên là một cuộc gọi lại sẽ được thực hiện khi lời hứa được giải quyết và đối số thứ hai là một cuộc gọi lại cho trạng thái bị từ chối.

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

Cách 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 cuộc gọi AJAX bằng Vanilla JavaScript. Trong phần này, chúng tôi sẽ sử dụng thư viện jQuery để chứng minh điều này. Tôi sẽ cho rằng bạn nhận thức được những điều cơ bản của 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 các cuộc gọi AJAX, mặc dù ở đây chúng tôi sẽ xem xét phương thức Standard & nbsp; ________ 35 & nbsp;, thường được sử dụng nhiều nhất.

Hãy xem ví dụ sau.

Như bạn đã biết, dấu hiệu & nbsp; ____ 36 & nbsp; được sử dụng để tham khảo đối tượng A & nbsp; jQuery.

Tham số đầu tiên của phương thức & nbsp; ____ 35 & nbsp; là URL sẽ được gọi trong nền để tìm nạp nội dung từ phía máy chủ. Tham số thứ hai ở định dạng JSON và cho phép bạn & nbsp; chỉ định các giá trị cho một số tùy chọn khác nhau được hỗ trợ bởi & nbsp; ________ 35 & nbsp; phương thức.

Trong hầu hết các trường hợp, bạn sẽ & nbsp; cần chỉ định các cuộc 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 cuộc gọi AJAX thành công. Phản hồi được trả lại bởi máy chủ sẽ được chuyển cho 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à có một vấn đề thực hiện cuộc gọi Ajax.

Vì vậy, như bạn có thể thấy, thật dễ dàng để thực hiện các hoạt động AJAX bằng thư viện jQuery. Trên thực tế, quá trình này ít nhiều giống nhau, không phân biệt thư viện JavaScript mà & nbsp; bạn chọn thực hiện các cuộc gọi AJAX.

Trong phần tiếp theo, chúng tôi sẽ thấy một ví dụ trong thế giới thực để hiểu cách thức này hoạt động với PHP.

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

Trong phần này, chúng tôi sẽ xây dựng một ví dụ lấy 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 người dùng bằng AJAX và JQuery. Để bắt đầu, hãy tạo tệp & nbsp; index.php & nbsp;, như được hiển thị trong đoạn sau, hiển thị một biểu mẫu đăng nhập cơ bản.index.php file, as shown in the following snippet, which renders a basic login form.

    

        Username:
        
        Password:
            
        
    

Tệp & nbsp; index.php & nbsp; là một biểu mẫu HTML khá tiêu chuẩn có chứa các trường tên người dùng và mật khẩu. Nó cũng chứa đoạn trích JavaScript của A & NBSP;, theo phác thảo mà chúng tôi đã thấy ở trên.index.php file is a pretty standard HTML form which contains username and password fields. It also contains a jQuery JavaScript snippet, which follows the outline we saw above.

Chúng tôi đã sử dụng & nbsp; ________ 39 & nbsp; sự kiện của phần tử biểu mẫu, sẽ được kích hoạt khi người dùng nhấp vào nút gửi. Trong bộ xử lý sự kiện đó, chúng tôi đã bắt đầu cuộc gọi AJAX, gửi dữ liệu biểu mẫu lên tệp & nbsp; login.php & nbsp; sử dụng phương thức POST không đồng bộ. Khi chúng tôi nhận được phản hồi từ máy chủ, chúng tôi phân tích nó bằng phương thức & nbsp; ____ ____ 40 & nbsp; đối tượng của & nbsp; Và cuối cùng, dựa trên sự thành công hay thất bại, chúng tôi có hành động thích hợp.login.php file using the POST method asynchronously. Once we receive a response from the server, we parse it using the 

 1));
} else {
    echo json_encode(array('success' => 0));
}

 1));
} else {
    echo json_encode(array('success' => 0));
}

Ngoài ra, hãy & nbsp; xem cái gì & nbsp; login.php & nbsp; trông giống như.login.php looks like.

 1));
} else {
    echo json_encode(array('success' => 0));
}

Tệp & nbsp; login.php & nbsp; chứa & nbsp; logic của người dùng xác thực và trả về phản hồi A & nbsp; JSON dựa trên sự thành công hoặc thất bại của đăng nhập.login.php file contains the logic of authenticating users and returns a JSON response based on the success or failure of login.

Sử dụng lời hứa cho Ajax với JQuery

Ngoài ra, & nbsp; ________ 42 & nbsp; Phương thức cũng hỗ trợ các lời hứa của JavaScript. Nó cung cấp các phương pháp khác nhau như & nbsp; ________ 33, & nbsp;

Hãy nhanh chóng sửa đổi đoạn trích jQuery mà chúng tôi đã sử dụng trong ví dụ của mình để chỉ ra cách sử dụng nó với phương thức & nbsp; ________ 33 & nbsp;

...
...
$.ajax({
    type: "POST",
    url: 'login.php',
    data: $(this).serialize()
}).then(
    // resolve/success callback
    function(response)
    {
        var jsonData = JSON.parse(response);

        // user is logged in successfully in the back-end
        // let's redirect
        if (jsonData.success == "1")
        {
            location.href = 'my_profile.php';
        }
        else
        {
            alert('Invalid Credentials!');
        }
    },
    // reject/failure callback
    function()
    {
        alert('There was some error!');
    }
);
...
...

Sự kết luận

Trong hướng dẫn này, chúng tôi đã thảo luận về những điều cơ bản của AJAX và cách nó hoạt động với một ứng dụng PHP. Trong nửa đầu của bài viết, chúng tôi đã 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ụ trong thế giới thực đã chứng minh cách bạn có thể sử dụng Ajax để tìm nạp nội dung PHP phía máy chủ

Tìm hiểu 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ẽ tìm hiểu 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 điều cơ bản, tìm hiểu cách PHP hoạt động và viết các vòng và chức năng PHP đơn giản. Sau đó, bạn sẽ xây dựng thành các lớp mã hóa cho lập trình hướng đối tượng đơn giản (OOP). Trên đường đi, bạn sẽ tìm hiểu 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 trả lời để nhận và đăng yêu cầu, 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.

Bạn cũng có thể tìm hiểu JavaScript miễn phí trên Envato Tuts+! & NBSP; JavaScript là ngôn ngữ của web. Nếu bạn muốn 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 học, lời hứa, chức năng mũi tên, máy phát điện, mẫu chuỗi và nhiều loại khác.

Trong khóa học này, bạn sẽ tìm hiểu tất cả các khái niệm thiết yếu của ngôn ngữ JavaScript. Đúng vậy: tất cả chúng!

Bạn có thấy bài đăng này hữu ích?

Kỹ sư phần mềm, FSPL, Ấn Độ

Tôi là một kỹ sư phần mềm chuyên nghiệp, và tôi đã thực hiện kỹ thuật khoa học máy tính. Đã khoảng 14 năm tôi đã làm việc trong lĩnh vực phát triển trang web và công nghệ nguồn mở. Chủ yếu, tôi làm việc trên các dự án và khung dựa trên PHP và MySQL. Trong số đó, tôi đã làm việc trên các khung web như Codeignitor, Symfony và Laravel. Ngoài ra, tôi cũng có cơ hội làm việc trên các hệ thống CMS khác nhau như Joomla, Drupal và WordPress và các hệ thống thương mại điện tử như Magento, Opencart, WooC Commerce và Drupal Commerce. Tôi cũng muốn tham dự các hội nghị công nghệ cộng đồng, và là một phần của điều đó, tôi đã tham dự Hội nghị Thế giới Joomla 2016 được tổ chức tại Bangalore (Ấn Độ) và 2018 Drupalcon được tổ chức tại Mumbai (Ấn Độ). Ngoài ra, tôi thích đi du lịch, khám phá những địa điểm mới và nghe nhạc!

Có tốt không khi sử dụng AJAX với PHP?

AJAX có thể gọi chức năng PHP không?

AJAX có tốt hơn PHP không?

Sự khác biệt giữa AJAX và PHP là gì?