ajax第二章

最新推荐文章于 2024-10-16 08:40:07 发布

qianmingmaoyao

最新推荐文章于 2024-10-16 08:40:07 发布

阅读量110

点赞数

文章标签： ajax javascript json

本文链接：https://blog.csdn.net/qianmingmaoyao/article/details/127002068

版权

03-ajax请求的步骤和语法

 // 1.创建XMLHttpRequest()对象实例
        var xhr = new XMLHttpRequest();
        // 2.请求方式和请求地址
        xhr.open('method', 'URL');
        // 如果是POST请求,在send之前设置请求头的数据格式
        // name=momoko&age=18
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //默认编码格式(数据被编码为名称/值对) 
        '{"name":"momoko","age":18}'
        xhr.setRequestHeader("Content-Type", "application/json"); //用来告诉服务端消息主体是序列化后的 JSON 字符串
        // 3.send()
        // GET请求方式参数URL提交
        xhr.send(null);
        // POST请求方式请求体请求,data:请求的参数
        xhr.send(data);
        // 4.监听请求状态的改变
        xhr.onreadystatechange = function() {
            // readyState:请求状态
            // 请求完成并接受完毕数据
            if (xhr.readyState === 4) {
                console.log("请求完成了");
                // status:http的状态码
                if (xhr.status == 200) {
                    console.log('响应成功,接受数据完成');
                    console.log(xhr.response);
                    console.log(xhr.responseText);
                }
            }
        };

04-ajax的get请求获取数据

  // 1.创建XMLHttpRequest
        var xhr = new XMLHttpRequest();
        //0:初始化，尚未调用open()方法
        console.log(xhr.readyState);
        // 2.请求方式和后台请求地址
        xhr.open('GET', 'http://192.168.1.222:3008/api/student/getStudent');
        //启动，已调用open()方法，但尚未调用send()方法
        console.log(xhr.readyState);
        // 3.send
        xhr.send(null);
        // 4.监听请求状态的改变
        xhr.onreadystatechange = function() {
            //2:发送，已调用send()方法，接收到响应头信息
            //3:接收中，已经接收到部分响应主体
            //4:完成，已经接收到全部响应数据
            console.log(xhr.readyState);
            // readyState:请求的状态改变的标识
            if (xhr.readyState === 4) {
                // status:http状态码
                if (xhr.status == 200) {
                    console.log(xhr.response);
                    console.log(xhr.responseText);
                }
            }
        };

05-完整的状态码判断

 // 1.创建XMLHttpRequest
        var xhr = new XMLHttpRequest();
        // readyState:请求的状态改变的标识
        //0:初始化，尚未调用open()方法
        console.log(xhr.readyState);
        // 2.请求方式和后台请求地址
        xhr.open('GET', 'http://localhost:3008/api/student/getStudent');
        //启动，已调用open()方法，但尚未调用send()方法
        console.log(xhr.readyState);
        // 3.send
        xhr.send(null);
        // 4.监听请求状态的改变
        xhr.onreadystatechange = function() {
            //2:发送，已调用send()方法，接收到响应头信息
            //3:接收中，已经接收到部分响应主体
            //4:完成，已经接收到全部响应数据
            console.log(xhr.readyState);
            console.log(xhr.statusText);
            if (xhr.readyState === 4) {
                // status:http状态码
                if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                    console.log(xhr.response);
                    console.log(xhr.responseText);
                }
            }
        };

06-ajax的get请求带参数

 // 1.创建XMLHttpRequest
        var xhr = new XMLHttpRequest();
        //0:初始化，尚未调用open()方法
        console.log(xhr.readyState);
        // 2.请求方式和后台请求地址
        // get请求在url的?的后面携带参数--参数的形式XXX=YYY&NNN=OOO
        xhr.open('GET', 'http://localhost:3008/api/student/getStudent?name=朱海传');
        //启动，已调用open()方法，但尚未调用send()方法
        console.log(xhr.readyState);
        // 3.send
        xhr.send(null);
        // 4.监听请求状态的改变
        xhr.onreadystatechange = function() {
            //2:发送，已调用send()方法，接收到响应头信息
            //3:接收中，已经接收到部分响应主体
            //4:完成，已经接收到全部响应数据
            console.log(xhr.readyState);
            // readyState:请求的状态改变的标识
            if (xhr.readyState === 4) {
                // status:http状态码
                if (xhr.status == 200) {
                    console.log(xhr.response);
                    console.log(xhr.responseText);
                }
            }
        };

07-ajax的post请求

 // 1.创建XMLHttpRequest
        var xhr = new XMLHttpRequest();
        // 2.设定请求的方式和接口地址
        xhr.open("POST", "http://localhost:3008/api/student/addStudent");
        // 3.设置请求头后然后send
        // 第一种:json格式提交参数
        //用来告诉服务端消息主体是序列化后的 JSON 字符串
        -- xhr.setRequestHeader("Content-Type", "application/json");
        -- var stuData = {
        --     clazz: "火花222",
        --     name: "刁坤坤",
        --     age: "25",
        --     tel: "18739275589",
        --     address: "商丘",
        --     remark: "火花222小鲜肉",
        --     gender: "男",
        --     hobby: "吃饭,睡觉,学习",
        -- };
        -- xhr.send(JSON.stringify(stuData));
        // 第二种:窗体格式
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        // 窗体格式
        var stuData = "clazz=火花222&name=常家豪&age=20&tel=88888888&address=商丘&remark=IT届男神&gender=男&hobby=学习"
        xhr.send(stuData);
        // 4.监听请求状态的改变
        xhr.onreadystatechange = function() {
            //2:发送，已调用send()方法，接收到响应头信息
            //3:接收中，已经接收到部分响应主体
            //4:完成，已经接收到全部响应数据
            console.log(xhr.readyState);
            // readyState:请求的状态改变的标识
            if (xhr.readyState === 4) {
                // status:http状态码
                if (xhr.status == 200) {
                    console.log(xhr.response);
                    console.log(xhr.responseText);
                }
            }
        };

08-ajax请求是异步请求

 // *******************************异步
        // 1.创建XMLHttpRequest
        var xhr = new XMLHttpRequest();
        //0:初始化，尚未调用open()方法
        console.log(xhr.readyState);
        // 2.请求方式和后台请求地址
        xhr.open('GET', 'http://localhost:3008/api/student/getStudent');
        //启动，已调用open()方法，但尚未调用send()方法
        console.log(xhr.readyState);
        // 3.send
        xhr.send(null);
        // 4.监听请求状态的改变
        xhr.onreadystatechange = function() {
            //2:发送，已调用send()方法，接收到响应头信息
            //3:接收中，已经接收到部分响应主体
            //4:完成，已经接收到全部响应数据
            console.log(xhr.readyState);
            // readyState:请求的状态改变的标识
            if (xhr.readyState === 4) {
                // status:http状态码
                if (xhr.status == 200) {
                    console.log(xhr.response);
                    console.log(xhr.responseText);
                }
            }
        };
        // *******************************同步
        for (var i = 0; i < 1000; i++) {
            console.log(i);
        };

        // js是一个单线程的语言,执行代码时先执行同步的脚本代码,然后根据异步的执行结果顺序进行返回到主程序

09-异步局部刷新

 <h2>信息管理系统</h2>
    <div class="main">
        <p> 请输入您要查看的信息
            <input type="text" name="stuName" id="stuName">
            <button id="btn">点击获取信息</button>
        </p>
    </div>
    <div class="content">
        <h3>学生信息</h3>
        <p class="studentInfo"></p>
    </div>
    <script>
        var stuName = document.querySelector('#stuName');
        var studentInfo = document.querySelector('.studentInfo');
        var btn = document.querySelector('#btn');
        btn.onclick = function() {
            // 1.创建XMLHttpRequest
            var xhr = new XMLHttpRequest();
            //0:初始化，尚未调用open()方法
            console.log(xhr.readyState);
            // 2.请求方式和后台请求地址
            // get请求在url的?的后面携带参数--参数的形式XXX=YYY&NNN=OOO
            xhr.open('GET', 'http://localhost:3008/api/student/getStudent?name=' + stuName.value);
            //启动，已调用open()方法，但尚未调用send()方法
            console.log(xhr.readyState);
            // 3.send
            xhr.send(null);
            // 4.监听请求状态的改变
            xhr.onreadystatechange = function() {
                //2:发送，已调用send()方法，接收到响应头信息
                //3:接收中，已经接收到部分响应主体
                //4:完成，已经接收到全部响应数据
                console.log(xhr.readyState);
                // readyState:请求的状态改变的标识
                if (xhr.readyState === 4) {
                    // status:http状态码
                    if (xhr.status == 200) {
                        console.log(xhr.response);
                        var repData = JSON.parse(xhr.response)[0];
                        // 设定到页面上
                        studentInfo.innerHTML = `
                    <span>${repData.clazz}</span>
                    <span>${repData.name}</span>
                    <span>${repData.age}</span>
                    `
                    }
                }
            };
        };
    </script>
    <span></span>

10-获取响应头信息

 // 1.创建XMLHttpRequest
        var xhr = new XMLHttpRequest();
        //0:初始化，尚未调用open()方法
        console.log(xhr.readyState);
        // 2.请求方式和后台请求地址
        xhr.open('GET', 'http://localhost:3008/api/student/getStudent');
        //启动，已调用open()方法，但尚未调用send()方法
        console.log(xhr.readyState);
        // 3.send
        xhr.send(null);
        // 4.监听请求状态的改变
        xhr.onreadystatechange = function() {
            //2:发送，已调用send()方法，接收到响应头信息
            //3:接收中，已经接收到部分响应主体
            //4:完成，已经接收到全部响应数据
            console.log(xhr.readyState);
            // readyState:请求的状态改变的标识
            if (xhr.readyState === 4) {
                // status:http状态码
                if (xhr.status == 200) {
                    console.log(xhr.response);
                    console.log(xhr.responseText);
                    // 获取响应头
                    console.log(xhr.getResponseHeader("Content-Type"));
                    // 获取所有的响应头
                    console.log(xhr.getAllResponseHeaders());
                }
            }
        };

11-封装ajax请求

 // // 1.创建XMLHttpRequest()对象
        // var xhr1 = new XMLHttpRequest();
        // // 2.设置请求方式和URL(后台的接口地址)
        // xhr1.open('GET', 'http://localhost:3008/api/student/getStudent');
        // // 3.发送，已调用send
        // xhr1.send(null);
        // xhr1.onreadystatechange = function() {
        //     if (xhr1.readyState == 4) {
        //         if (xhr1.status == 200) {
        //             // 接受后台的数据
        //             console.log(xhr1.response);
        //         }

        //     }
        // };
        // // 1.创建XMLHttpRequest()对象
        // var xhr2 = new XMLHttpRequest();
        // // 2.设置请求方式和URL(后台的接口地址)
        // xhr2.open('GET', 'http://localhost:3008/api/student/getStudent?name=张美丽');
        // // 3.发送，已调用send
        // xhr2.send(null);
        // xhr2.onreadystatechange = function() {
        //     if (xhr2.readyState == 4) {
        //         if (xhr2.status == 200) {
        //             // 接受后台的数据
        //             console.log(xhr2.response);
        //         }

        //     }
        // };


        // 1.获取数据
        // getData('http://localhost:3008/api/student/getStudent', null, function(xhr) {
        //     console.log(xhr.response);
        // });
        // getData('http://localhost:3008/api/student/getStudent', {
        //     name: '张美丽'
        // }, function(xhr) {
        //     console.log(xhr.response);
        // });
        // var stuData = {
        //     clazz: "火花222",
        //     name: "王文博",
        //     age: "20",
        //     tel: "18739275589",
        //     address: "商丘",
        //     remark: "火花222小鲜肉",
        //     gender: "男",
        //     hobby: "吃饭,睡觉,学习",
        // };
        // // 2.添加数据
        // postData('http://localhost:3008/api/student/addStudent', stuData, function(xhr) {
        //     console.log(xhr.response);
        // });
        // 3.删除数据
        // getData('http://localhost:3008/api/student/removeStudent', {
        //     id: '1630894000684'
        // }, function(xhr) {
        //     console.log(xhr.response);
        // });
        // 4.更新数据
        var updataData = {
            clazz: "火花222",
            name: "王文博2",
            age: "21",
            tel: "888888888888",
            address: "平顶山",
            remark: "火花222大汉",
            gender: "男",
            hobby: "吃饭",
            id: "1660792395750",
        };
        postData('http://localhost:3008/api/student/updateStudent', updataData, function(xhr) {
            console.log(xhr.response);
        });

12-jsonp实现跨域访问

 <div></div>
    <!-- 1.jsonp:利用script标签本来就具备的跨域功能来实现跨域访问数据,这种行为称为jsonp跨域读取数据 -->
    <!-- 2.之所以采用<script>标签，是因为该标签加载的资源可以直接当做JavaScript代码执行，只要通过服务器端的配合，就可以传送数据。
        3.JSONP本质上是加载了其他网站的脚本，这种方式存在安全风险，因为其他网站可以利用JavaScript窃取用户信息，或更改页面内容。
        4.jsonp是get请求
    -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
    <script>
        var divELe = document.querySelector('div');
        // 传递给后台的函数
        function fun(data) {
            console.log(data);
            divELe.innerText = data[0].name;

        }
    </script>
    <script src="http://localhost:3008/api/student/jsonpdemo?callback=fun"></script>