AJAX完成前后端通信

初始 Ajax

1. 是什么？

   异步JS和XML

   • Ajax中的异步：可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，浏览器可以做自己的事。直到成功获取响应后浏览器才开始处理响应数据。
   • XML（可扩展标记语言）是前后端数据通信时传输数据的一种格式；XML现在已经不怎么用了，现在比较常用的是JSON
   • Ajax就是浏览器与服务器之间的一种异步通信方式
   • 使用Ajax可以在不重新加载整个页面的情况下，对页面的某部分进行更新

   举例：注册、搜索提示框

基本用法

1. XMLHttpRequest

• Ajax 想要实现浏览器与服务器之间的异步通信，需要依靠XMLHttpRequest,它是一个构造函数
• 不论是 XMLHttpRequest，还是 Ajax，都没有和具体的某种数据格式绑定

2. Ajax 的使用步骤

1. 创建xhr对象

   const xhr = new XMLHttpRequest()

2. 监听事件，处理响应

   • 当获取到响应后，会触发xhr对象的readystatechange事件，可以在该事件中对响应进行处理

       // xhr.addEventListener('readystatechange', () => {}, fasle);
     xhr.onreadystatechange = () =>{
         if(xhr.readyState!== 4)return;
        // 获取到响应后，响应的内容会自动填充 xhr 对象的属性
             if ((xhr.status >= 200) & (xhr.status < 300) || xhr.status === 304) {
                // console.log('正常使用响应数据');
                console.log(xhr.responseText);
              }
     }
     

   注意：

   readystatechange 事件也可以配合 addEventListener 使用，不过要注意，IE6~8 不支持 addEventListener
   为了兼容性，readystatechange 中不使用 this，而是直接使用 xhr
   由于兼容性的原因，最好放在 open 之前

   readystatechange 事件监听 readyState 这个状态的变化；它的值从 0 ~ 4，一共 5 个状态

   0：未初始化。尚未调用 open()
   1：启动。已经调用 open()，但尚未调用 send()
   2：发送。已经调用 send()，但尚未接收到响应
   3：接收。已经接收到部分响应数据
   4：完成。已经接收到全部响应数据，而且已经可以在浏览器中使用了

3. 准备发送请求xhr.open('HTTP 方法','url',true)

   • 调用open并不会真正发送请求，而只是做好发送请求前的准备工作；true是否异步问题

4. 发送请求

   • 调用send() 正式发送请求
   • send() 的参数是通过请求体携带的数据
   • xhr.send(null)

3. 使用 Ajax 完成前后端通信

      const url = 'https://www.imooc.com/api/http/search/suggest?words=js';

      const xhr = new XMLHttpRequest();
      xhr.onreadystatechange = () => {
        if (xhr.readyState !== 4) return;

        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
          console.log(xhr.responseText);
          console.log(typeof xhr.responseText);
        }
      };
      xhr.open('GET', url, true);
      xhr.send(null);