XHR的基本使用

xhr对象的readyState的属性 发起带参数的get请求 url编码与解码

get数据的html

    <!-- xhr是javascript中的对象，可以请求服务器上的数据，$.ajax函数也是xhr对象封装出来的 -->
    <script>

    // 1、创建xhr对象
    var xhr = new XMLHttpRequest()

    ///2、调用open函数 传递2个参数 
    // 返回 
    xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')


    // 发起带参数的GET请求  参数写在?问号后面 键值对的方式 称为 查询字符串
    // 如果有多个参数 可以用&符号 拼接 比如：id=1&name=feifei

    // 返回 id=1的对象 {"status":200,"msg":"获取图书列表成功","data":[{"id":1,"bookname":"西游记","author":"吴承恩","publisher":"北京图书出版社"}]}
    // xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks?id=1')

    //3、调用send函数 发起请求
    xhr.send()

    // 4、监听 onreadystatechange 事件
    xhr.onreadystatechange = function () {
        // 这个判断是固定的 xhr.readyState：对象的请求状态，xhr.status 服务器的请求状态
        if(xhr.readyState === 4 && xhr.status === 200) {
            // 5、获取服务器响应的数据
            console.log(xhr.responseText)
        }
    }
    </script>

xhr的post数据请求

<script>
        // 1、创建xhr对象
        var xhr = new XMLHttpRequest()

        // 调用open函数
        xhr.open('POST','http://www.liulongbin.top:3006/api/addbook')

        // 设置Content-Type属性 固定写法
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

        // 调用send函数
        xhr.send('bookname=小马过河&author=小肥红&publisher=北京图书出版社')

        // 监听事件
        xhr.onreadystatechange = function () {
            if(xhr.readyState ===4 && xhr.status === 200) {
                console.log(xhr.responseText);
                // 返回 {"status":201,"msg":"添加图书成功"}
            }
        }
    </script>