<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>發送get請求的ajax_基礎語法</h1> <input type="button" value="發送get_ajax請求" id='btnAjax'> </body> </html> <script type="text/javascript"> // 綁定點擊事件 document.querySelector('#btnAjax').onclick = function () { // 發送ajax 請求 需要 五步 // 1.創建異步對象 var ajaxObj = new XMLHttpRequest(); // 2.設置請求的url等參數 // 參數1 請求的方法 參數2 請求的url ajaxObj.open('get','02.ajax.php'); // 3.發送請求 ajaxObj.send(); // 假設 有一個 接返回數據的 方法ajaxObj.get(); // 4.註冊事件 // onreadystatechange 狀態改變就會調用 // 如果要在 數據完美請求回來的時候 才調用 我們需要手動的 寫一些判斷的邏輯 ajaxObj.onreadystatechange = function () { // 爲了保證 數據 完整回來,我們一般會判斷 兩個值 if (ajaxObj.readyState==4&&ajaxObj.status==200) { // 如果能夠進到這個判斷 說明 數據 完美的回來了,並且請求的頁面是存在的 // 5.在註冊的事件中 獲取 返回的 內容 並修改頁面的顯示 console.log('數據完美的回來了'); // 數據是保存在 異步對象的 屬性中 console.log(ajaxObj.responseText); // 修改頁面的顯示 document.querySelector('h1').innerHTML = ajaxObj.responseText; } } } </script>
發送get請求的ajax_基礎語法代碼演示
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章