使用Ajax实现异步通信

最新推荐文章于 2023-03-07 18:44:00 发布

极客研究者

最新推荐文章于 2023-03-07 18:44:00 发布

阅读量1k

点赞数

分类专栏： Ajax异步通信

本文链接：https://blog.csdn.net/qq_34550459/article/details/105936082

版权

Ajax异步通信专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在传统的Web开发中,与服务器进行通信主要是通过同步请求的方式(即刷新页面)来实现,如果同步请求的次数过于频繁,就会产生大量无用、重复的数据占用带宽。
Ajax完全摒弃了这种信息交互方式,它通过XMLHttpRequest组件,在不需要刷新页面的情况,与服务器保持异步通信和联系,服务器根据需要进行最小化响应,而不是完整页面的重复发送。

Ajax工作原理:
简单来说,就是通过JS中的XMLHttpRequest对象向服务器端发送异步请求,
从服务器端获取响应数据,然后在前台页面使用JS解析数据,DOM操作页面元素,
更新页面中的某部分。

核心对象:XMLHttpRequest
在这里插入图片描述
XMLHttpRequest核心机制对象,是一种支持异步请求的技术,可以使用javascript及时向服务器端发送请求以及处理服务器端响应数据,不阻塞用户,达到无刷新的效果。

在这里插入图片描述

为了演示ajax工作原理,需要服务器环境,楼主使用的是wampserver搭建本地服务器环境,去官网下载安装即可,如果遇到亮橙灯,不亮绿灯的情况,可参照下面的博文解决:
解决方案
改为8080端口

测试是否已成功安装:
测试方案

这边以php为后台语言,简单测试一下(我也没学过,教程是用php讲授的)
在服务器端文件夹下,创建测试所用文件:
XMLHttpRequestObject.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建XMLHttpRequest请求对象</title>
    <script>
        window.addEventListener('load', function () {


            //多次请求数据,应该每次都使用一个新的ajax对象
            var getRequestBtn = document.getElementById('getRequest');
            getRequestBtn.addEventListener('click', function () {
                // debugger;
                var ajaxObj = createXMLHttpRequest();

                // open()方法: 设置请求方法和服务器目标地址
                // get请求方法
                ajaxObj.open("get","http://localhost:8080/server.php?username=jackbryant&&password=P@ssw0rd",true);
                ajaxObj.send(null);
            });


            var postRequestBtn=document.getElementById('postRequest');
            postRequestBtn.addEventListener('click',function(){
                var ajaxObj = createXMLHttpRequest();
                  //post请求方法

                //1.设置请求方法:post和目标地址
                ajaxObj.open("post", "http://localhost:8080/serverpost.php", true);
                //2.设置请求头
                ajaxObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                //3.send()方法设置请求参数数据
                ajaxObj.send("username=jackbryant&&password=P@ssw0rd");
            });


            //创建XMLHttpRequest对象,用来处理ajax异步请求(考虑到兼容性问题)
            function createXMLHttpRequest() {
                var request = false;
                if (window.XMLHttpRequest) {
                    request = new XMLHttpRequest();
                    if (request.overrideMimeType) {
                        request.overrideMimeType("text/xml");
                    }

                } else if (window.ActiveXObject) {
                    var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Msxml2.XMLHTTP.7.0',
                        'Msxml2.XMLHTTP.6.0',
                        'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'
                    ];

                    for (var i = 0; i < versions.length; i++) {
                        try {
                            request = new ActiveXObject(versions[i]);
                            if (request) {
                                return request;
                            }

                        } catch (exception) {
                            request = false;
                            console.error(exception.error);
                        }

                    }

                }
                return request;
            }
        });

        /*
        1.HTTP 通过URL请求服务器
        2.请求方法: get post   -->接收方法: get和post这两种接收方法
        3.请求有:头信息+请求体(内容)
        4.响应有:响应头 +响应体(内容)
        
        */
    </script>
</head>
<body>
    <input type="button" value="GET请求数据" id="getRequest">
    <input type="button" value="POST请求数据" id="postRequest">
</body>
</html>

服务端文件:
server.php

<?php
    //服务器端处理请求数据
    //接收ajax请求传输过来的参数数据
    //get $_GET[]
    $username=$_GET["username"];
    $password=$_GET["password"];
    $str=$username."------".$password;
    file_put_contents("message.txt",$str);
    echo $str;//输出响应数据,等待客户端接收数据

serverpost.php 文件:

<?php
    //服务器端处理请求数据
    //接收ajax请求传输过来的参数数据
    //post  $_POST[]
    $username=$_POST["username"];
    $password=$_POST["password"];
    $str=$username."------".$password;
    //写入到文本文件中
    file_put_contents("postmessage.txt",$str);

在服务器端,使用对应的接收方法,获取请求参数,以及做出处理,将处理后的数据,响应给客户端。

在这里插入图片描述
客户端获取响应数据,使用javascript的DOM操作更新页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax服务器端响应请求数据</title>
    <style>
        .box{
            margin: 100px 0;
        }

    </style>
    <script>
        window.addEventListener('load', function () {   
            var serverReponseBtn = document.getElementById('serverReponse');
            var responseContentElement=document.querySelector('.responseContent');


            //获取服务器端响应数据
            serverReponseBtn.addEventListener('click', function () {
                    var ajaxObj = createXMLHttpRequest();
                    ajaxObj.open("get","http://localhost:8080/server.php?username=jackbryant&&password=P@ssw0rd",true);
                    ajaxObj.send(null);
                    ajaxObj.onreadystatechange = function () { //状态改变事件
                        // console.log(ajaxObj.readyState);
                        if (ajaxObj.readyState == 4) { //服务器端响应处理完成
                            // alert("响应处理完成!");
                            // console.log("statuscode:"+ajaxObj.status);
                            // console.log("status text:"+ajaxObj.statusText);
                            if (ajaxObj.status == 200) { //检测状态码200,是否请求成功
                                // alert(ajaxObj.responseText);

                                //responseText:获取服务器端响应的文本数据
                                responseContentElement.innerHTML=ajaxObj.responseText;
                            }
                        }
                    }
            });



            //创建XMLHttpRequest对象,用来处理ajax异步请求(考虑到兼容性问题)
            //

            function createXMLHttpRequest() {
                var request = false;
                if (window.XMLHttpRequest) {
                    request = new XMLHttpRequest();
                    if (request.overrideMimeType) {
                        request.overrideMimeType("text/xml");
                    }

                } else if (window.ActiveXObject) {
                    var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Msxml2.XMLHTTP.7.0',
                        'Msxml2.XMLHTTP.6.0',
                        'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'
                    ];

                    for (var i = 0; i < versions.length; i++) {
                        try {
                            request = new ActiveXObject(versions[i]);
                            if (request) {
                                return request;
                            }

                        } catch (exception) {
                            request = false;
                            console.error(exception.error);
                        }

                    }

                }
                return request;
            }
        });

        /*
        1.HTTP 通过URL请求服务器
        2.请求方法: get post   -->接收方法: get和post这两种接收方法
        3.请求有:头信息+请求体(内容)
        4.响应有:响应头 +响应体(内容)
        
        */
    </script>
</head>

<body>
    <input type="button" id="serverReponse" value="服务器端响应数据">
    <div class="box">
        <span class="responseContent"></span>
    </div>
</body>

</html>

总结:
Ajax工作原理:
使用AJAX按需取数据,而不是每次页面请求
都把所有动态数据全部获取,然后渲染页面
整体性能不好

采用传统的b/s请求方式,数据库中的数据有一处
更改,则会重新请求所有数据,整体性能较低

而采用ajax请求获取数据,即在页面的某一部分的动态数据处,创建request请求对象,发送给web服务器,
服务器端解析请求参数,将响应数据返回给客户端,然后在前台页面,使用js解析即可
实现按需请求数据,加快传输速度,性能良好

ajax异步请求:
其实就相当于整个页面是一个UI主线程,页面的分支部分,开辟了一个新的子线程,去web服务器请求数据
属于一种异步操作

ajax同步请求:
在ajax请求的过程中,整个页面要等待ajax请求完成,再进行其他操作

极客研究者

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用Ajax实现异步通信

在传统的Web开发中,与服务器进行通信主要是通过同步请求的方式(即刷新页面)来实现,如果同步请求的次数过于频繁,就会产生大量无用、重复的数据占用带宽。Ajax完全摒弃了这种信息交互方式,它通过XMLHttpRequest组件,在不需要刷新页面的情况,与服务器保持异步通信和联系,服务器根据需要进行最小化响应,而不是完整页面的重复发送。Ajax工作原理:简单来说,就是通过JS中的XMLHttpR...
复制链接

扫一扫

专栏目录