Ajax免刷新地前后端交互功能實例
本文略帶PHP代碼需要在PHP環(huán)境下使用
介紹
AJAX (Asynchronous JavaScript and XML) 是一種創(chuàng)建快速動態(tài)網(wǎng)頁應用的開發(fā)技術(shù)，它允許網(wǎng)頁在不重新加載整個頁面的情況下，與服務器交換數(shù)據(jù)并更新部分網(wǎng)頁內(nèi)容。例如，在我們做爬蟲的時候發(fā)現(xiàn)有些頁面可以打開圖片、視頻等資源，但是無論我們怎么查找都無法查到資源的url到底在哪里，這就說明網(wǎng)頁很有可能把資源的url藏在了javascript的代碼中，通過XMLHttpRequest 對象向后端發(fā)送請求，在前端篩選處理信息并呈現(xiàn)出來。
XMLHttpRequest 對象
所有現(xiàn)代瀏覽器均支持 XMLHttpRequest 對象。XMLHttpRequest 用于在后臺與服務器交換數(shù)據(jù)。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新。
在這個html的代碼中，我們設置了一個按鈕，點擊這個按鈕就會觸發(fā)函數(shù)ajax（），在ajax函數(shù)中，我們首先創(chuàng)建了一個XMLHttpRequest對象，接下來使用我們創(chuàng)建的對象向指定的url發(fā)送get請求，在加載完畢后（onreadystatechange）以后就會觸發(fā)匿名函數(shù)，把請求的內(nèi)容放到id為aj的標簽里面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax</title>
<script>
function ajax() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("aj").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "http://127.0.0.1:8000/a", true);
xhr.send();
}
</script>
</head>
<body>
<button onclick="ajax()">click me</button>
<div id="aj"></div>
</body>
</html>我們創(chuàng)建了一個服務器監(jiān)聽8000端口，并且設置這個網(wǎng)頁的url為……/a，但是我們使用瀏覽器打開html文件以后發(fā)現(xiàn)，怎么點擊按鈕都打不開。
在束手無策的時候，我們不得已打開抓包工具，然后查看console(終端)發(fā)現(xiàn)它給我們的提示是：
這個報錯給我們的提示大概內(nèi)容是不允許我們的內(nèi)容跨站加載（瀏覽器的同源策略），于是要想訪問127.0.0.1：8000我們現(xiàn)在要做的就是把這個html文件也放到對應的url上。為了更快加載這些資源，我們這次選擇php語言做服務端。
<?php
$request_url = $_SERVER['REQUEST_URI'];
$request_url = rtrim($request_url, '/');
$request_url = ltrim($request_url, '/') ;
switch($request_url){
case 'a':
echo "Hello from A";
break;
case 'b':
if(file_exists("1.html")){
include("1.html");
}else{
echo "not found file 1.html";
}
break;
default:
echo "404 Not Found";
break;
}
?>這個代碼的大致思路是通過$_SERVER['REQUEST_URL']獲得我們輸入的url，在接下來的rtrim和ltrim函數(shù)中，我們把獲得的url前后的'/'去掉，接下來通過switch根據(jù)不同的url向客戶端返回不同的網(wǎng)頁。之后我們在終端輸入php -S 127.0.0.1:8000 filename.php這樣我們的服務器就會運行在指定的端口。
再在終端打開測試即可。
接下來我們點擊按鈕后發(fā)現(xiàn)，瀏覽器沒有刷新頁面就給我們加載出來了想要的信息。
onkeyup
在上面的代碼中，我們每次點擊按鈕都會給我們進行一次請求，但是這樣使用起來顯然有點麻煩，我們?nèi)绻斎肽承炞C類的東西，每次都要重新點擊會加重我們的負擔，那么在html標簽中給我們準備了onkeyup，讓我們可以改變輸入的值以后就會被瀏覽器檢測到，進而讓我們不再需要點擊，而是直接輸入改變值就可以和后端對接。
onkeyup 是一個HTML事件屬性，用于在用戶釋放鍵盤上的某個鍵時觸發(fā)指定的 JavaScript 函數(shù)或代碼。這個事件通常用于捕獲用戶在輸入框中輸入的內(nèi)容，并在用戶停止輸入時執(zhí)行某些操作，例如實時搜索、驗證輸入或動態(tài)更新頁面內(nèi)容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sub</title>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("hint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("hint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "http://127.0.0.1:8000/sub?id=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<input type="text" onkeyup="showHint(this.value)">
<div id = "hint"></div>
</body>
</html>在測試的過程中，我做了這樣的一個前端代碼，有一個文本輸入的input我們每次輸入數(shù)據(jù)都可以觸發(fā)函數(shù)showHint()。接下來我們看一下服務端怎么構(gòu)造。
<?php
$request_url = $_SERVER['REQUEST_URI'];
$request_url = rtrim($request_url, '/');
$parsed_url = parse_url($request_url);
$path = $parsed_url['path'] ?? '';
$query = $parsed_url['query'] ?? '';
$path = ltrim($path, '/');
switch($path){
case 'a':
echo "Hello from A";
break;
case 'b':
if(file_exists("1.html")){
include("1.html");
}else{
echo "not found file 1.html";
}
break;
case 'sub':
parse_str($query, $query_params);
$id = $query_params['id'] ?? '';
if(!isset($id) || empty($id)){
include("2.html");
}else if($id === '1'){
echo "這是１";
}else if($id === '2'){
echo "這是２";
}else{
echo "not found";
}
break;
default:
echo "404 Not Found";
break;
}
?>
在這個代碼中，我們輸入的url為……/sub時就會呈現(xiàn)html文件，里面是一個輸入框。我們可以傳入?yún)?shù)，html文件會給我們的服務端發(fā)送帶著id參數(shù)的請求，而不同的id則會觸發(fā)不同的提示。
fetch函數(shù)
Fetch API 是一種現(xiàn)代的、功能強大的網(wǎng)絡請求工具，它允許你通過 JavaScript 異步地請求資源，而不需要使用傳統(tǒng)的 XMLHttpRequest 對象。Fetch API 可以簡潔地發(fā)起 HTTP 請求，并處理服務器的響應。Fetch API 基于 Promise 設計，使得異步操作更加簡潔和易于理解。
fetch函數(shù)的使用會讓你的代碼更加易讀，使用它處理url會讓代碼更加優(yōu)雅。它的基本使用方法是：
fetch(url)
.then(response => response.json()) // 解析 JSON 數(shù)據(jù)
.then(data => console.log(data)) // 處理數(shù)據(jù)
.catch(error => console.error('Error:', error)); // 錯誤處理我們按照這種方法修改一下2.html的代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sub</title>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("hint").innerHTML = "";
return;
} else {
fetch("http://127.0.0.1:8000/sub?id=" + str)
.then(response => response.json())
.then(data => {
document.getElementById("hint").innerHTML = data.result;
})
.catch(error => console.log(error));
}
}
</script>
</head>
<body>
<input type="text" onkeyup="showHint(this.value)">
<div id = "hint"></div>
</body>
</html>注意：一定要按照1.加載數(shù)據(jù)2.處理數(shù)據(jù)3.捕獲異常的順序，1和2不能合并在一起，因為js沒有多線程的編程方法，這就導致了它的異步工作處理非常發(fā)達，如果1和2寫在一起，就會導致，數(shù)據(jù)還沒有從服務器發(fā)過來就被開始處理，這通常會導致報錯。
測試后發(fā)現(xiàn)和之前相同，能正常使用
總結(jié)
到此這篇關(guān)于Ajax免刷新地前后端交互功能的文章就介紹到這了,更多相關(guān)Ajax免刷新前后端交互內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了Ajax實現(xiàn)城市二級聯(lián)動的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了ajax如何處理服務器返回的三種數(shù)據(jù)類型,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
AJAX入門之深入理解JavaScript中的函數(shù)
AJAX入門之深入理解JavaScript中的函數(shù)...2006-06-06
Ajax如何進行跨域請求？這篇文章主要為大家詳細介紹了Ajax跨域請求的原理，Ajax怎么樣做跨域請求？具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要為大家詳細介紹了Ajax實現(xiàn)搜索功能的分頁，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要為大家詳細介紹了輕量ajax組件編寫第三篇實現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-04
STRUTS+AJAX+JSP 請求到后臺亂碼問題可在AJAX請求URL之前把參數(shù)進行encodeURI()轉(zhuǎn)碼來解決，遇到類似情況的朋友可以參考下2013-12-12
AjaxUI：滑動條...2007-02-02
一個有趣的Ajax Hack示范...2006-11-11
利用ajax提交form表單到數(shù)據(jù)庫詳解(無刷新)
這篇文章主要給大家介紹了關(guān)于利用ajax提交form表單到數(shù)據(jù)庫(無刷新)的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-02-02