js ajax 請求
阿新 • • 發佈：2020-08-18
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload = function() { var Obtn = document.querySelector('input'); Obtn.onclick = function() { // 建立一個XMLHttpRequest 物件，這是ajax請求的核心；這裡採用一個三元選擇，是為了相容ie6/ie5// 在ie6/ie5中，使用new ActiveXObject('Microsoft.XMLHTTP')建立XMLHttpRequest物件 var xhr = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject('Microsoft.XMLHTTP'); // xhr.withCredentials = true; // 獲取ajax請求地址,在地址後面加入一個隨機數，是為了解決ie瀏覽器的識別問題，ie瀏覽器相同的請求地址，不會再次進行請求，// 加入一個隨機數之後，再次請求時，ie會解析為不同的地址 var url = 'http://xxxxxx?params=111'; // 對請求的狀態進行監控 // 0 -- 未初始化，確認XMLHttpRequest 物件已經建立，併為呼叫open()方法初始化做準備 // 1-- 載入，對XMLHttpRequest 物件進行初始化，即呼叫open()方法，根據引數(method,url,true)完成物件狀態的設定，並呼叫send()方法向伺服器端傳送請求。1表示正在向服務端傳送請求// 2--載入完成，收到伺服器的相應資料，但是隻是原始資料，並不能直接在客戶端使用。值為2表示已經接收完全部相應資料，併為下一階段解析做好準備 // 3--互動資料，解析相應資料，即根據伺服器端相應頭部返回的MIME型別把資料轉換成能通過 responseBody,responseText,responseXML屬性存取的格式,為在客戶端呼叫做好準備。 // 值為3表示正在解析資料 // 4--完成， 此階段確認全部資料都已經解析為可以在客戶端使用的資料， 解析已經完成。 值為4表示解析完成， 可以通過XMLHttpRequest物件對應的屬性獲取資料 xhr.onreadystatechange = function() { if (xhr.readyState == 4) { // 將XMLHttpRequest返回的資料轉換成為json格式（因為返回來的是一個字串） var obj = JSON.parse(xhr.responseText); var str = ''; // 遍歷obj for (var key in obj) { str += "<p>" + key + "," + obj[key] + "</p>"; } // 輸出obj document.querySelector('.box').innerHTML = str; } } xhr.open('GET', url, true); xhr.send(null); } } </script> </head> <body> <input type='button' value="ajax請求呼叫資料"> <div class='box'></div> </body> </html>