競速遊戲《達喀爾拉力賽》PC配置公開 推薦GTX 1070
今天來聊一聊前後端互動的重要工具AJAX
結合上次跟大家分享的前後端互動基礎，如果還沒有看過的童鞋，以下是傳送門
【前後端互動詳解】
1. AJAX
- 到底什麼是Ajax?
ajax 全名 async javascript and XML(非同步JavaScript和XML)
是前後臺互動的能⼒ 也就是我們客戶端給服務端傳送訊息的⼯具，以及接受響應的⼯具
AJAX 不是新的程式語言，而是一種使用現有標準的新方法。
AJAX 是與伺服器交換資料並更新部分網頁的藝術，在不重新載入整個頁面的情況下。
是⼀個 預設非同步執⾏機制的功能,AJAX分為同步（async = false）和非同步（async = true）
- 什麼是同步請求？(false)
同步請求是指當前發出請求後，瀏覽器什麼都不能做，
必須得等到請求完成返回資料之後，才會執行後續的程式碼，
相當於生活中的排隊，必須等待前一個人完成自己的事物，後一個人才能接著辦。
也就是說，當JS程式碼載入到當前AJAX的時候會把頁面裡所有的程式碼停止載入，頁面處於一個假死狀態，
當這個AJAX執行完畢後才會繼續執行其他程式碼頁面解除假死狀態
- 什麼是非同步請求？(預設:true)
預設非同步：非同步請求就當發出請求的同時，瀏覽器可以繼續做任何事，
Ajax傳送請求並不會影響頁面的載入與使用者的操作，相當於是在兩條線上，各走各的，互不影響。
一般預設值為true，非同步。非同步請求可以完全不影響使用者的體驗效果，
無論請求的時間長或者短，使用者都在專心的操作頁面的其他內容，並不會有等待的感覺。
2. AJAX 的優勢
不需要外掛的⽀持，原⽣ js 就可以使⽤
⽤戶體驗好（不需要重新整理⻚⾯就可以更新資料）
減輕服務端和頻寬的負擔
缺點：搜尋引擎的⽀持度不夠，因為資料都不在⻚⾯上，搜尋引擎搜尋不到
3. AJAX 的操作流程
具體操作流程：
首先通過PHP頁面將資料庫中的資料取出
取出後轉成json格式的字串，後利用ajax把字串返還給前臺
再利用json.parse解析通過迴圈新增到頁面上
那麼反之，前端的資料可以利用ajax提交到後臺
但是後臺是沒有辦法直接把這些資料插入到資料庫中，所以要先提交到PHP頁面上
最後再由PHP將資料插入到資料庫中
4. AJAX 的使用
在 js 中有內建的建構函式來建立 ajax 物件
建立 ajax 物件以後，我們就使⽤ ajax 物件的⽅法去傳送請求和接受響應
Ajax的一個最大的特點是無需重新整理頁面便可向伺服器傳輸或讀寫資料(又稱無重新整理更新頁面),這一特點主要得益於XMLHTTP元件XMLHTTPRequest物件。
XMLHttpRequest 物件方法描述
1.建立⼀個 ajax 物件
// IE9及以上
const xhr = new XMLHttpRequest()
// IE9以下
const xhr = new ActiveXObject('Mricosoft.XMLHTTP')
上⾯就有了⼀個 ajax 物件
我們就可以使⽤這個xhr 物件來發送 ajax 請求了
2.配置連結資訊
XMLHttpRequest 物件屬性描述(用於和伺服器交換資料。)
//所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 物件。
const xhr = new XMLHttpRequest()
// xhr 物件中的 open ⽅法是來配置請求資訊的
// 第⼀個引數是本次請求的請求⽅式 get / post / put / ...
// 第⼆個引數是本次請求的 url
// 第三個引數是本次請求是否非同步，預設 true 表示非同步，false 表示同步
// xhr.open('請求⽅式', '請求地址', 是否非同步)
xhr.open('get', './data.php')
上⾯的程式碼執⾏完畢以後，本次請求的基本配置資訊就寫完了
3.傳送請求
//如需將請求傳送到伺服器，我們使用 XMLHttpRequest 物件的 open() 和 send() 方法：
const xhr = new XMLHttpRequest()
xhr.open('get', './data.php')
// 使⽤ xhr 物件中的 send ⽅法來發送請求
xhr.send()
上面程式碼是把配置好資訊的 ajax 物件傳送到服務端
一個最基本的 ajax 請求就是上面三步 但是光有上面的三個步驟，我們確實能把請求傳送到服務端
如果服務端正常的話，響應也能回到客戶端 但是我們拿不到響應
如果想要拿到響應，我們需要有兩個前提條件
1. 本次 HTTP 請求是成功的，也就是我們下面要說的 http 狀態碼為 200 ~ 299
2. ajax 物件也有自己的狀態碼，用來表示本次 ajax 請求中各個階段
5.AJAX 狀態碼
ajax 狀態碼 - xhr.readyState
是用來表示一個 ajax 請求的全部過程中的某一個狀態
readyState === 0 : 表示未初始化完成，也就是 open 方法還沒有執行
readyState === 1 : 表示配置資訊已經完成，也就是執行完 open 之後
readyState === 2 : 表示 send 方法已經執行完成
readyState === 3 : 表示正在解析響應內容
readyState === 4 : 表示響應內容已經解析完畢，可以在客戶端使用了
這個時候我們就會發現，當一個 ajax 請求的全部過程中，只有當 readyState === 4 的時候，我們才可以正常使用服務端給我們的資料
所以，配合 http 狀態碼為 200 ~ 299
一個 ajax 物件中有一個成員叫做 xhr.status
這個成員就是記錄本次請求的 http 狀態碼的
兩個條件都滿足的時候，才是本次請求正常完成
readyStateChange
在 ajax 物件中有一個事件，叫做 readyStateChange 事件
這個事件是專⻔用來監聽 ajax 物件的 readyState 值改變的的行為
也就是說只要 readyState 的值發生變化了，那麼就會觸發該事件
所以我們就在這個事件中來監聽 ajax 的 readyState 是不是到 4 了
const xhr = new XMLHttpRequest() xhr.open('get', './data.php')
xhr.send()
xhr.onreadyStateChange = function () {
// 每次 readyState 改變的時候都會觸發該事件
// 我們就在這裡判斷 readyState 的值是不是到 4
// 並且 http 的狀態碼是不是 200 ~ 299
if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) {
// 這裡表示驗證通過
// 我們就可以獲取服務端給我們響應的內容了 }
}
使用 ajax 傳送請求時攜帶引數
我們使用 ajax 傳送請求也是可以攜帶引數的
引數就是和後臺互動的時候給他的一些資訊
但是攜帶引數get 和 post兩個方式還是有區別的
GET 還是 POST？
與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。
然而，在以下情況中，請使用 POST 請求：
無法使用快取檔案（更新伺服器上的檔案或資料庫）
向伺服器傳送大量資料（POST 沒有資料量限制）
傳送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠
傳送一個帶有引數的 get 請求
get 請求的引數就直接在 url 後面進行拼接就可以
const xhr = new XMLHttpRequest()
// 直接在地址後面加一個 ?，然後以 key=value 的形式傳遞 // 兩個資料之間以 & 分割
xhr.open('get', './data.php?a=100&b=200')
xhr.send()
這樣服務端就能接受到兩個引數 一個是 a，值是 100，一個是 b，值是 200
傳送一個帶有引數的 post 請求
post 請求的引數是攜帶在請求體中的，所以不需要再 url 後面拼接
const xhr = new XMLHttpRequest() xhr.open('post', './data.php')
// 如果是用 ajax 物件傳送 post 請求，必須要先設定一下請求頭中的 content- type
// 告訴一下服務端我給你的是一個什麼樣子的資料格式 xhr.setRequestHeader('content-type', 'application/x-www-form- urlencoded')
// 請求體直接再 send 的時候寫在 () 裡面就行
// 不需要問號，直接就是 'key=value&key=value' 的形式 xhr.send('a=100&b=200')
// 1. 建立 ajax 物件
let xhr = new XMLHttpRequest()
// 2. 配置請求資訊 xhr.open(‘GET’, ‘./test.php’, true)
// 3. 傳送請求 xhr.send()
// 4. 接受響應 xhr.onload = function () {
console.log(xhr.responseText) }
6.AJAX封裝
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
type 代表 請求方式
url 代表 請求url路徑
data 代表 傳送資料
success 代表 下載資料成功以後執行的函式
error 代表 下載資料失敗以後執行的函式
*/
function $ajax({type = "get", url, data, success, error}){
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
if(type == "get" && data){
url += "?" + querystring(data);
}
xhr.open(type, url, true);
if(type == "get"){
xhr.send();
}else{
//設定提交資料格式
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
data ? xhr.send(querystring(data)) : xhr.send();
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
if(success){
success(xhr.responseText);
}
}else{
if(error){
error("Error：" + xhr.status);
}
}
}
}
}
function querystring(obj){
var str = '';
for(var attr in obj){
str += attr + "=" + obj[attr] + "&";
}
return str.substring(0, str.length - 1);
}
window.onload = function(){
var aBtns = document.getElementsByTagName("button");
/*
當我們下載完資料以後需要對資料的處理方式不一樣
【注】$ajax，我們需要按照傳參的順序，依次傳入我們的引數。
*/
aBtns[0].onclick = function(){
$ajax({
url: "code14/1.get.php",
data: {
username: "小明",
age: 18,
password: "123abc"
},
success: function(result){
alert("GET請求到的資料：" + result);
},
error: function(msg){
alert("GET請求資料錯誤：" + msg);
}
})
}
aBtns[1].onclick = function(){
$ajax({
type: "post",
url: "code14/2.post.php",
data: {
username: "小花",
age: 18,
password: "123abc"
},
success: function(result){
alert("POST請求到的資料：" + result);
},
error: function(msg){
alert("POST請求資料錯誤：" + msg);
}
})
}
}
</script>
</head>
<body>
<button>GET請求</button>
<button>POST請求</button>
</body>
</html>
————————————————
版權宣告：本文為CSDN博主「抱著貓睡覺的魚_」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/Oriental_/article/details/104863762