ajax复习
通过创建xhr对象来访问接口
注意：现在大部分浏览器都只支持异步，所以open的异步参数最好是true
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<script type="text/javascript" src="static/template-web.js"></script>
<script type="text/javascript" src="static/jquery-3.5.1.js"></script>
<script type="text/javascript" src="static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
//获取xmlHttpRequest对象方法
function getXMLHttpRequest() {
var xmlHttpRequest = null;
if (window.ActiveXObject) {//IE浏览器创建XMLHttpRequest对象
xmlHttpRequest = new ActiveXObject("MSXML2.XMLHTTP.3.0");
} else if (window.XMLHttpRequest) {
xmlHttpRequest = new XMLHttpRequest();
}
return xmlHttpRequest;
}
//为按钮1绑定事件
$("#btn1").bind("click",function () {
/*1、调出xmlHttpRequest*/
var xhr = getXMLHttpRequest();
console.log("xhr>>"+xhr);
/**
* 2,服务器和客户端建立通信
* XMLHttpRequest对象的open()方法的三个参数：method, url, asynch
* 参数1：请求类型，即get和post方法
* 参数2：请求路径
* 参数3：是否是异步请求，默认为true，表示支持异步请求
*/
xhr.open("get","http://localhost:8080/userinformation/person",true);
//如果是post请求方式，需要手动设置请求头信息
// xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
/**
* 3，向服务器发送请求
*
* XMLHttpRequest对象的send()方法
* 如果客户端的请求类型是get方式的话，利用send()方法发送的数据，服务器无法接受到请求数据，相当于发送了null值
*
* 如果客户端的请求类型是post方式的话，利用send()方法发送的数据，服务器可以接受到请求数据
*
* 虽然get方法发送请求，服务器端无法接受响应数据，但此步骤不能省略，此时可以直接发送xhr。sent(null)
*/
xhr.send(null)
//如果是post发送数据：xhr.send("a=1&b=2")
/**
* 4,接受服务器端的响应数据(注册监听)
* XMLHttpRequest对象的onreadystatechange属性
* XMLHttpRequest对象的readyState 属性
* readyState 属性表示Ajax请求的当前状态。
它的值用数字代表。
0 代表未初始化。 还没有调用 open 方法
1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
2 代表已加载完毕。send 已被调用。请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕
XMLHttpRequest对象的status属性
常用状态码及其含义：
404 没找到页面(not found)
403 禁止访问(forbidden)
500 内部服务器出错(internal service error)
200 一切正常(ok)
304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )
*/
xhr.onreadystatechange = function () {
console.log("xhrReadStatus>>"+xhr.readyState)
console.log("xhrStatus>>"+xhr.status)
if (xhr.readyState == 4){
if (xhr.status == 200 || xhr.status == 304){
var data = xhr.responseText;
console.log("data>>"+data);
}
}
}
});
//按钮2
$("#btn2").bind("click",function () {
let xhr = getXMLHttpRequest();
xhr.open("get","http://localhost:8080/userinformation/person"+"?account=1847193435",true);
xhr.send(null);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4){
if (xhr.status == 200 || xhr.status == 304){
//这里用text接收json数据，然后再转化
var data = JSON.parse(xhr.responseText)
console.log(data);
console.log(data.data)
}
}
}
});
//按钮3
$("#btn3").bind("click",function () {
let xhr = getXMLHttpRequest();
xhr.open("post","http://localhost:8080/userinformation/person",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("account=1847193435");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4){
if (xhr.status == 200 || xhr.status == 304){
var data = JSON.parse(xhr.responseText);
console.log(data)
}
}
}
});
})
</script>
<button id="btn1">测试ajax: GET，返回text</button>
<button id="btn2">测试ajax：GET，放回json</button>
<button id="btn3">测试ajax: POST,放回json</button>
</body>
</html>
