AJAX的使用

以流行的【一言】接口为例，我们可以访问这个网址，可以得到一段包含随机网络流行语句相关内容的JSON字符串，你可以点进去查看。

1. 我们需要借助一个对象的属性和方法，它就是XMLHttpRequest构造函数的实例，因此我们需要声明实例对象

2. 监听请求过程，xhr 对象上的 readyState 属性可以标识请求的当前状态

3. 监听已经设置好了，接下来就是设定请求的方式和地址，好比你出去玩之前做好规划，用什么方式去哪里玩

4. 发送请求

// xhr 是 XMLHttpRequest 的首字母拼接
var xhr = new XMLHttpRequest();

// 设置监听函数
// xhr对象上的readyState属性可以标识请求的当前状态，它有以下值：
//  0 请求还未初始化
//  1 设定请求
//  2 请求已接受
//  3 正在处理请求
//  4 请求已完成
xhr.onreadystatechange = function(){
    // readyState == 4 说明请求过程已完成
    if(xhr.readyState == 4){
        console.log("请求结束了");
        // 根据 xhr对象上的 status属性 获取响应状态码
        switch(xhr.status){
          case 200:
              // 成功时, 通过xhr对象上的 response属性 获取到服务器返回的数据
            console.log("请求是成功的，数据是：",xhr.response);
            var res = JSON.parse(xhr.response);
          case 400:
            console.log("请求参数有问题");
            break;
          case 404:
            console.log("请求地址有问题");
            break;
          case 500:
            console.log("服务器出了问题");
            break;
          default:
            break;
        }
    }
}

// xhr.open(方式, URL, 是否异步【默认异步】)
xhr.open("GET", "https://v1.hitokoto.cn/");

// xhr.send(请求参数) 因为GET方式的参数是在URL中，因此这里写null，当然不写可是可以的
xhr.send(null);

2. GET请求设置参数

GET请求用于获取数据，有时候我们需要获取的数据需要通过“查询参数”进行定位，在这种情况下，我们会将查询参数追加到URL的末尾，令服务器解析。

查询参数是指一个由 ? 号起始，由 & 符号分割的包含相应键值对的字符串。用来告知浏览器所要查询的特定资源。

不凡提供电影数据请求接口：http://bufantec.com/api/douban/movie/in_theaters

// 创建实例
var xhr = new XMLHttpRequest();

// 设定返回值类型
xhr.responseType = "json";

// 监听请求进度
xhr.onreadystatechange = function(){
    // readyState == 4 说明请求过程已完成
    // status == 200 说明http请求内容成功，数据可用
    if(xhr.readyState == 4 && xhr.status == 200){
        console.log(xhr.response);
    }
}

// 设置请求方式及地址，默认为异步请求，最后的true可以省略
// 携带参数信息
xhr.open("GET", "http://bufantec.com/api/douban/movie/in_theaters?start=1&limit=10", true);

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

3. GET与POST区别

接口请求的两种方式，使用场景和方式上有一些差别。

1. get请求的参数会附在url之后，post请求的参数放在请求体当中

2. get请求参数会受限于url的长度限制，post请求参数大小没有限制

3. post相较于get安全性高

4. 语义上的区别，get意为获取，post意为提交