AJAX请求

什么是AJAX，用来干什么？

用于局部刷新数据，（不刷新页面的情况下，提交数据）

AJAX的使用

AJAX使用分为4个步骤

1. 创建

        创建对象 new XMLHttpRequest();

2. 配置

        xhr.open(请求方式，请求地址，是否异步);

        请求方式：get、post

        是否异步：true-异步、false-同步

        异步：多个任务按顺序开始，不一定按顺序结束。eg：下载任务、图片加载

        同步：上一个任务结束，下一个任务开始。eg：弹窗alert

3. 响应

        发送后的状态值readyState：

                0-对象已创建，还未初始化，未调用send

                1-open已调用，未调用send

                2-send已调用，其他未知

                3-请求已发送，正在接收数据

                4-表示数据已经收到        

        前后端交互的数据类型是string

        使用JSON.parse（string），将字符串string转为obj

4. 发送

        xhr.send()

原生JS实现

    // 1. 创建
    var xhr = new XMLHttpRequest();
    // 2. 配置
    // xhr.open(请求方式，请求地址，是否异步);
    var url = "http://jsonplaceholder.typicode.com/posts"
    xhr.open("get",url,true);
    // 3. 响应
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            //数据接收成功
            // console.log(JSON.parse(xhr.responseText));
            // 数据接收成功后，将数据显示在body里
            var arr = JSON.parse(xhr.responseText);
            arr.forEach(function(obj){
                document.body.innerHTML += `
                    <div>
                        <p>${obj.title}</p>
                        <p>${obj.body}</p>
                    </div>
                `
            })
        }
    }
    // 4. 发送
    xhr.send();

JQ实现

    $.ajax({
        type: 'get',
        url: 'https://api.vvhan.com/api/ian?type=json',
        //请求成功
        success: function(res){
            console.log(res);
        },
        //请求失败
        error:function(err){
            console.log(err);
        }
    })