json|请求方式（异步/同步）|ajax

关注

原创 2022-01-27 17:51:36 1.5k 阅读 AI 写同款· GEO 优化 ›

什么是Ajax ,异步,同步,JSON,XMLHttpRequest对象,什么是JSON,使用JQuery实现Ajax ML什么是Ajax同步异步概念什么是Ajax Ajax即Asynchronous Javascript And XML（异步JavaScript和XML） 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这. 阅读详情

第1部分：json（数据交换格式）

1.1 json概述

Json:JavaScript Object Notation (JavaScript对象标记)
作用：一种标准的、轻量级、数据交换格式------法国人和中国人：交流用英语
Json是一种行业内的数据交换格式标准。

1.2 常用数据交换格式

交换场景：

系统A与系统B数据交换	C语言<----->java
java-----浏览器	支付成功：服务器返回信息，通过xml/json，浏览器能接收解析这个格式，信息展示到平台

常用数据交换格式

父：SGML（标准通用的标记语言）----构成:标签、属性
子1：HTML(主做页面展示)	子2：XML（主做数据存储和数据描述）	json
语法松散，随意：	（优）语法相当严格（缺）体积大，解析麻烦（很多标签）	（优）体积小，易解析

1.2 JS访问Json对象的属性（2种）

Json 在JS中以Json对象的形式存在。（JS中看到的json都是以json对象格式。对象.属性获取值）

1.2.1 Json对象

Json对象，无类型对象（不用定义类，直接创建对象，访问对象属性）

Var JsonObj = {
       “属性名” : “属性值”,
        “属性名” : “属性值”,
         。。。。。。
         “属性名” : “属性值”
};

属性值：可以为任意类型，包括json对象（大json的某属性值是小json）

1.2.1 JS访问Json对象的属性（2种）

jsonObj.属性名
jsonObj[“属性名”]

第2部分：ajax（一种前后端交互|异步|传递数据方法：用js模仿浏览器请求）

在这里插入图片描述

2.1 Ajax宏观

Ajax（Asynchronous JavaScript and XML:异步的JavaScript和XML）

2.1.1 Ajax前端技术

前端技术：在浏览器中执行的程序。Html、css、js等
后端技术：在服务器中执行的程序，使用java语言开发的后端程序。Servlet、jsp、jdbc、tomacat等

2.1.2 Ajax构成

Ajax	是一种方法（无需重载整个网页，只更新部分页面内容
	是各种技术的综合应用
	不是编程语言
综合使用以下技术	Javascript: 创建异步对象，调用它的属性、方法。异步对象负责（网络操作）：发请求-传参-接收服务器结果数据。
	dom：处理dom对象，更新servlet数据
	css:处理视图，更新、美化
	服务器端技术：Servlet: jsp , jdbc等
	数据格式：json.之前xml
完成（实现）的功能	局部刷新
	没有页面转发/跳转（更新）操作，只在页面内操作数据（ajax:拿到服务器端数据，更新页面dom对象）
	Ajax请求与后台拿哪种接参数的方式互不相干

2.2 Ajax微观

2.2.1 请求方式区别

异步（高效请求处理方式）	同步
不需要等服务器反馈，继续下个请求，有反馈再处理反馈	需要等待服务器反馈，之后再进行下一个
微信聊天约饭（海王）	电话约饭（舔狗）

2.2.1 Ajax的核心：JavaScript和XML（现在json）

异步对象 XMLHttpRequest （json未出现，用xml）代替浏览器发起请求并接收数据，只能通过JavaScript操作（新建、调属性/方法）异步对象
Json 数据交换格式：与服务器端交换数据

（１）异步对象介绍

在这里插入图片描述

异步对象 XMLHttpRequest : 浏览器内存中的一种javascript对象
用js语法创建：var xhr = new
XMLHttpRequest();
属性

readyState:请求状态	0：新建异步对象 new XMLHttpRequest()
	1:初始化请求参数 xhr.open()
	2:发送请求 xhr.send()
	3:异步对象接收到服务器数据（服务器端没返回数据，没有状态3）
	4：接收数据并在异步对象内部处理完成（更新dom）
Status:网络状态（与http状态码对应）	200：请求成功
–	404：服务器资源未找到
–	500：服务器内部代码有错
ResponseText属性：服务器端返回的数据	Var data =xhr. responseText;

（２）异步对象使用步骤

创建异步对象

var xhr = new  XMLHttpRequest();

给异步对象绑定事件（函数）
事件名 onreadystatechange(请求状态每次改变就发生) ----根据readyState、 Status值做相应请求处理：最重要是完成请求处理，所以只写请求状态4且网络状态200执行语句

xhr. Onreadystatechange = function(){
if（xhr. readyState==4 && xhr. Status==200 ）{
//从服务器获取数据
Var data = xhr. responseText;
//更新dom对象(例：mydiv)。
document.getElementById(“#mydiv”).innertHTML = data;
}
}

３. 初始化请求参数

　　Open(请求方式，服务端访问地址，异步或同步（异步ture）)
xhr.open（“get“,”loginServlet”,true）;

４. 发送请求

xhr.send()

2.3 Ajax & 刷新（全局、局部）区别

全局刷新	局部刷新	ajax
整个页面重新加载所有（地址栏改变）	页面不动，局部重新加载所有（地址栏不变）	只改变数据

刷新：页面一个地方重新加载（渲染、数据等）（大：全局，小：局部）
通过Javascript变动页面，都是不刷新。ajax不是刷新。

	全局刷新	局部刷新
定义	使用form(表单)、href(超链接)发起的请求
表现	跳转到新视图（地址栏改变）新数据添加、解析渲染新页面	从服务器获取只是关键数据（不用渲染页面）更新该页面某些dom对象只对刷新部分视图
特点	每次从服务器获取新页面的全部数据，传输数据量较大。占用网络带宽	数据量小，网络传输速度快
	浏览器需要重新渲染整个页面	只更新部分页面，浏览器不用全部渲染视图
	用户体验不好	同一个页面，可多个局部刷新
–	整个浏览器发起请求并响应数据（同一时刻只能做一个请求）	代替浏览器（异步对象发起请求并响应数据（同一个页面，可多个局部刷新。异步对象彼此不影响）

前端/浏览器请求后端数据的方式就一种：在浏览器输入地址

2.3 Ajax 版本（js、vue）

jquery版本ajax：自定义异步同步
vue版本ajax（axios）：只异步

axios实现了对ajax的封装。 axios是ajax， ajax不止axios。为前端MVVM框架而生 (vue react)

【jquery版本】
               $.ajax({
						url: 'http://127.0.0.1:8081/ums-user/page',
						type: 'get',
						async: false,
						dataType: 'json',
						success: function(response) {
							 console.log(response)
						}
					})

【axios版本：异步】
			this.$axios.request({
				url: 'http://127.0.0.1:8081/ums-user/page',
				method: 'get',
			}).then(function(response){
				console.log(response)
			})