在現代網頁開發中,我們常常會使用到Ajax技術。它能夠讓我們在不刷新整個頁面的情況下向服務器發起請求并獲取到數據,這給用戶體驗帶來了很大的提升。而作為服務端語言的PHP,則可以讓我們處理這些請求并返回給前端想要的結果。
假設我們有一個簡單的網頁,上面有一個按鈕,點擊該按鈕會向服務器請求當前時間并顯示在頁面上。在這種場景下,我們可以使用Ajax向PHP發起一個請求,并由PHP程序返回當前時間。
function showTime() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("time").innerHTML = this.responseText;
}
}
xhr.open("GET", "getTime.php", true);
xhr.send();
}
上面的代碼中,我們首先獲取了一個XMLHttpRequest對象,并設置了其onreadystatechange屬性,該屬性指定了xhr對象狀態改變時的回調函數。我們在回調函數中判斷了xhr對象的狀態和服務器返回的狀態碼,如果都符合要求,則將服務器返回的響應文本設置到頁面上。
然后我們使用xhr.open方法打開一個GET請求,并將請求發送至getTime.php這個PHP頁面。最后使用xhr.send方法發送請求。
if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
echo date("Y-m-d H:i:s");
}
在getTime.php這個PHP頁面中,我們判斷了請求頭中是否包含了HTTP_X_REQUESTED_WITH,并且該字段是否為xmlhttprequest(這是由于在jQuery中,發起Ajax請求時會在請求頭中添加該字段,以此來判斷當前請求是否為Ajax請求)。如果當前請求為Ajax請求,則我們輸出當前時間給客戶端。
除此之外,我們還可以使用POST方法向PHP發起請求,并傳遞數據給服務器。
function searchUser() {
var searchInput = document.getElementById("searchInput").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("result").innerHTML = this.responseText;
}
}
xhr.open("POST", "searchUser.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("userName=" + searchInput);
}
在這個例子中,我們有一個搜索框和一個搜索按鈕。用戶在搜索框中輸入用戶名后,點擊搜索按鈕,我們就會向服務器發送一個POST請求,傳遞當前搜索框中的值。而searchUser.php這個PHP頁面,則會從數據庫中查詢用戶名,并將查詢結果返回給前端。
$userName = $_POST["userName"];
$result = mysqli_query($link, "SELECT * FROM users WHERE name LIKE '%$userName%'");
if (mysqli_num_rows($result) >0) {
while ($row = mysqli_fetch_assoc($result)) {
echo $row["name"] . "
";
}
} else {
echo "No result";
}
在PHP中,我們使用$_POST["userName"]獲取前端發送過來的數據,并使用該數據在數據庫中查詢。如果有查詢結果,則將每個用戶名依次輸出。如果沒有查詢結果,則輸出"No result"。這樣,我們就能夠通過Ajax向PHP發起請求,并使用PHP處理數據并返回結果,以此來實現前后端的交互。