前端中的网络数据交互-ajax

最新推荐文章于 2024-04-13 17:28:02 发布

俗人844

最新推荐文章于 2024-04-13 17:28:02 发布

阅读量597

点赞数 3

分类专栏：前端文章标签：前端 ajax javascript

本文链接：https://blog.csdn.net/qq_61955502/article/details/128439331

版权

前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1.异步和同步任务

提到ajax首席就要说一下js的同步和异步任务

1.1同步：

同步的思想是：所有的操作都做完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感觉（就是系统迁移中，点击了迁移，界面就不动了，但是程序还在执行，卡死了的感觉）。这种情况下，用户不能关闭界面，如果关闭了，即迁移程序就中断了。

1.2异步：

将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉，会告诉你，你的请求系统已经响应了。你可以关闭界面了。

1.3总结：

使用异步的场景：网络请求,本地内容读取，I/O读取、数据库操作 ---耗时操作

使用同步的场景：主线程

常见异步代码：setInterval setTimeout 所有的事件 ,ajax请求

详细介绍请参考js的线程

2.ajax技术

2.1简介

ajax (Asynchronous Javascript And XML)其实就是异步的javaScript和XML。

AJAX不是一门新语言，是综合HTTP异步通信、JS、XML、以及JSON等多种网络技术的一种编程模型。

AJAX ~= JS+ xml+JSON + HTTP通信，本质就是在HTTP协议的基础上以异步的方式与服务器进行通信。

2.2ajax的优点

ajax别称叫做无刷新技术比如地图、局部加载

1.页面局部刷新。在读取数据的过程中，用户所面对的不是白屏，而是原来页面的转台，或者正在更新的信息提示状态，只有当接收到全部数据后才更新相应部分的内容，而这种更新也是瞬间的用户几乎感觉不到

2.可以充分利用客户端闲置的处理能力，减轻服务器和网路传输的负担

3.使web中界面与应用相分离也可以说是数据与呈现相分离

2.3ajax处理请求格式

Ajax模块在处理网络请求的时候包括以下四个步骤

1.通过XMLHttpRequest类创建xhr对象

2.为xhr对象添加属性与回调方法

3.令xhr对象执行open()方法，指明请求被发往某处

4.令xhr对象执行send()方法，发出请求。

补充：Ajax可以发出同步请求，也可以发出异步请求。但大多数情况下指的是异步请求，因为同步的Ajax请求对浏览器会产生“阻塞效应”。

实现代码如下:

利用ajax发送GET请求

 <script>
        //1.创建一个xhr对象
        var xhr;
        if (window.XMLHttpRequest) { //普通浏览器
            xhr = new XMLHttpRequest()
        } else {  //老版本ie
            xhr = ActiveXObject("Microsoft.XMLHTTP")
        }
        //2.监听网络变化
        xhr.onreadystatechange = function () {

            console.log(xhr.readyState); //状态码
            console.log(xhr.status); //响应码

            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    console.log(xhr.responseText); //成功后输出获取的信息
                } else {
                    console.log(xhr);  //失败后输出xhr对象
                }
            }

        }

        //3.打开一个请求地址(建立连接)
        // xhr.open(请求方式,请求地址,是否异步) //第三个参数为true为异步请求
        //请求地址如果和当前页面在同一服务器中，可写成相对地址
        // xhr.open('GET', './02.php', true)

        xhr.open('GET', 'http://127.0.0.1:5001/app/02.php', true)
        
        // 4.发送请求
        xhr.send()


    </script>

如果是发送POST请求：在调用send方法之前要先设置请求头：参数拼接之后放在当做send的参数