创建交互式网页应用的网页开发技术
再不重新加载整个网页的前提下,与服务器交换数据并且更新部分内容
简单来说就是无页面刷新的数据交互
通过创建xmlhttprequest对象向服务器异步发送请求从而获取数据,然后操作dom更新内容
1,创建xmlhttprequest对象xmh
2,通过xmh里面的open与服务器创建链接
3,构建请求所需的数据,通过send发送给服务器
4,通过onreadystatechange事件监听服务器的状态
5,接受数据,并且处理后把数据更新到页面上
// get 请求
// 创建 xhr 对象
const xhr = new XMLHttpRequest();
// XMLHttpRequest.open() 方法初始化一个请求
// 原始API:xhr.open(method, url, async);
// method:要是用的HTTP方法,url:请求的主体,async(可选):false为同步,true为异步,默认为同步
xhr.open('GET', '/api', false);
// 只要 readyState 属性发生变化,就会调用相应的处理函数。
xhr.onreadystatechange = function () {
// 这里的函数异步执行,可参考之前 JS 基础 中的异步模块
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 从服务器端返回文本。
alert(xhr.responseText);
};
};
};
// 默认要设置,因为get请求,不需要发送数据
// XMLHttpRequest.send()方法用于发送 HTTP 请求
xhr.send(null);