<!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>
浙公网安备 33010602011771号