<!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>