PHP có thể được sử dụng như thế nào trong các ứng dụng AJAX?

AJAX là viết tắt của JavaScript và XML không đồng bộ. AJAX là một kỹ thuật mới để tạo các ứng dụng web tốt hơn, nhanh hơn và tương tác hơn với sự trợ giúp của XML, HTML, CSS và Java Script

  • Ứng dụng web thông thường truyền thông tin đến và từ máy chủ bằng cách sử dụng các yêu cầu đồng bộ. Điều này có nghĩa là bạn điền vào biểu mẫu, nhấn gửi và được chuyển đến một trang mới với thông tin mới từ máy chủ

  • Với AJAX khi nhấn gửi, JavaScript sẽ gửi yêu cầu đến máy chủ, giải thích kết quả và cập nhật màn hình hiện tại. Theo nghĩa thuần túy nhất, người dùng sẽ không bao giờ biết rằng bất kỳ thứ gì thậm chí đã được truyền đến máy chủ

  • Để tìm hiểu đầy đủ về AJAX, vui lòng tham khảo Hướng dẫn AJAX

    Ví dụ về PHP và AJAX

    Để minh họa rõ ràng việc truy cập thông tin từ cơ sở dữ liệu bằng Ajax và PHP dễ dàng như thế nào, chúng ta sẽ xây dựng các truy vấn MySQL một cách nhanh chóng và hiển thị kết quả trên "ajax. html". Nhưng trước khi chúng tôi tiến hành, hãy làm công việc cơ bản. Tạo một bảng bằng lệnh sau

    LƯU Ý - Chúng tôi giả định rằng bạn có đủ đặc quyền để thực hiện các thao tác MySQL sau

    CREATE TABLE `ajax_example` (
       `name` varchar(50) NOT NULL,
       `age` int(11) NOT NULL,
       `sex` varchar(1) NOT NULL,
       `wpm` int(11) NOT NULL,
       PRIMARY KEY  (`name`)
    ) 
    

    Bây giờ kết xuất dữ liệu sau vào bảng này bằng cách sử dụng các câu lệnh SQL sau

    INSERT INTO `ajax_example` VALUES ('Jerry', 120, 'm', 20);
    INSERT INTO `ajax_example` VALUES ('Regis', 75, 'm', 44);
    INSERT INTO `ajax_example` VALUES ('Frank', 45, 'm', 87);
    INSERT INTO `ajax_example` VALUES ('Jill', 22, 'f', 72);
    INSERT INTO `ajax_example` VALUES ('Tracy', 27, 'f', 0);
    INSERT INTO `ajax_example` VALUES ('Julie', 35, 'f', 90);
    

    Tệp HTML phía máy khách

    Bây giờ, hãy để tệp HTML phía máy khách của chúng tôi là ajax. html và nó sẽ có mã sau

       
          
          
    		
          
             Max Age:  
    Max WPM:
    Sex:

    Your result will display here

    LƯU Ý - Cách chuyển các biến trong Truy vấn theo tiêu chuẩn HTTP và có dạngA

    URL?variable1=value1;&variable2=value2;
    

    Bây giờ đoạn mã trên sẽ cung cấp cho bạn một màn hình như bên dưới

    LƯU Ý - Đây là màn hình giả và sẽ không hoạt động

    Kết quả của bạn sẽ hiển thị ở đây

    Tệp PHP phía máy chủ

    Vì vậy, bây giờ tập lệnh phía máy khách của bạn đã sẵn sàng. Bây giờ chúng ta phải viết tập lệnh phía máy chủ sẽ lấy tuổi, wpm và giới tính từ cơ sở dữ liệu và sẽ gửi lại cho máy khách. Đặt mã sau vào "ví dụ ajax. tập tin php"

    ";
       $display_string .= "";
       $display_string .= "Name";
       $display_string .= "Age";
       $display_string .= "Sex";
       $display_string .= "WPM";
       $display_string .= "";
       
       // Insert a new row in the table for each person returned
       while($row = mysql_fetch_array($qry_result)) {
          $display_string .= "";
          $display_string .= "$row[name]";
          $display_string .= "$row[age]";
          $display_string .= "$row[sex]";
          $display_string .= "$row[wpm]";
          $display_string .= "";
       }
       echo "Query: " . $query . "
    "; $display_string .= ""; echo $display_string; ?>

    Bây giờ hãy thử bằng cách nhập một giá trị hợp lệ vào "Tuổi tối đa" hoặc bất kỳ ô nào khác rồi nhấp vào nút Truy vấn MySQL

    Kết quả của bạn sẽ hiển thị ở đây

    Nếu bạn học xong bài này thì bạn đã biết cách sử dụng song song MySQL, PHP, HTML và Javascript để viết các ứng dụng Ajax

    AJAX đang nhanh chóng trở thành một phần không thể thiếu của các trang web. Nó không chỉ cung cấp khả năng tương tác tốt hơn mà còn tải lại nội dung động của các trang web nhanh hơn các trang web truyền thống. Học cách áp dụng AJAX trong ứng dụng PHP để tăng cường tương tác giữa người dùng và ứng dụng

    Ajax là viết tắt của JavaScript và XML không đồng bộ. Thông thường trong một ứng dụng web truyền thống, khi một số dữ liệu được truy cập từ cơ sở dữ liệu trên máy chủ, một yêu cầu HTTP từ máy khách sẽ được gửi tới máy chủ bằng phương thức GET hoặc POST. Sau khi nhận dữ liệu từ máy chủ, trang web cần được tải lại toàn bộ để hiển thị dữ liệu được tìm nạp. Trong công nghệ AJAX, dữ liệu từ máy chủ có thể được truy cập ở chế độ nền và thậm chí có thể được hiển thị trên trang mà không cần tải lại

    Với AJAX, JavaScript giao tiếp trực tiếp với máy chủ thông qua đối tượng JavaScript XMLHttpRequest (XML qua HTTP) và với sự trợ giúp của đối tượng này, một trang web có thể đưa ra yêu cầu và nhận phản hồi từ máy chủ web mà không cần tải lại

    Một trang web truyền thống mất nhiều thời gian hơn để có được kết quả mong muốn vì chuyến đi khứ hồi; . Máy chủ web xử lý dữ liệu và thông tin mong muốn được gửi lại cho máy khách. Ngay cả khi những thay đổi nhỏ được yêu cầu trong trang, toàn bộ trang vẫn được làm mới. Trong một ứng dụng web truyền thống, chúng tôi không có cơ sở để chỉ làm mới một phần nhỏ của trang web;

    Để hiểu cách Ajax được áp dụng trên ứng dụng PHP, trước tiên chúng ta sẽ tạo một chương trình PHP truyền thống đơn giản. Đối với chương trình PHP đó, chúng tôi sẽ áp dụng AJAX để xem tác động hoặc lợi ích của nó, nghĩa là AJAX làm cho nó có độ phản hồi cao như thế nào. Bạn có thể download code mẫu để dễ theo dõi hơn

    Chúng tôi sẽ tạo một chương trình PHP đơn giản sẽ nhắc người dùng nhập tên và địa chỉ email. Sau khi nhập tên và địa chỉ email, khi nhấn phím Gửi, người dùng sẽ được điều hướng từ trang web hiện tại sang một trang khác, trang này sẽ hiển thị thông báo chào mừng cùng với tên của người dùng

    Liệt kê 1 hiển thị một biểu mẫu đơn giản. php nhắc người dùng nhập tên và địa chỉ email. Khi xảy ra sự kiện, dữ liệu do người dùng nhập sẽ chuyển sang tập lệnh PHP khác để xử lý. Nhấp vào nút là sự kiện được sử dụng phổ biến nhất

    Liệt kê 1. Mã ở dạng đơn giản. tập tin php

    
       
          Enter your name: 
    Enter your email id :

    Form trên hiển thị 2 ô nhập tên là “user_name” và “email_id”. Biểu mẫu "hành động" trỏ đến một tệp php, "hiển thị. php” và “phương thức” HTTP được sử dụng là “Nhận”. Nội dung của biểu mẫu sẽ được gửi tới tập lệnh php, “hiển thị. php”, sử dụng phương thức yêu cầu HTTP, GET, để xử lý thêm

    Hãy nhớ rằng, thông tin được truyền từ tập lệnh PHP này sang tập lệnh PHP khác bằng cách sử dụng một trong hai phương thức Yêu cầu HTTP, GET và POST. Gửi dữ liệu qua phương thức GET dễ dàng hơn nhưng kém an toàn hơn vì nó được hiển thị trên thanh địa chỉ của trình duyệt. Ngoài ra, có một giới hạn về kích thước của dữ liệu có thể được truyền qua phương thức Get

    Liệt kê 2 hiển thị mã hiển thị. tệp php truy cập tên người dùng và địa chỉ email được gửi từ biểu mẫu đơn giản. trang php và hiển thị chúng cùng với thông báo chào mừng

    Liệt kê 2. Mã trong màn hình. tập tin php

    " ;
       echo "Your email id is  " . $_GET['email_id'] ;
    ?>

    Trong tập lệnh PHP ở trên, mảng $_GET được sử dụng để lấy dữ liệu được gửi từ biểu mẫu đơn giản. trang PHP. Về cơ bản, $_GET là một mảng lưu trữ dữ liệu được gửi từ trang trước thông qua phương thức HTTP GET. Dữ liệu từ trang trước được gửi theo cặp, (các) tên biến và (các) giá trị của nó. BẬT chạy biểu mẫu đơn giản. php, người dùng được nhắc nhập tên và địa chỉ email (xem Hình 1 [trái]). Sau khi nhập thông tin cần thiết, khi người dùng nhấp vào nút Gửi, điều hướng diễn ra từ biểu mẫu đơn giản. php để hiển thị. trang php. Màn hình hiển thị. php truy cập user_name và email_id được gửi từ biểu mẫu đơn giản. php thông qua mảng $_GET và hiển thị chúng cùng với thông báo chào mừng (xem Hình 1 [bên phải])

    PHP có thể được sử dụng như thế nào trong các ứng dụng AJAX?

    Hình 1 Người dùng được nhắc nhập tên và địa chỉ email. (phải) Điều hướng đến một trang web PHP khác hiển thị thông báo chào mừng cùng với tên người dùng

    Với AJAX, tất cả những hạn chế trên của ứng dụng web truyền thống đều bị loại bỏ vì nó bao gồm các thành phần sau (xem Hình 2)

    • XmlHttpRequest
    • JavaScript
    • DOM (Mô hình đối tượng tài liệu)
    • CSS (Biểu định kiểu xếp tầng)

    XmlHttpRequest. Chính đối tượng này giao tiếp với máy chủ một cách không đồng bộ, nghĩa là nó cho phép trình duyệt giao tiếp với máy chủ mà không yêu cầu đăng lại toàn bộ trang web. Các trình duyệt web hiện đại (Chrome, Firefox, IE7+, Opera và Safari) bao gồm một đối tượng XMLHttpRequest riêng để triển khai AJAX, trong khi đó trong Internet Explorer, một đối tượng XmlHttpRequest được cung cấp bởi thành phần ActiveX MSXML

    JavaScript. Các ứng dụng Ajax sử dụng mã JavaScript vì những lý do sau

    • Đó là một ngôn ngữ kịch bản được giải thích
    • Cú pháp của các lệnh dễ học hơn
    • Nó có thể tự động hóa một số tác vụ như xác thực userid, id email, v.v.

    DOM (Mô hình đối tượng tài liệu). Nó cung cấp cấu trúc dạng cây cho một trang web dưới dạng một tập hợp các đối tượng có thể lập trình, có thể được thao tác bằng mã JavaScript. Nó cho phép cập nhật động thậm chí một phần của trang web

    CSS (Biểu định kiểu xếp tầng). Đó là một cách tập trung để xác định tất cả các kiểu được áp dụng cho các thành phần khác nhau của trang web tại một nơi. Nó làm cho các ứng dụng web xuất hiện nhất quán và hấp dẫn hơn. Các kiểu CSS được triển khai bằng cách xác định các quy tắc kiểu trong một tài liệu riêng biệt, sau đó được tham chiếu bởi trang web nơi các kiểu phải được áp dụng

    XMLHttpRequest đóng vai trò chính trong việc thực hiện yêu cầu không đồng bộ trong mô hình ứng dụng web Ajax (tham khảo Hình 1). Máy khách tạo một đối tượng XMLHTTPRequest để giao tiếp với máy chủ web (tìm nạp dữ liệu từ máy chủ mà không cần gửi lại). Khách hàng có thể sử dụng

    • JavaScript để tự động hóa các tác vụ xác thực hoặc điều hướng
    • CSS để áp dụng các kiểu thống nhất
    • DOM để cập nhật một phần của trang web

    Máy chủ web tìm kiếm dữ liệu mong muốn từ cơ sở dữ liệu và dữ liệu được tìm nạp (có thể là một phần của toàn bộ trang) được gửi lại cho máy khách để cập nhật một phần của trang web ngay lập tức

    Sự kết luận. Các ứng dụng Ajax sử dụng một đối tượng XmlHttpRequest để giao tiếp với máy chủ một cách không đồng bộ, tức là trong khi người dùng vẫn đang làm việc trên trang. Ngoài ra, chỉ dữ liệu mong muốn được tìm nạp từ máy chủ chứ không phải toàn bộ trang web. Về phía máy khách, JavaScript đóng vai trò chính vì nó xử lý phản hồi của máy chủ và sửa đổi trang web thông qua DOM của nó để xác định rằng hành động đó đã hoàn tất. CSS tùy chọn cung cấp giao diện nhất quán cho ứng dụng web

    Để áp dụng AJAX trên biểu mẫu đơn giản. php (tham khảo Liệt kê 1), tạo một bản sao của simpleform. php, đổi tên nó thành ajaxform. php, và sửa đổi mã của nó để xuất hiện như trong Liệt kê 3

    Liệt kê 3. Mã trong ajaxform. tập tin php

    
    
       Enter your Name:  
    Enter your email id :


    Đầu tiên, phần của trang web được thực thi nhắc người dùng nhập tên người dùng và id email. Dữ liệu đã nhập sau đó được gán cho các biến user_name và email_id tương ứng. Mã đảm bảo rằng khi nhấp vào nút Gửi, phương thức JavaScript, showdata(), được gọi. Cuối cùng, một phần tử div với id, info được xác định để hiển thị phản hồi hoặc kết quả do máy chủ gửi

    Trong phương thức showdata(), một đối tượng XMLHttpRequest được tạo bằng cách gọi hàm makeRequestObject(). Sau đây là các bước liên quan đến việc thực hiện yêu cầu không đồng bộ tới máy chủ

    • Tạo một đối tượng XMLHttpRequest
    • Yêu cầu dữ liệu từ máy chủ bằng đối tượng XMLHttpRequest
    • Theo dõi sự thay đổi trạng thái của yêu cầu
    • Nếu yêu cầu thành công, hãy truy xuất dữ liệu từ luồng phản hồi
    • Áp dụng phản hồi nhận được từ máy chủ trong trang web

    Đối tượng XMLHttpRequest được Microsoft triển khai dưới dạng đối tượng ActiveX trong Internet Explorer và được hầu hết các phiên bản của nó hỗ trợ. Trong một số trình duyệt, XMLHttpRequest là một đối tượng gốc trong khi trong Internet Explorer, XMLHttpRequest được triển khai dưới dạng điều khiển ActiveX;

    Hàm makeRequestObject() được gọi để tạo đối tượng XMLHttpRequest. Đầu tiên, chúng ta thử tạo một đối tượng XMLHttpRequest bằng cách gọi ActiveXObject("Msxml2. XMLHTTP") giả định rằng trình duyệt là IE6+. Nếu phương pháp không thành công, ActiveXObject("Microsoft. XMLHTTP") được gọi giả sử trình duyệt là IE5. x. Nếu cả hai phương thức đều không thành công, hàm JavaScript tích hợp sẵn, XMLHttpRequest(), được gọi để tạo đối tượng XMLHttpRequest

    Phương thức showdata() truy cập tên và địa chỉ email do người dùng nhập vào hộp văn bản có tên user_name và email_id (trong phần) và gán giá trị cho các biến, người dùng và email tương ứng

    Sau khi tạo thành công đối tượng XMLHttpRequest, nhiệm vụ tiếp theo bắt đầu, đó là yêu cầu dữ liệu từ máy chủ. Sử dụng đối tượng XMLHttpRequest, một yêu cầu web được gửi để lấy dữ liệu từ máy chủ. Yêu cầu được thực hiện bằng cách gọi phương thức mở với cú pháp như hình bên dưới

    Đối tượng XMLHttpRequest. open(Phương thức yêu cầu HTTP, tên tệp để thực thi, boolean)

    • Phương thức yêu cầu HTTP. Nó có thể là GET, POST hoặc bất kỳ phương thức nào khác được máy chủ hỗ trợ
    • tên tệp. Đó là URL của tệp (nằm trên máy chủ) mà chúng tôi muốn gọi để lấy thông tin mong muốn từ máy chủ
    • Boolean. Đây là tham số tùy chọn để chỉ định xem yêu cầu có đồng bộ hay không. Nếu tham số này được đặt thành true, điều đó có nghĩa là yêu cầu không đồng bộ;

    Trong đoạn mã trên (Liệt kê 3), chúng ta sử dụng phương thức open tạo yêu cầu tới máy chủ thông qua phương thức GET, yêu cầu thực thi tệp ajaxaccessdata. php. Tên người dùng và địa chỉ email được chuyển đến tệp này để thực hiện xử lý chúng

    Vì một yêu cầu không đồng bộ được gửi đến máy chủ, chúng tôi cần theo dõi trạng thái của yêu cầu và phản hồi do máy chủ tạo ra cho yêu cầu. Để làm như vậy, chúng tôi nhờ sự trợ giúp của trình xử lý sự kiện, onreadystatechange, sẽ kích hoạt mọi thay đổi trạng thái. Vì vậy, bất cứ khi nào trạng thái của yêu cầu thay đổi, hàm() sẽ được thực thi khi giá trị của thuộc tính readyState được kiểm tra (để xem giá trị đó có trở thành 4 hay không, nghĩa là yêu cầu đã hoàn tất, tức là đã nhận được phản hồi đầy đủ của máy chủ). Ngoài ra, trạng thái của yêu cầu HTTP được kiểm tra để xem giá trị của nó có phải là 200 hay không, điều đó có nghĩa là không có lỗi xảy ra trong quá trình xử lý yêu cầu

    Sau đó, phản hồi được truy xuất từ ​​luồng phản hồi ở dạng văn bản (nó cũng có thể ở định dạng XML và JSON) và được gán cho biến, nội dung

    Sau đó, phần tử có id, thông tin, được tìm kiếm trong tài liệu (trang web) và thuộc tính innerHTML của nó (thuộc tính được sử dụng để hiển thị kết quả) được gán cho phản hồi của máy chủ. Đó là, dữ liệu truy cập ajax. php được thực thi trên máy chủ và kết quả hoặc đầu ra của nó được hiển thị trong trang web hiện tại, ajaxform. php bằng cách đặt thuộc tính innerHTML của phần tử div của id, info

    Như đã nói trước đó, phản hồi do máy chủ tạo dựa trên việc thực thi tệp ajaxaccessdata. php (xem Liệt kê 4)

    Liệt kê 4. Mã trong ajaxaccessdata. tập tin php

    ________số 8

    Hãy phân tích những gì nó trả về. Tệp trả về hai dòng văn bản cho khách hàng. "Chào mừng" cùng với tên của người dùng và "Id email của bạn là  ". Tên và id email của người dùng được lấy từ mảng $_GET

    Khi chạy chương trình PHP, ajaxaccessdata. người dùng php sẽ được nhắc nhập tên và địa chỉ email (xem Hình 3 [trái]). Sau khi nhập tên và địa chỉ email, khi người dùng nhấp vào nút Gửi, thông báo chào mừng cùng với tên người dùng sẽ hiển thị trên cùng một trang (xem Hình 3 [bên phải])

    PHP có thể được sử dụng như thế nào trong các ứng dụng AJAX?

    Hình 3 (trái) Người dùng được nhắc nhập tên và địa chỉ email. (phải) Thông báo chào mừng cùng với tên người dùng xuất hiện trên cùng một trang bằng cách triển khai AJAX

    Do đó, đầu ra xuất hiện khá nhanh hơn vì không có điều hướng nào diễn ra (xảy ra trong các ứng dụng web truyền thống) cũng như không yêu cầu tải lại toàn bộ trang web mà chỉ cần tải lại một thành phần của trang

    Bản tóm tắt

    Bạn đã học cách tạo một PHP để phản hồi nhanh các hành động của người dùng. Bạn đã thấy vai trò của đối tượng JavaScript và XMLHttpRequest trong việc thực hiện giao tiếp không đồng bộ với máy chủ web

    Bạn cũng thấy rằng không giống như các ứng dụng web truyền thống, nơi toàn bộ trang web được tải lại khi xảy ra sự kiện, thông qua AJAX, chúng ta có thể cập nhật ngay cả một phần nhỏ của trang web

    Để biết thêm các chương trình thú vị, hãy xem cuốn sách Giải phóng lập trình Android của tôi. Cuốn sách sử dụng cách tiếp cận từng bước để khám phá các tính năng của nền tảng điện thoại thông minh tuyệt vời này

    PHP có thể được sử dụng như thế nào trong ứng dụng AJAX?

    Tạo đối tượng XMLHttpRequest . Tạo chức năng sẽ được thực thi khi phản hồi của máy chủ sẵn sàng . Gửi yêu cầu tới tệp PHP (gethint. php) trên máy chủ .

    Sử dụng AJAX với PHP có tốt không?

    Tại sao nên sử dụng Ajax trong PHP? . A majority of PHP based sites are using Ajax & jQuery based solutions for better user experience on their wesites because asynchronous JavaScript and XML allows for such rich features in the website which PHP alone or just JavaScript can't provide us in the website.

    AJAX có thể gọi một hàm PHP không?

    html(phản hồi); . '); . Lưu câu trả lời này. you can't call a PHP function directly from an AJAX call. Save this answer.

    Các công nghệ khác nhau được sử dụng trong AJAX trong PHP là gì?

    Ajax được tạo thành từ các công nghệ sau. XHTML và CSS để trình bày thông tin. Mô hình đối tượng tài liệu (DOM) để tương tác động và hiển thị thông tin được trình bày. Đối tượng XMLHttpRequest để thao tác dữ liệu không đồng bộ với máy chủ web