Ajax系列

Ajax

同步交互与异步交互

所谓同步交互就是指客户端向服器端发送请求后,必须等待结果返回才能进行下一次请求
- 举例: 比如A跟B说给我一杯水，B去倒水,A等着B去倒水，B倒完水回来给A，A喝完水之后，A继续做其他事情!
所谓异步交互就是不需要等待结果返回就可以直接向服务器端发送下一次请求
-举例: 比如A跟B说给我一杯水，B去倒水，A去做其他事情，B倒完水，跟A说水来了，A放下其他事情喝水，A喝完水继续做其他事情
总结: 同步就是要一个事情一个事情的做,而异步就是同时做多个事情

分析图:
图片描述

实现Ajax异步交互的步骤

创建XMLHTTPRequest对象
调用XMLHTTPRequest对象的open()方法
调用XMLHttpRequest对象的send()方法
利用XMLHTTPRequest对象的onreadystatechange事件
将接收到的结果更新到HTML页面

示例代码:

<body>
<button id="btn">哒哒哒</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
    // 通过ID属性获取节点
    var btn = document.getElementById('btn');
    // 为获取的ID属性绑定点击事件
    btn.addEventListener('click',function () {
        // 实现Ajax的异步交互

        // 1.创建XMLHTTPRequest对象
        var xhr = createXMLHttpRequest();

        /*
            2.调用XMLHTTPRequest对象的open()方法
              * 作用 - 与服务器端建立连接
              open(method,url)方法
                * method - 表示当前的请求方式
                  * 常见的请求方式为GET和POST
                * url - 表示当前请求的服务器端地址链接
         */
        xhr.open('get','http://localhost:63342/untitled/Study2/Ajax系列-01/1.测试XMLHTTPRequest对象.html?');

        /*
            3.调用XMLHttpRequest对象的send()方法
                * 作用 - 将客户端页面的数据发送给服务器端
              send()方法
                * 如果不传递任何数据内容时 - 向该方法传递null
         */
        xhr.send(null);

        /*
            4.利用XMLHTTPRequest对象的onreadystatechange事件
                * 作用 - 用于监听服务器端的通信状态
                * 服务器端的通信状态中 - 存在着处理完毕(信号)
                  * 接收服务器端返回的处理结果
         */
        xhr.onreadystatechange = function () {// 监听服务器端的通信状态
            /*
                XMLHttpRequest对象的readyState属性
                  * 作用 - 表示服务器端的通信状态
                  * 值:
                    * 0 - 表示未初始化
                    * 1 - 表示open()方法被调用
                    * 2 - 表示send()方法被调用
                    * 3 - 表示正在响应
                    * 4 - 表示响应已完毕
             */
            if (xhr.readyState === 4) {
                /*
                    接收服务器端返回的处理结果
                    XMLHttpRequest对象的responseText属性
                      * 作用 - 用于接收服务器端的响应结果
                 */
                console.log(xhr.responseText);
            }
        }
        /*
            5.将接收到的结果更新到HTML页面
         */
    });
</script>
</body>

readyState属性

XMLHttpRequest对象的readyState属性
- 作用 - 表示服务器端的通信状态
- 值:
  - 0 - 未初始化
  - 1 - open()方法被调用
  - 2 - send()方法被调用
  - 3 - 正在响应
  - 4 - 响应已完毕

示例代码:

<body>
<button id="btn">哒哒哒</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
    // 通过ID属性获取指定元素
    var btn = document.getElementById('btn');
    // 为获取的属性绑定点击事件
    btn.addEventListener('click',function () {
       // 1.创建XMLHttpRequest对象
       var xhr = createXMLHttpRequest();
       
       xhr.onreadystatechange = function () {// 监听服务器端的通信状态
           /*
                XMLHttpRequest对象的readyState属性
                * 作用 - 表示服务器端的通信状态
                * 值
                  * 0 - 未初始化
                  * 1 - open()方法被调用
                  * 2 - send()方法被调用
                  * 3 - 正在响应
                  * 4 - 响应已完毕
            */
           // console.log(xhr.readyState);
           if (xhr.readyState === 4) {
               /*
                    保证当前的异步请求一定是正确的
                      * XMLHttpRequest对象的status属性
                        * 作用 - 得到当前请求之后的响应状态码
                          * 200 - 表示请求成功
                          * 304 - 表示请求的资源未变化(转向获取本地缓存)
                          * 404 - 表示服务器端地址未找到
                */
               console.log(xhr.status);
               if (xhr.status === 200) {
                   /*
                        接收服务器端响应的结果
                          * responseText属性 - 专门接收字符串类型的结果内容
                          * responseXML属性 - 专门接收XML数据格式的结果内容
                    */
                   console.log(xhr.responseText);
               }
           }
           /*if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            }*/

       };
        xhr.open('get','http://localhost:63342/untitled/Study2/Ajax系列-01/1.测试XMLHTTPRequest对象.html?');
       xhr.send(null);
    });
</script>
</body>

send()方法

send(data)方法
- 参数data - 表示向服务器端发送的请求数据
- 请求方式
  - 如果当前的请求方式为GET的话 - send()方法中只能传递null值
  - 将请求数据添加到请求地址链接中
- 两种情况:
  - 请求数据的格式
    1. 如果具有多个请求数据的话，之间使用"&"进行分隔
    2. 每个数据格式 -> name=value

示例代码:

<body>
<!--
    提交表单时,向服务器端发送数据
      * 请求数据被添加请求链接地址中
        * 请求数据的格式
          1. 如果具有多个请求数据的话,之间使用"&"进行分隔
          2. 每个数据格式 - name=value
-->
<form action="#" method="get">
    <input type="text" id="user" name="user">
    <input type="text" id="pwd" name="pwd">
    <input type="submit">
</form>

<button id="btn">哒哒哒</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
    // 通过ID属性获取到指定元素
    var btn = document.getElementById('btn');
    // 为获取到的元素绑定点击事件
    btn.addEventListener('click',function () {
        // 1.创建XMLHttpRequest对象
        var xhr = createXMLHttpRequest();

        xhr.onreadystatechange = function(){// 监听服务器端的通信状态
            if (xhr.readyState === 4) {
                console.log(xhr.status);
                if (xhr.status === 200) {
                    console.log(xhr.responseText);
                }
            }
        };
        xhr.open('get','http://localhost:63342/untitled/Study2/Ajax系列-01/1.测试XMLHTTPRequest对象.html?');
        /*
            向服务器端发送请求数据
            send(data)方法
             * 参数data - 表示向服务器端发送的请求数据
             * 请求方式
               * 如果当前的请求方式为GET的话 - send()方法中只能传递null值
                 * 将请求数据添加到请求地址链接中
             * 两种情况:
               * 请求数据的格式
                 1.如果具有多个请求数据的话，之间使用"&"进行分隔
                 2.每个数据格式 -> name=value
               *
         */
        // 人为方式获取当前的数据，构建成指定的数据格式

        xhr.send(null);
    });
</script>
</body>

请求方式

如果是GET，send()方法只能传递null值 -> 请求数据添加在请求地址中
如果是POST，send()方法传递请求数据

示例代码:

<body>
<!--
    表单提交时 - MIME类型的默认值
    application/x-www-form-urlencoded
 -->
<form action="#" enctype="application/x-www-form-urlencoded">
    <input type="text" id="user" name="user">
    <input type="text" id="pwd" name="pwd">
    <input type="submit">
</form>

<button id="btn">哒哒哒</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
    // 通过ID属性获取到指定元素
    var btn = document.getElementById('btn');
    // 为获取到的元素绑定点击事件
    btn.addEventListener('click',function(){
        // 1.创建XMLHttpRequest对象
        var xhr = createXMLHttpRequest();

        xhr.onreadystatechange = function(){// 监听服务器端的通信状态
            if (xhr.readyState === 4) {
                console.log(xhr.status);
                if (xhr.status === 200) {
                    console.log(xhr.responseText);
                }
            }
        };

        xhr.open('post','http://localhost:63342/untitled/Study2/Ajax系列-01/1.测试XMLHTTPRequest对象.html?');
        // 设置请求头部信息
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        /*
            send()方法
            * 如果是GET，send()方法只能传递null值 -> 请求数据添加在请求地址中
            * 如果是POST，send()方法传递请求数据
         */
        xhr.send('user=zhangwuji&pwd=123456');
    });

</script>
</body>

Ajax系列

Ajax

同步交互与异步交互

实现Ajax异步交互的步骤

readyState属性

send()方法

请求方式

a达达

引用和评论

Ajax系列之JSON数据格式

第6章：Vue中的ajax（包含：回顾发送ajax请求方式、vue-cli脚手架配置代理服务器）

回顾前端页面发送ajax请求方式