當前位置：
首頁 >
AJAX GET的请求
發布時間：2025/4/16
33
豆豆
生活随笔
收集整理的這篇文章主要介紹了
AJAX GET的请求
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX GET 請求</title><style>#result{width:200px;height:100px;border:solid 1px #90b;}</style>
</head>
<body><button>點擊發送請求</button><div id="result"></div><script>//獲取button元素const btn = document.getElementsByTagName('button')[0];const result = document.getElementById("result");//綁定事件btn.onclick = function(){//1. 創建對象const xhr = new XMLHttpRequest();//2. 初始化 設置請求方法和 urlxhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');//3. 發送xhr.send();//4. 事件綁定 處理服務端返回的結果// on when 當....時候// readystate 是 xhr 對象中的屬性, 表示狀態 0 1 2 3 4// change 改變xhr.onreadystatechange = function(){//判斷 (服務端返回了所有的結果)if(xhr.readyState === 4){//判斷響應狀態碼 200 404 403 401 500// 2xx 成功if(xhr.status >= 200 && xhr.status < 300){//處理結果 行 頭 空行 體//響應 // console.log(xhr.status);//狀態碼// console.log(xhr.statusText);//狀態字符串// console.log(xhr.getAllResponseHeaders());//所有響應頭// console.log(xhr.response);//響應體//設置 result 的文本result.innerHTML = xhr.response;}else{}}} }</script>
</body>
</html>
總結
以上是生活随笔為你收集整理的AJAX GET的请求的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Express 的简单使用
- 下一篇： AJAX POST 请求