【Java Web】JSON、AJIAX、AXIOS

最新推荐文章于 2023-07-17 18:15:55 发布

李鲤驴。

最新推荐文章于 2023-07-17 18:15:55 发布

阅读量288

点赞数 1

分类专栏： JavaWeb 文章标签： json ajax javascript

本文链接：https://blog.csdn.net/weixin_43647307/article/details/118710267

版权

JavaWeb 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JSON

什么是 JSON

JSON = JavaScript Object Notation (JavaScript 对象表示法) ，是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。

它基于 JavaScript Programming Language，Standard ECMA-262 3rd Edition - December 1999 (js规范) 的一个子集。 JSON 采用完全独立于编程语言的文本格式来存储和表示数据，但是也使用了类似于 C 语言家族的习惯（包括 C, C++, C#, Java,JavaScript, Perl, Python 等）。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。是xml的终结者，成为主流开发方式（ajax异步请求，json返回）。

作用

JSON 是存储和交换文本信息的语法。当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。

JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。

JSON 对象定义和基本使用

在标准的 json 格式中，json 对象由在括号括起来，对象中的属性也就是 json 的 key 是一个字符串，所以一定要使用双引号引起来。每组 key 之间使用逗号进行分隔。

json和js对象的区别

json字符串: { "id":"100","name":"tony","salary":"30000" }
js对象：{ "id":100,"name":"tony","salary":30000 }

可以看出js对象中value值如果是整数，小数，无需加双引号

含义不同，json是一种数据格式，js表示类的实例。
传输：json用于跨平台、跨网络传输，速度快；js不能传输。
展现：json键值对方式，值是字符串不能是对象方法函数；js值不一定加双引号，值可以是对象、函数、字符串等。
转换：JSON.parse(jsonStr) JSON已经作为浏览器内置对象，eval(json)；JSON.stringify(obj)。

AJAX

Google Suggest

在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。

Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

什么是 AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是一种创建交互式网页应用的网页开发技术，用于创建快速动态网页。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。而使用Ajax 通过 js 异步发起请求，在后台与服务器进行少量数据交换，使网页实现异步更新。局部更新页面更新，不会舍弃原来页面的内容，浏览器地址栏不会发生变化。

浏览器与服务器之间，采用 HTTP 协议通信。用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出 HTTP 请求。

在这里插入图片描述

同步与异步的区别

Java中交互方式分为同步和异步两种：
同步交互：指发送一个请求，需要等待返回，然后才能够发送下一个请求，有个等待过程；
异步交互：指发送一个请求，不需要等待返回，随时可以再发送下一个请求，即不需要等待。
区别：一个需要等待，一个不需要等待，在部分情况下，我们的项目开发中都会优先选择不需婴等待的异步交互方式。

哪些情况建议使用同步交互呢?比如银行的转账系统，对数据库的保存操作等等，都会使用同文步交互操作，其余情况都优先使用异步交互。

同步

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

异步

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

同步，是所有的操作都做完，才返回给用户结果。即写完数据库之后，再响应用户，用户体验不好。
异步，不用等所有操作都做完，就相应用户请求。即先响应用户请求，然后慢慢去写数据库，用户体验较好。

异步操作例子

为了避免短时间大量的数据库操作，就使用缓存机制，也就是消息队列。先将数据放入消息队列，然后再慢慢写入数据库。

引入消息队列机制，虽然可以保证用户请求的快速响应，但是并没有使得我数据迁移的时间变短（即80万条数据写入mysql需要1个小时，用了redis之后，还是需要1个小时，只是保证用户的请求的快速响应。用户输入完http url请求之后，就可以把浏览器关闭了，干别的去了。如果不用redis，浏览器不能关闭）。

前端使用Ajax与后端通信

JavaScript 脚本发起 HTTP 通信，就叫做 AJAX 通信

AJAX 包括以下几个步骤。

创建 XMLHttpRequest 实例
发出 HTTP 请求
接收服务器传回的数据
更新网页数据

AJAX 通过原生的XMLHttpRequest对象发出 HTTP 请求，得到服务器返回的数据后，再进行处理。

XMLHttpRequest对象是 AJAX 的主要接口，用于浏览器与服务器之间的通信。尽管名字里面有XML和Http，它实际上可以使用多种协议（比如file或ftp），发送任何格式的数据（包括字符串和二进制）。

AJAX 的优点

1、不需任何浏览器插件
不需任何浏览器插件，就可以被大多数浏览器所支持，用户只需要允许JavaScript在浏览器上执行即可。

2、优秀的用户体验。
最大的优点，能在不刷新整个页面的前提下更新数据，这使得Web应用程序能迅速回应用户的操作。

3、提高Web程序的性能
与传统模式相比，Ajax模式在性能上最大区别就是在于传输数据的方式，在传统模式中，数据提交是通过表单（from）来实现的，而数据获取的是靠全面刷新网页来说获取整页的内容，Ajax的模式只是通过XMLHttpRequest对象来向服务器端提交需要提交的数据，即按需发送。。
4、减轻服务器和宽带的负担
Ajax的工作的原理相当于在用户和服务器之间加了一个中间层，是用户操作与服务器响应异步化，不需要打断用户的操作，具有更加迅速的响应能力。他在客户端创建Ajax引擎，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，把传统方式下的一些服务器负担的工作转移到客户端，便于客户端资源来处理，减轻服务器和宽带的负担。

AJAX的缺点

1、浏览器对XMLHttpRequest对象的支持度不足
Ajax的不足之一首先来自于浏览器，IE5.0及以后的版本才支持XMLHttpRequest对象（现阶段大部分客户端都在IE6以上），Mozilla，Netscape等浏览器支持XMLHttpRequest则更在其后，为了使得Ajax应用能在各个浏览器中正常运行，程序员必须花费大量的精力编码以兼顾各个浏览器之间的差别，来让Aajx应用能更好的兼容各个浏览器。

2、破坏浏览器前进、后退按钮的正常功能
在Ajax中，前进和后退按钮的功能都会失效，虽然可以通过一定的方法（添加锚点）来使用户可以使用前进和后退按钮，但相对于传统的方式却麻烦了很多，对于用户而言，他们经常会碰到这种状况，当点击一个按钮触发一个Ajax交互后又觉得不想这样做，接着就去习惯性的单击后退按钮，结果发生了最不愿意看到的结果，浏览器后退到先前的一个页面，通过Ajax交互得到的内容完全消失了。

3、对搜索引擎的支持不足
通常搜索引擎都是通过爬虫来对互联网上的数以亿计的海量数据进行搜索整理的，然而爬虫程序现在还不能理解那些奇怪的JavaScript代码和因此引起的页面内容的变化，这使得应用Ajax的站点在网络推广上相对于传统站点处于劣势。

4、开发和调试工具的缺乏
JavaScript是Ajax的重要组成部分，在目前，由于缺少很好的JavaScript开发和调试工具，使很多Web开发者对于JavaScript望而生畏，这对于编写Ajax代码就更加苦难了，勇士，目前许多Web开发者已经习惯使用可视化的工具，对于亲自编写代码有畏惧感，着她在一定程度上影响了大家对Ajax的应用。

jQuery 中的 AJAX 请求

在jQuery中
$ .Ajax()方法属于最底层的方法
第2层是load()，$ .get()，和$ . post()，
第3层是$ .getScript()和$. getJSON()方法。

AJAX方法参数属性

1、url:
要求为String类型的参数，（默认为当前页地址）发送请求的地址。

2、 type:
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

3、timeout:
要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。

4、async:
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

5、cache:
要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。

6、 data:
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。
get请求中将附加在url后。防止这种自动转换，可以查看processData选项。
对象必须为key/value格式。
例如{foo1:“bar1”,foo2:“bar2”}转换为&foo1=bar1&foo2=bar2。
如果是数组，JQuery将自动为不同值对应同一个名称。
例如{foo:[“bar1”,“bar2”]}转换为&foo=bar1&foo=bar2。

7、dataType:
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：

xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。

8、beforeSend：
要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。

//XMLHttpRequest对象是惟一的参数。
function(XMLHttpRequest){
   this;   //调用本次ajax请求时传递的options参数
}

9、complete：
要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。

  function(XMLHttpRequest, textStatus){
     this;    //调用本次ajax请求时传递的options参数
  }

10、success：
要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1) 由服务器返回，并根据dataType参数进行处理后的数据。
(2) 描述状态的字符串。

 function(data, textStatus){
    //data可能是xmlDoc、jsonObj、html、text等等
    this;  //调用本次ajax请求时传递的options参数
 }

11、error:
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：

   function(XMLHttpRequest, textStatus, errorThrown){
      //通常情况下textStatus和errorThrown只有其中一个包含信息
      this;   //调用本次ajax请求时传递的options参数
   }

12、contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

13、dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。

   function(data, type){
        //返回处理后的数据
        return data;
    }

14、dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。

function(data, type){
    //返回处理后的数据
    return data;
}

15、global：
要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。

16、ifModified：
要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。

17、jsonp：
要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:‘onJsonPLoad’}会导致将"onJsonPLoad=?"传给服务器。

18、username：
要求为String类型的参数，用于响应HTTP访问认证请求的用户名。

19、password：
要求为String类型的参数，用于响应HTTP访问认证请求的密码。

20、processData：
要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

21、scriptCharset：
要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

$.ajax({
	type:  //表示要使用的请求方式 GET 或 POST 请求
	url:  //表示要使用的请求路径 
	contentType: //表示要传递的数据类型
	data:  //表示发送给服务器的数据
	//data格式有两种：
	//一：name=value&name=value
	//二：{key:value}
	dataType:  //表示响应的数据类型
	//常用的数据类型有：
	//text 表示纯文本
	//xml 表示 xml 数据
	//json 表示 json 对象
	success: function(data){ //成功时的方案 
		
	},
	error: function(data){ //失败时的方案
		
	}
})

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.8.3.min.js"></script>
	<script>
		$(function(){//文档就绪事件
			$.ajax({ //发起Ajax请求数据
				type: "POST",
				url: "http://p.3.cn/prices/mgets",
				async : false, //默认为true 异步
				contentType: "application/json;charset=utf-8",
				data: {		//拼接的参数
					"skuIds": "J_100003717483"
				},
				dataType: "jsonp",
				
				success: function(data) {	//返回的结果
//[{"cbf":"0","id":"J_100003717483","m":"10000.00","op":"2499.00","p":"2099.00"}]
					$('#p1').text("返回数据：" + JSON.stringify(data));
					$('#p2').text("商品编号：" + data[0].id);
					$('#p3').text("商品价格： " + data[0].op);
				},
				error: function(data) {
					alert("提交失败" + JSON.stringify(data));
				}
			});
		});

	</script>
</head>
<body>
	<p id="p1">这是p1</p>
	<p id="p2">这是p2</p>
	<p id="p3">这是p3</p>
</body>
</html>

细谈 axios和ajax区别

刚刚接触axios有好多疑惑。它和ajax有什么关系呢和区别呢？接下来一起看下：

区别

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。

简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。

axios是ajax ajax不止axios。

下面列出代码来对比一下：

axios：


axios({
            url: '/getUsers',
            method: 'get',
            responseType: 'json', // 默认的
            data: {
                //'a': 1,
                //'b': 2,
            }
        }).then(function (response) {
            console.log(response);
            console.log(response.data);
        }).catch(function (error) {
            console.log(error);
            }）

ajax：

$.ajax({
            url: '/getUsers',
            type: 'get',
            dataType: 'json',
            data: {
                //'a': 1,
                //'b': 2,
            },
            success: function (response) {
                console.log(response)；
            }
        })

优缺点

ajax：

本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务

axios：

从 node.js 创建 http 请求
支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口（重要，方便了很多的操作）

李鲤驴。

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
【Java Web】JSON、AJIAX、AXIOS

JSON什么是 JSON JSON = JavaScript Object Notation (JavaScript 对象表示法) ，是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于 JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999 (js规范) 的一个子集。 JSON 采用完全独立于编程语言的文本格式来存储和表示数据，但是也使用了类似于 C 语言家族的习惯（包
复制链接

扫一扫