關於原生ajax請求
阿新 • • 發佈:2021-08-23
HMLHttpRequest物件
get請求
//步驟一:建立非同步物件 var ajax = new XMLHttpRequest(); //步驟二:設定請求的url引數,引數一是請求的型別,引數二是請求的url,可以帶引數,動態的傳遞引數starName到服務端 ajax.open('get','getStar.php?starName='+name); //步驟三:傳送請求 ajax.send(); //步驟四:註冊事件 onreadystatechange 狀態改變就會呼叫 ajax.onreadystatechange = function () { if (ajax.readyState==4 &&ajax.status==200) {//步驟五 如果能夠進到這個判斷 說明 資料 完美的回來了,並且請求的頁面是存在的 console.log(ajax.responseText);//輸入相應的內容 } }
post請求:
//建立非同步物件 var xhr = new XMLHttpRequest(); //設定請求的型別及url //post請求一定要新增請求頭才行不然會報錯 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.open('post', '02.post.php' ); //傳送請求 xhr.send('name=fox&age=18'); xhr.onreadystatechange= function () { // 這步為判斷伺服器是否正確響應 if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } };
方法
1, var ajax=new XMLHttpRequerst()建立一個XMLHttpRequest物件
2,ajax.open(【method】,【url】) 設定物件的請求方法和請求地址
3,ajax.setRequestHeader(【headerName】,【value】) 設定物件的頭部鍵值對
4,ajax.send() 傳送請求
5,ajax.onreadystatechange=function() 設計回撥函式
6,ajax.getResponseHeader(【headerName】) 返回響應對應key值的val