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