Ajax的基本使用

Ajax 是异步的JavaScript和XML,是一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。

Ajax在浏览器与web服务器之间使用异步数据传输（http请求），这样就可以使网页从服务器请求少量的信息，而不是整个页面。Ajax描述了一种主要使用脚本操作http的web应用架构，Ajax应用的主要特点是使用脚本操纵http和Web服务器进行数据交换，不会导致页面重载。

1.get 无参

        // 1.创建实例对象
        var xhr = new XMLHttpRequest();
        // 2.打开一个连接
        // 第一个参数请求方式
        // 第二个参数是接口地址
        xhr.open('get','http://47.93.206.13:8002/index/findAllCategory');
        // 3.发送请求
        xhr.send();
        // 4.接收响应
        xhr.onreadystatechange = function () {
            // 表示请求发送成功,可以接收响应
            if(xhr.readyState === 4&xhr.status === 200){
                console.log(xhr.responseText);
            }
            if(xhr.readyState === 4&xhr.status === 500){
                console.log(xhr.responseText);
            }
        }

2.get携带参数

<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>
    <script>
        var qs =Qs;
        // get参数携带在地址栏上     不安全 显式的
        // post参数携带请求体  安全 隐式的
        // 1.创建实例对象
        var xhr = new XMLHttpRequest();
        // 2.打开一个连接
        let obj ={
            page:1,
            pageSize:10
        }
        // console.log(qs.stringify(obj));
        xhr.open('get','http://47.93.206.13:8002/index/pageQueryArticles'+"?"+qs.stringify(obj));
        // 转换为查询字符串  Qs.stringify(obj)
        // 3.发送请求
        xhr.send();
        // 4.接收响应
        xhr.onreadystatechange = function () {
            if(xhr.readyState === 4&xhr.status === 200){
                console.log(xhr.responseText);
            }
        }

3.post携带参数

let obj = {
            username:"admin2",
            password:123321
        }
        // 创建实例
        var xhr = new XMLHttpRequest();
        // 打开连接
        xhr.open('post','http://47.93.206.13:8002/user/login');
        // 设置请求头
        xhr.setRequestHeader('content-type','application/json')
        // 发送请求
        xhr.send(JSON.stringify(obj));
        // 接收响应
        xhr.onreadystatechange = function () {
            if(xhr.readyState===4& xhr.statusText===200){
                console.log(xhr.responseText);
            }
        }