简单的AJAX技术(异步的JavaScript和XML)

AJAX是创建交互式网页应用的网页开发技术的一种。

Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。可以用于创建快速动态网页的技术。在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

XMLHttpRequest使用方法

XMLHttpRequest对象是AJAX的基础 ,用于在后台与服务器交换数据 。可以使用XMLHttpRequest方法实现简单的异步交互。

1..创建XMLHTTPRequest对象（创建实例）

var request = new XMLHttpRequest();

2. 使用open方法设置和服务器的交互信息（打开链接）

request.open('get','https://api.muxiaoguo.cn/api/lishijr/')

3.设置requestHeader()请求头（像 HTML 表单那样 POST 数据 ）

request.setRequestHeader(属性名称, 属性值);

4.使用send()方法设置发送的数据，开始和服务器端交互 （发送请求 send可以携带参数）

request.send(); //调用send()之后,请求就会发送到服务器

5.取得响应，注册事件（接收响应）

request.onreadystatechange = function (){
    if(){}
    if(){}
}

整体的代码如下：

<button onclick="getRequest()">发送请求</button>
<script>
  function getRequest() {
    // 1.创建XMLHttpRequest对象
    var request = new XMLHttpRequest();
    // 2.使用open方法设置和服务器的交互信息
    request.open('get', 'https://api.muxiaoguo.cn/api/lishijr');
    // 3.如果默认可不设置requestHeader
    // 4.发送请求
    request.send();
    // 5.如果请求完成，并且响应完成，获取到响应数据
    request.onreadystatechange = function () {
      if (request.readyState === 4 && request.status === 200) {
        // console.log(request.responseText);
        // 转换为JSON对象
        console.log(JSON.parse(request.responseText));
      }
    }
  }
</script>