XHR 和 AJAX 的结合 - API 测试

    大家好，之前一期介绍了怎样通过工具类进行对API 接口测试，这一期将演示如何手写一个 Ajax的请求。

    什么是 XHR ? 全称为 XMLHttpRequest ，它是浏览器内置的对象，使得 JavaScript 可以发送 HTTP 请求。
    什么是Ajax ? Ajax是一种用于创建快速动态网页的技术，在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式。通过XmlHttpRequest对象向服务器发异步请求，从服务器获取数据。然后通过JavaScript来操作DOM而更新页面。也就是JavaScript可以及时向服务器提出请求和处理响应，而不阻塞程序运行，达到无刷新的效果。JavaScript是单线程的，会阻塞代码运行，所以引入了XmlHttpRequest请求处理异步数据。XHR 和 AJAX 技术的结合，可以使网页在不刷新的情况下局部更新页面内容，加快网页的展示。
    1. 创建 xhr 对象，主要有两种模式，兼容模式和标准模式。
    (1) 标准模式： xhr = new XMLHttpRequest()
    (2) 兼容模式：通过添加判断条件

      var xhr;
      if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
      } else {
        //for IE6, IE5 兼容
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
      }

    2. 建立连接： 调用 xhr.open(参数1、参数2、参数3) 方法，连接服务器。

    参数1： 请求的方式，主要有 "GET" 和 "POST"
    参数2 ： 请求的 URL
    参数3： 是否异步发送请求的 Boolean，通常不填，默认为 "TRUE", 表示异步发送，一般情况下，不推荐同步发送。

    以打开VIP 这个XHR加载的API

    打开这个API, 正常是返回了 {“result”:1}

    3. 发送请求 ： xhr.send();
    4. 创建监听请求的readyStateChange事件

    其中判断的条件中，xhr.readyState 为4时 ， 表示 下载操作完成；
xhr.status 为 200，表示响应状态码正常。

 // 发送请求
      xhr.send();

     // 创建监听请求的readyStateChange事件
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            alert(xhr.responseText);
          } else {
            alert('出错了，Err:' + xhr.status);
          }
        }
      };

    请求结果正常显示，返回接口所响应的内容。

    再以 “GET” 为请求方式，进行测试。

    同样请求结果正常显示，返回接口所响应的内容。

xhr.open("GET","https://guangzhou.zbj.com/cgyx/api/getServiceBycate?categories%5B%5D=18077&categories%5B%5D=18078&categories%5B%5D=18079&categories%5B%5D=18081&categories%5B%5D=18082&sign=P20221222101&localCityId=3493&query%5Bsize%5D=5");