【JavaScript进阶学习】ajax

ajax

1. ajax是前后端交互的重要手段，ajax：异步的js和服务端的数据。前端用来异步获取服务端数据，无刷新加载新数据（不阻塞浏览器其他任务的情况下获取到新数据）
2. ajax并不是一个技术，多种技术的集合
   • 异步的js：事件
   • 其他js：处理数据的js
   • 服务端的数据：各种文本类：json，xml，txt，html，css，js…
   • xhr对象：XMLHttpRequest对象，载体，负责沟通前后端，并携带信息
3. 特点：
   • 无刷新加载新数据
   • 前后端连接的桥梁
   • 提高页面首屏加载速度
   • 提升用户体验
   • 破坏了浏览器的历史记录（前进或后退功能）
   • 搜索引擎爬虫无法获取由ajax引起的数据变化
4. ajax的使用（打电话）
   • 创建载体对象（有电话）
     • const xhr = new XMLHttpRequeat();
   • 设置请求方式，请求地址，同异步（通话方式，手机号，是否在做其他事）
     • xhr.open("get", "地址", true)
   • 执行发送信息功能（按拨号键）
     • xhr.send()
   • 通过事件监听状态（观察通话状态）
     • xhr.onreadystatechange = function(){}
       • 只要ajax的状态发生改变，就会触发
     • xhr.onload = function(){}
       • 只有ajax执行完成后，才会触发
     • 在事件中通过不同的状态，判断
       • 成功（通了）
         • 服务端响应的数据为：xhr.responseText
       • 失败（没通）
5. 状态信息
   • xhr的状态（载体状态，手机状态）：xhr.readyState
     • 0：初始化完成，调用send之前
     • 1：调用send之后，通话建立
     • 2：接收到响应信息，开始解析响应信息
     • 3：正在解析响应信息
     • 4：解析完成，可以使用了
   • http的状态（通信运营商的状态）：xhr.status
     • 1xx：通信未完成，或需要进一步处理
     • 2xx：完成
     • 3xx：已完成，但还不能使用，需要进一步处理
     • 4xx：出错，双方出错
     • 5xx：出错，服务器出错
6. 使用ajax发起请求

   const xhr = new XMLHttpRequest();
   xhr.open("get", "http://localhost:3000/api?type=login", true);
   xhr.send();
   xhr.onload = function(){
       if(xhr.status === 200){
           console.log( xhr.responseText );
       }
   }