基礎知識
知識點梳理見圖：
自己動手實踐案例
案例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
等待更新，，，，，，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/554709.html
標籤：JavaScript
上一篇：50道常見高頻大廠面試題
下一篇：返回列表