1.什么是ajax

Asynchronous JavaScript and XML
(异步的JavaScript 和XML)

Ajax不是某种编程语言
是一种在无需重新加载整个网页的情况下,能够局部更新网页的技术
从服务器上获取数据的一种技术是异步的

2.完整的原生ajax实现步骤

2.1创建ajax核心对象

var xhr = new XMLHttpRequest();

2.2与服务器建立连接

var url = “https://easy-mock.com/mock/5d67436624fd60626abfe91e/ajax/base“;
三个参数:url(请求地址）method(请求的方式 get post) async(同步、异步是否异步）

2.3发送请求

xhr.open(‘get’, url, true); //true 表示异步处理
xhr.send();

2.3.1open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
2.3.2send(string)
将请求发送到服务器。

string：仅用于 POST 请求

2.4响应

xhr.onreadystatechange = function () {
响应函数
}

<p id="name"></p>
  <p id="age"></p>
  <script>
      /* ajax  从服务器上获取数据的一种技术  是异步的
      1.创建ajax核心对象
      2.与服务器建立连接
      3.发送请求
      4.响应
      */
     /* JSON.parse()  json格式的字符串转换为json对象 */
      var url="https://www.easy-mock.com/mock/5d67436224fd60626abfe906/ajax/base";
      var xhr=new XMLHttpRequest();
      xhr.open('get',url,true)  //true  异步
      xhr.send()
      xhr.onreadystatechange=function(){
          /* console.log(xhr.readyState)
          console.log(xhr.status) */
          if(xhr.readyState==4 && xhr.status==200){    //请求已完成  200：请求成功
              var res=JSON.parse(xhr.responseText);
              console.log(res.data.name)
              var name=document.getElementById("name")
              name.innerHTML=res.data.name;
          }
      }
      /* 
      1.异步 同步  网络请求到底是用同步还是异步
      2.ajax使用场景
      3.如何使用ajax
        */
  </script>

原生ajax