ajax入門
不會給後端傳送請求。只會複製貼上,原理啥的也不瞭解,現在的專案是用axios,但是axios是以Ajax+Promise為基礎的,所以先學一波Ajax。
Ajax可以做到區域性重新整理,無需重新重新整理頁面,擁有更好的使用者體驗。
Ajax有兩種請求方式——POST和GET,模板如下:
GET請求
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> // 按鈕點選事件觸發的函式 function loadXMLDoc() { var xmlhttp; // XMLHttpRequest物件是當今所有AJAX和Web 2.0應用程式的技術基礎 if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 瀏覽器執行程式碼 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } // 每當 readyState 屬性改變時,就會呼叫該函式 xmlhttp.onreadystatechange=function() { // readyState儲存著XMLHttpRequest的狀態,從0-4 // 0——請求未初始化(還沒有呼叫open()) // 1——伺服器連線已建立(還沒有呼叫send()) // 2——請求已接收 // 3——請求處理中 // 4——請求已完成,且響應已就緒 // status值的解釋 // 1XX 資訊響應類,表示接收到請求並且繼續處理 // 2XX 處理成功響應類,表示動作被成功接收、理解和接受 // 3XX 重定向響應類,表示為了完成指定的動作,必須接受進一步處理 // 4XX 客戶端錯誤,客戶請求包含語法錯誤或者是不能正確執行 // 5XX 伺服器錯誤,伺服器不能正確執行一個正確的請求 if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } // open(method, url, async) 規定請求的型別、URL以及是否非同步處理請求 // {Param} method:請求的型別;GET或POST // {Param} url:檔案在伺服器上的位置 // {Param} async:true——非同步;false——同步。不推薦使用false,若是用了false,就不需要寫onreadystatechange()函式 xmlhttp.open("GET","/try/ajax/demo_get.php?num=" + Math.random(),true); // send(string) 將請求傳送到伺服器 // {Param} string 僅用於POST請求 xmlhttp.send(); } </script> </head> <body> <button type="button" onclick="loadXMLDoc()">請求資料</button> <div id="myDiv"></div> </body> </html>
POST請求
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 瀏覽器執行程式碼 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("POST","/try/ajax/demo_post2.php",true); // setRequestHeader(header,value) 向請求新增HTTP頭 // {Param} header 規定頭的名稱 // {Param} value 規定頭的值 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 傳送的資料 xmlhttp.send("fname=Henry&lname=Ford"); } </script> </head> <body> <button type="button" onclick="loadXMLDoc()">請求資料</button> <div id="myDiv"></div> </body> </html>
兩種請求的優缺點:
GET更簡單、更快;
POST可以傳送大量資料,更加穩定可靠。
具體的優缺點可以看後面的連結,裡面還詳講了三次握手:GET和POST請求的優缺點