首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >ajax和axios请求本地json数据对比

ajax和axios请求本地json数据对比

作者头像
王小婷
发布于 2025-05-18 06:28:44
发布于 2025-05-18 06:28:44
11800
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行

AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

ajax请求本地json
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
test.json
{
    "first":[
        {"name":"王小婷","nick":"祈澈菇凉"},
        {"name":"安安","nick":"坏兔子"},
        {"name":"编程微刊","nick":"简书"}
        
    ]
}

代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
    </body>
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script>
        $.ajax({
            url: "ceshi.json", //json文件位置
            type: "GET", //请求方式为get
            dataType: "json", //返回数据格式为json
            success: function(data) { //请求成功完成后要执行的方法 
                //each循环 使用$.each方法遍历返回的数据date
                $.each(data.first, function(i, item) {
                    var str = '<div>姓名:' + item.name + '昵称:' + item.nick + '</div>';
                    document.write(str);
                })
            }
        })
    </script>

</html>

效果如下:

图片.png

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
1. 从浏览器制作XMLHttpRequests
2.HTTP从node.js的请求
3. 支持Promise API
4. 拦截请求和响应
5. 转换请求和响应数据
6. 取消请求
7. 自动转换为JSON数据
8. 客户端支持防止XSRF
axios请求本地json
相关依赖

安装

1:npm安装

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   npm install axios --save

2.在main.js下引用axios

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  import axios from 'axios'

一切环境依赖搭建好之后

下面来写个例子:axios请求本地json 1:在static文件夹底下新建json文件,( 本地JSON文件一定要需放在static文件夹之下。) 访问服务器文件,应该把 json文件放在最外层的static文件夹,这个文件夹是vue-cli内置服务器向外暴露的静态文件夹

2:test.json数据格式如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    "first":[
        {"name":"王小婷","nick":"祈澈菇凉"},
        {"name":"安安","nick":"坏兔子"},
        {"name":"编程微刊","nick":"简书"}
        
    ]
}

3:写一个axios

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
getData() {

                axios.get('../../static/test.json').then(response => {
                    
                    console.log(response.data);

                }, response => {
                    console.log("error");
                });
            }

4:整体代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
    <div id="app">

    </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "app",
        data() {
            return {
                itemList: []
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {

                axios.get('../../static/test.json').then(response => {
                    
                    console.log(response.data);

                }, response => {
                    console.log("error");
                });
            }
        }
    }
</script>

5:前台显示:

区别总结

axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样。 简单来说: ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装。

axios是ajax ajax不止axios

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-09-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
用Kotlin的方式来处理网络异常
之前的文章 RxJava处理业务异常的几种方式 曾经介绍过 Retrofit 的异常可以有多种处理方式。
fengzhizi715
2018/08/24
5790
用Kotlin的方式来处理网络异常
【译】对RxJava中-repeatWhen()和-retryWhen()操作符的思考
第一次见到.repeatWhen()和.retryWhen()这两个操作符的时候就非常困惑了。不得不说,它们绝对是“最令人困惑弹珠图”的有力角逐者。
用户1740424
2018/07/23
2.2K0
【译】对RxJava中-repeatWhen()和-retryWhen()操作符的思考
RxJava之异常捕获操作符介绍
RxJava 之 异常捕获操作符 官方介绍 :Error Handling Operators
103style
2022/12/19
6990
RxJava的Single、Completable以及Maybe
通常情况下,如果我们想要使用 RxJava 首先会想到的是使用Observable,如果要考虑到Backpressure的情况,在 RxJava2.x 时代我们会使用Flowable。除了Observable和Flowable之外,在 RxJava2.x 中还有三种类型的Observables:Single、Completable、Maybe。
fengzhizi715
2018/08/24
2.6K0
RxJava的Single、Completable以及Maybe
Reactor详解之:异常处理
不管是在响应式编程还是普通的程序设计中,异常处理都是一个非常重要的方面。今天将会给大家介绍Reactor中异常的处理流程。
程序那些事
2020/11/17
2.2K0
RxJava 创建操作符
内部触发对 Observer 的 onNext 方法的调用,just 中传递的参数将直接在 onNext 方法中接收到,参数的类型要和 Observer 的泛型保持一致。
三流之路
2018/09/11
1K0
Android RxJava+Retrofit完美封装(缓存,请求,生命周期管理)
Retrofit 和RxJava已经出来很久了,很多前辈写了很多不错的文章,在此不得不感谢这些前辈无私奉献的开源精神,能让我们站在巨人的肩膀上望得更远。对于 RxJava 不是很了解的同学推荐你们看扔物线大神的这篇文章给 Android 开发者的 RxJava 详解一遍看不懂就看第二遍。Retrofit的使用可以 加QQ群:668041364
java爱好者
2019/06/28
3.6K0
鸿蒙 MVP+ Rxjava+Retrofit+okhttp 实现教程【鸿蒙专题7】
大家好。我是坚果,这是我的公众号“坚果前端”,觉得不错的话,关注一下吧,如果你迷惘,不妨看看码农的轨迹
徐建国
2021/12/24
8920
鸿蒙  MVP+ Rxjava+Retrofit+okhttp 实现教程【鸿蒙专题7】
大佬们,一波RxJava 3.0来袭,请做好准备~
每个Android开发者,都是爱RxJava的,简洁线程切换和多网络请求合并,再配合Retrofit,简直是APP开发的福音。不知不觉,RxJava一路走来,已经更新到第三大版本了。不像RxJava 2对RxJava 1那么残忍,RxJava 3对RxJava 2的兼容性还是挺好的,目前并没有做出很大的更改。RxJava2到2020年12月31号不再提供支持,错误时同时在2.x和3.x修复,但新功能只会在3.x上添加。
Rouse
2019/07/17
2K0
大佬们,一波RxJava 3.0来袭,请做好准备~
Android RxJava的使用
首语 最近因为项目上线,挤不出时间,已经好久没有更新博客了😛,目前项目也做差不多了,写几篇总结类型的博客,梳理一下。 本文主要对RxJava及常用操作符的使用进行总结,同时对RxJava在Android中几种常见的使用场景进行举例。 简介 RxJava是Reactive Extensions的Java VM实现:该库用于通过使用可观察的序列来组成异步和基于事件的程序。 Rx是Reactive Extensions的缩写的简写,它是一个使用可观察数据流进行异步编程的编程接口,Rx结合了观察者模式、迭代器模
八归少年
2022/06/29
3.1K0
Android RxJava的使用
Rx Java 异步编程框架
在很多软件编程任务中,或多或少你都会期望你写的代码能按照编写的顺序,一次一个的顺序执行和完成。但是在ReactiveX中,很多指令可能是并行执行的,之后他们的执行结果才会被观察者捕获,顺序是不确定的。为达到这个目的,你定义一种获取和变换数据的机制,而不是调用一个方法。在这种机制下,存在一个可观察对象(Observable),观察者(Observer)订阅(Subscribe)它,当数据就绪时,之前定义的机制就会分发数据给一直处于等待状态的观察者哨兵。
架构探险之道
2023/03/04
3.3K0
Rx Java 异步编程框架
All RxJava - 为Retrofit添加重试
在我们的日常开发中离不开I/O操作,尤其是网络请求,但并不是所有的请求都是可信赖的,因此我们必须为APP添加请求重试功能。
小鄧子
2018/08/20
1.8K0
All RxJava - 为Retrofit添加重试
Android MVP+RxJava+Retrofit (3) MVP+RxJava+Retrofit
前面说了RxJava 与Retrofit的基本用法,但是没用做优化的处理.本篇先做一个优化处理,然后再结合前面的MVP 设计模式,把这些知识贯穿到一个Demo 之中,方便大家理解.
全栈程序员站长
2021/04/07
1.3K0
Android MVP+RxJava+Retrofit (3) MVP+RxJava+Retrofit
【建议收藏】Android实现Rxjava2+Retrofit完美封装
去年的时候学习了Rxjava和Retrofit的基本用法,但一直没有在实际项目中运用。今年开做新项目,果断在新项目中引入了RxJava和Retrofit。本篇文章将介绍笔者在项目中对Retrofit的封装。 先来看一下封装过后的Retrofit如何使用。
分你一些日落
2021/11/30
2.3K1
RxJava 2.0还没熟悉,RxJava 3.0说来就来了!(多种操作符代码详解篇)
在上篇文章中讲的是关于Rxjava的基础篇,今天来讲讲多种操作符的具体内容,操作符太多了,大家准备好啊,耐心看~
Android技术干货分享
2019/07/19
2.3K0
RxJava 2.0还没熟悉,RxJava 3.0说来就来了!(多种操作符代码详解篇)
聊聊HttpClient的重试机制
org/apache/http/client/HttpRequestRetryHandler.java
code4it
2023/10/12
9150
RxJava1 升级到 RxJava2 所踩过的坑
RxJava2 发布已经有一段时间了,是对 RxJava 的一次重大的升级,由于我的一个库cv4j使用了 RxJava2 来尝鲜,但是 RxJava2 跟 RxJava1 是不能同时存在于一个项目中的,逼不得已我得把自己所有框架中使用 RxJava 的地方以及 App 中使用 RxJava 的地方都升级到最新版本。所以我整理并记录了一些已经填好的坑。
fengzhizi715
2018/08/24
1.5K0
RxJava1 升级到 RxJava2 所踩过的坑
Android:RxJava 结合 Retrofit 全面实现 网络请求出错重连
前言 Rxjava,由于其基于事件流的链式调用、逻辑简洁 & 使用简单的特点,深受各大 Android开发者的欢迎。 如果还不了解RxJava,请看文章:Android:这是一篇 清晰 & 易懂的R
Carson.Ho
2019/02/22
1.9K0
Android RxJava应用:网络请求出错重连(结合Retrofit)
Rxjava,由于其基于事件流的链式调用、逻辑简洁 & 使用简单的特点,深受各大 Android开发者的欢迎。
Carson.Ho
2022/03/25
1.6K0
Android RxJava应用:网络请求出错重连(结合Retrofit)
Android OkHttp+Retrofit+RxJava搭建网络访问框架
  在实际开发APP中,网络访问是必不可少的,最开始访问网络是使用HttpURLConnection、而后面有了一些框架比如Volley、OkHttp、Retrofit等。那么你可能看到最多的是OkHttp,因为它很出名,Google也推荐你使用此框架进行网络访问。你可能会说Retrofit,Retrofit其实就是对OkHttp的二次封装。还有RxJava,这个又是用来干嘛的呢?为什么要将三者组合起来,组合有什么优势吗?带着这些问题看下去。
晨曦_LLW
2021/01/14
1.5K2
Android  OkHttp+Retrofit+RxJava搭建网络访问框架
推荐阅读
相关推荐
用Kotlin的方式来处理网络异常
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档