一、Ajax的基础：
1、使用步骤
1.1、步骤：
- 创建一个异步对象
- 设置请求方式和请求地址
- 发送请求
- 监听状态的变化
- 处理返回的结果
1.2、示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax使用</title>
<script>
window.onload = function (ev) {
var btn = document.querySelector("button");
btn.onclick = function (ev1) {
//创建一个异步对象
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//设置请求方式和请求地址
/*
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
*/
/*注意：在IE浏览器中，如果通过Ajax发送GET请求，那么IE浏览器认为同一个URL只有一个结果
可以通过时间戳或者随机数来给请求地址添加一个参数，这样就可以实现每次的请求地址都不一样，
而且服务器还可以接收到这个请求，只是对添加的这个参数不作处理即可
*/
var timeStamp = new Date().getTime();
xmlhttp.open("GET", "http://{ip地址}/ajax_index.php?"+ timeStamp, true);
//发送请求
xmlhttp.send();
//监听状态的变化
xmlhttp.onreadystatechange = function () {
//处理返回的结果
if (xmlhttp.readyState===4) { //请求已完成
console.log("完成请求");
//判断是否请求成功
if (xmlhttp.status>=200 <=300 ||
xmlhttp.status===304) {
console.log("接受到服务器返回的数据");
} else {
console.log("没有接受到服务器返回的数据");
}
}
};
};
}
</script>
</head>
<body>
<button>发送请求</button>
</body>
</html>
网友评论