當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

AJAX GET的请求

發布時間：2025/4/16 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 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的请求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

Ajax