基礎知識 知識點梳理見圖： 自己動手實踐案例 案例1： 訪問本地文件 <!DOCTYPE html> <html> <body> <div id="demo"> <h1>XMLHttpRequest 對象</h1> <button type="button" onclick="loadDoc()"> ...
基礎知識
知識點梳理見圖：
自己動手實踐案例
案例1： 訪問本地文件
<!DOCTYPE html> <html> <body> <div id="demo"> <h1>XMLHttpRequest 對象</h1> <button type="button" onclick="loadDoc()">更改內容</button> </div> <script> function loadDoc() { const myHttp = new XMLHttpRequest(); myHttp.onload = function () { //響應 document.getElementById("demo").innerHTML = this.responseText }; //這裡是訪問跟文件同一層級下的文件夾下的某個文件 myHttp.open("GET", "./demo/aa.txt",true); myHttp.send(); } </script> </body> </html>
文件的位置：
- 代碼效果如下：
- 如果本地測試報錯的話，可以看這篇文章： 原生AJAX案例瀏覽器報錯：Cross origin requests are only supported for protocol
案例2：訪問服務端數據
<!DOCTYPE html> <html> <body> <div id="demo"> <h1>XMLHttpRequest 對象</h1> <button type="button" onclick="loadDoc()">更改內容</button> </div> <script> function loadDoc() { const myHttp = new XMLHttpRequest(); myHttp.onload = function () { //響應 document.getElementById("demo").innerHTML = this.responseText }; console.log(myHttp.getAllResponseHeaders()) //定義method url myHttp.open("GET", "http://123.207.32.31:5000/test",true); //設置請求頭 - 請求頭的設置要在open之後，此處 是設置token，必須是 key-val 形式 myHttp.setRequestHeader( "Authorization","eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwibmFtZSI6ImNvZGVyd2h5Iiwicm9sZSI6eyJpZCI6MSwibmFtZSI6Iui2hee6p-euoeeQhuWRmCJ9LCJpYXQiOjE2ODYyMDgxMzMsImV4cCI6MTY4ODgwMDEzM30.Ve6T7h4dGuYmk4Lwch1rlr2pvf11XKfr2F2mxl1kAgp46rvgFxjmUqjhRmq90whydPVYTtrvPnWp1aGY50eVtQcY1olqqwr8ZOngERHIyHgzQxY3zEDLrtcZ5nrNqGeAIutc6kDOgGQFPyOvFOnKKMH7Puwgjydv41XGpEEqNus" ) //定義傳輸數據 let str = { "name": "dingding", "password": "4569841" } //傳遞參數 myHttp.send(JSON.stringify(str)); } </script> </body> </html>
- 代碼效果如下：
案例3：自己嘗試封裝一個AJAX
等待更新。。。。。。
