首先要知道,ajax的核心是>>>XMLHttpRequest对象;
XMLHttpRequest对象有许多方法,最有用的当属open方法,它用于指定服务器上将要访问的文件,
例如:open("GET", "test.txt", true );
指定了请求目标后,就可以用send方法发送请求啦;
下面看一个实例:
<body>
<button>点我发送一次ajax请求</button>
<div>
<p id="target">这里显示返回的数据</p>
</div>
<script>
var targetDom = document.getElementById('target');
//定义利用ajax技术获取服务端数据的函数
function getNewContent() {
// 首先要创建一个XMLHttpRequest对象
var request = new XMLHttpRequest();
// 如果浏览器支持XMLHttpRequest对象,则。。。
if (request) {
request.open("GET", "data/test.json", true);
request.onreadystatechange = function () {
if (request.readyState == 4){
var backData = JSON.parse(request.response)[0].name;
console.log(JSON.parse(request.response));
targetDom.innerText = backData;
}
};
request.send(null);
}else { // 如果浏览器不支持XMLHttpRequest对象,则。。。
alert("抱歉,你的浏览器不支持XMLHttpRequest!!!")
}
}
//添加点击事件,发送请求
var buttonObj = document.getElementsByTagName('button')[0];
buttonObj.onclick = function () {
getNewContent();
}
</script>
</body>
服务器在向XMLHttpRequest对象发回响应时,浏览器会在不同阶段更新 readyState 属性的值,如下:
0:表示未初始化;
1:表示正在加载;
2:表示加载完毕;
3;表示正在交互;
4:表示完成;
只要值变为4,则表示可以访问服务器发送回来的数据啦!