Ajax异步请求

144 阅读1分钟

Ajax: Asynchronous javaScript and xml (异步的JavaScript和xml技术)。当我们向服务器发起请求的时候,服务器不会像浏览器响应整个页面,而是只有局部刷新。它是一个异步请求。 请求:

同步请求:只有当一次请求完全结束以后才能够发起另一次请求。

异步请求:不需要其他请求结束就可以向服务器发起请求。

Ajax的优点:

1、ajax是异步请求,浏览器页面只需要进行局部刷新,效率非常的高。

不足的地方:

1、因为ajax是异步请求,所以会导致请求服务器的次数大大增加,增加服务器的负担。

2、因为ajax使用的是JavaScript来接收服务器响应的数据。而JavaScript对浏览器的兼容性不太好。所以有时候对不同的浏览器进行区别对待。但是该问题可以通过jquery来解决。

<!-- get和post 实战用法的区别 -->

    <!-- 1、get 会把参数放在url上显示 所以不安全  -->

    <!-- 2、post 不会把参数显示到url上 登录的时候推荐使用psot -->

    <!-- 3、get 传输的数据有限制 2kb 只支持 ASCII 字符 -->

    <!-- 4、post 传输没有大小限制,没有限制,也允许二进制数据

    传输文件 或者 图片的时候 使用post请求 -->
    <!-- form表单提交数据 是会把整个页面进行刷新 重新加载整个网页 -->

    <form action="" method="post">

        密码:<input type="password" name="password">

        <input type="submit" value="submit">

    </form>

    <br>

    <button onclick="ajaxFn()">ajax获取数据</button>

    <script>

        function ajaxFn() {

            /* Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术

        局部更新

 */

            /* 创建Ajax的步骤 */

\


            /* 第一步 创建Ajax对象 */

            /* new一个XMLHttpRequest的实例化对象 */

            let xhr = new XMLHttpRequest();

            console.log(xhr)

\
\


            /* 第二部 连接到服务器 */

            /*

                open(方法,文件名,同步异步)

                参数一:post/get

                参数二:请求的文件名

                参数三:同步(false)  异步(true)

            */

\


            /* 获取文件的数据一定要使用异步 */

            /* 读取文件需要时间 */

            xhr.open('get', 'abc.txt', true)

\


            /* 第三步 发送请求 */

            xhr.send();

\


            /* 第四步 接收返回值 */

            /* 监听返回值 */

            /* onreadystatechange就是用来监听readyState值的变化的 */

            xhr.onreadystatechange = function () {

                /* xhr.responseText 通过ajax请求获得的数据 */

                console.log(xhr.responseText)

            }

            /* 使用live server 打开页面 */

        }

\


        /* 同步异步区别 */

        /*

        同步交互:指发送一个请求,需要等待返回,然后才能够发送下一个请求,有个等待过程

异步交互:指发送一个请求,不需要等待返回,随时可以再发送下一个请求,即不需要等待

\


        */

\
\
\


    </script>