onload 和 onreadystatechange · 學習AJAX

[TOC] >[success] # onload和onreadystatechange <br/> ~~~ 有'2'種事件可以獲取接口返回值，'onload'等接口成功返回后，'onreadystatechange'只要狀態碼（200、404....等等）改變了都會走這個事件，所以使用'onreadystatechange'時候需要做判斷 ~~~ <br/> 1. 前端代碼 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: green; } div:hover { background: greenyellow; } </style> <script> window.onload = function () { /* 異步對象：同事干很多事情同步：一件事一件事的干 */ // 1. onload方式 document.querySelector('input').onclick = function () { // 1. 創建異步對象 var xhr = new XMLHttpRequest(); // 2. 設置請求行(get請求數據寫在url后面) // 使用同步的模式發送請求 // 參數3：是否使用異步默認是true （異步）、false（同步） // 同步請求響應回來之前什么事都干不了 // 基本上不會使用這個模式，知道有這個選項即可 xhr.open('get', 'xxx.php', false); // 3. 設置請求頭(get請求可以省略,post不發送數據也可以省略) // 3.5 注冊回調函數 xhr.onload = function () { console.log(xhr.responseText) } // 4. 請求主體發送(get請求為空，或者寫null，post請求數據寫在這里，如果沒有數據，直接為空或者寫null) xhr.send(null) } // 2. onreadystatechange方式 document.querySelector('.lastBtn').onclick = function () { // 1. 創建異步對象 var xhr = new XMLHttpRequest(); // 2. 設置請求行(get請求數據寫在url后面) // 使用同步的模式發送請求 // 參數3：是否使用異步默認是true （異步）、false（同步） // 同步請求響應回來之前什么事都干不了 // 基本上不會使用這個模式，知道有這個選項即可 xhr.open('get', 'xxx.php', true); // 3. 設置請求頭(get請求可以省略,post不發送數據也可以省略) // 3.5 注冊回調函數 // 觸發的次數多 // 狀態改變時會觸發 xhr.onreadystatechange = function () { // 判斷響應回來，并且請求的頁面存在，采取獲取數據 if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.readyState) console.log(xhr.responseText) } } // 4. 請求主體發送(get請求為空，或者寫null，post請求數據寫在這里，如果沒有數據，直接為空或者寫null) xhr.send(null) } } </script> </head> <body> <h2>異步對象</h2> <input type="button" value="ajax請求"> <input type="button" class="lastBtn" value="ajax請求2"> <div></div> </body> </html> ~~~ <br/> 2. 后臺代碼 ~~~ <?php echo '奧利給'; sleep(5); ?> ~~~