11.ajax:
/*
实现过程:
1.创建Ajax的核心对象 XMLHttpRequest对象
new XMLHttpRequest()
2.通过实例化对象中的open()与服务器建立连接
open(method:表示请求方式,url:服务器的地址)
3.构建请求所需的数据内容,并通过实例化对象中的send()方法发给服务器
send(body:发送的数据)
如果使用get请求发送数据,send()参数设置为null
4.通过实例化对象提供的 onreadystatechange 事件监听服务器的通信状态
onreadystatechange 主要监听的属性是实例对象中的readyState
readyState 五种状态:
0:open()方法未调用,还没建立连接
1:send()方法未调用,还没发送请求
2:send()已调用,响应头和响应状态已返回
3:响应体正在下载,responseText(接收服务端响应结果),获取部分数据
4:整个请求过程已经完毕
只要readyState属性值发生改变,onreadystatechange事件就被触发
5.接受并处理服务端向客户端相应的数据结果
6.将处理结果更新到HTML页面中
*/
function ajax(url, data) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
// post请求:
// 1.xhr.open('POST', url, true);
// 2.xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
// responseText:以字符串的形式返回
// console.log(JSON.parse(xhr.responseText));
console.log(xhr.responseText);
}
}
}
xhr.send(null);
// 3.xhr.send(data);
}