Ajax请求的步骤

1.什么是AJAX？

AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。

get请求（无参数） 

        // 1. 创建实例对象
        let xhr = new XMLHttpRequest();

        // 2. 打开一个链接
        // 第一个参数：请求方式
        // 第二个参数：请求地址
        xhr.open('get','http://47.93.206.13:8002/index/findAllCategory')

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

        // 4.接收响应
        xhr.onreadystatechange = function(){
            //xhr.readyState===4&&xhr.status===200表示请求成功可以发送请求
            if(xhr.readyState===4&&xhr.status===200){
                console.log(xhr.responseText);
            }else if(xhr.readyState===4&&xhr.status===500){  //500发送不成功
                console.log(xhr.responseText);
            }
        }
  

get请求（携带参数）

//从bootcdn中引入Qs  作用：将字符串转换为查询字符串
 <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>

    <script>
        // get 参数携带在地址栏中  不安全 显示的
        // post 参数携带在请求体中 安全   隐式的
        
        // 1. 创建实例对象
        var xhr = new XMLHttpRequest()

        // 2. 打开链接
        var obj = {
            page:1,
            pageSize:10
        }
        console.log(Qs.stringify(obj));
        //转换为查询字符串 Qs.stringify(obj)
        xhr.open('get','http://47.93.206.13:8002/index/pageQueryArticles?'+Qs.stringify(obj))

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

        // 4.接收响应
        xhr.onreadystatechange = function(){
            if(xhr.readyState===4&&xhr.status===200){
                console.log(xhr.responseText);
            }else{
                console.log(xhr.responseText);
            }
        }

    </script>

post请求（携带参数）

        let obj = {
            username:'admin2',
            password:123321
        }
        // 1. 创建一个实例
        let xhr = new XMLHttpRequest()

        // 2. 打开一个链接
        xhr.open('post','http://47.93.206.13:8002/user/login')


        // 3. 设置请求头
        xhr.setRequestHeader('Content-Type','application/json')

        // 4. 发送请求
        // 将字符串转换为JSON格式：JSON.stringify(obj)
        xhr.send(JSON.stringify(obj));

        // 5. 接收响应
        xhr.onreadystatechange = function(){
            if(xhr.readyState===4&&xhr.status===200){
                console.log(xhr.responseText);
            }else{
                console.log(xhr.responseText);
            }
        }