JSON
1、初识JSON
- JSON是什么
- JSON是Ajax发送和接收数据的一种格式
- JSON全称是Javascript Object Notation
- JSON数据一般放在一个.json的文件中,这个文件数据格式要遵循JSON语法
- 为什么需要JSON
- JSON有3种形式,每种形式和写法都和js中的数据类型很像,可以很轻松的和JS中的数据类型相互转换。
2、JSON的3种形式
- 简单值形式
- JSON的简单值形式就对应着JS中的基础数据类型:数字,字符串,布尔值、null
- JSON中没有undefined值
- JSON中的字符串必须使用双引号
- JSON中是不能注释的
- 对象形式
- JSON的对象形式就对应着JS中的对象
- JSON中对象的属性名必须用双引号,属性值如果是字符串也必须用双引号
- JSON中只要涉及到字符串,就必须使用双引号
- 不支持undefined
- 数组形式
- JSON的数组形式就对应着JS中的数组
- 数组中的字符串必须用双引号
- 注意事项
- JSON中没有undefined值
- JSON中的字符串必须使用双引号
- JSON中是不能有注释的
3、JSON的常用方法
- JSON.parse()
- JSON.parse()可以将JSON格式的字符串解析成JS的对应值。
- JSON.stringify()
- JSON.stringify()可以将js的基本数据类型,对象或者数组转换成json格式的字符串
- 使用JSON.parse()和JSON.stringify()封装localStorage
-
const set = (key, value) => { localStorage.setItem(key, JSON.stringify(value)); }; //得到localStorage const get = (key) => { return JSON.parse(localStorage.getItem(key)); }; //删除localStorage const remove = (key) => { localStorage.removeItem(key); }; //全部删除localStorage const clear = (key) => { localStorage.clear(key); };
-
前后端分离优势
-
早期的网页都是通过后端渲染来完成的:服务器端渲染(SSR,server side render);
- 客户端发出请求->服务端接收请求并返回相应HTML文档—>页面刷新,客户端加载新的HTML文档;
-
服务器端渲染的缺点
- 当用户点击页面中的某个按钮向服务器发送请求时,页面本质上只是一些数据发生了变化,而此时服务器却要将重绘整个页面再返回给浏览器加载,这显然有悖于程序员“DRY(Don't repeat yourself)”原则;
- 而且明明只是一些数据的变化却迫使服务器要返回整个HTML文档,这本身也会给网络带来不必要的开销
-
AJAX可以让页面数据变动时,只向服务器请求新的数据,并且在阻止页面刷新的情况下,动态的替换页面中展示的数据
- ajax是一种实现无页面刷新,获取服务器数据的技术。ajax最吸引人的就是它的异步特性
- 也就是说它可以在不重新刷新页面的情况下与服务器通信,交换数据,或更新页面。
-
ajax两大特性
- 在不重新加载页面的情况下发送请求给服务器;
- 接受并使用从服务器发来的数据
-
服务器渲染
-
- 前后端分离
-
HTTP
-
超文本传输协议(英语:HyperText Transfer Protocol,缩写:HTTP)是一种用于分布式、协作式和超媒体信息系统的应用层协议; HTTP是万维网的数据通信的基础,设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法;通过HTTP或者HTTPS协议请求的资源由统一资源标识符(Uniform Resource Identifiers,URI)来标识;
-
HTTP是一个客户端(用户)和服务端(网站)之间请求和响应的标准。
-
- 通过使用网页浏览器、网络爬虫或者其它的工具,客户端发起一个HTTP请求到服务器上指定端口(默认端口为80);
-
- 响应的服务器上存储着一些资源,比如HTML文件和图像。我们称这个响应服务器为源服务器(origin server);
-
网页中资源的获取
- 我们网页中的资源通常是被放在Web资源服务器中,由浏览器自动发送HTTP请求来获取、解析、展示的。
:
-
目前我们页面中很多数据是动态展示的
- 比如页面中的数据展示、搜索数据、表单验证等等,也是通过在JavaScript中发送HTTP请求获取的;
-
HTTP组成
- 一次HTTP请求主要包括:请求(Request)和响应(Response)
-
HTTP的请求方式
- 在RFC中定义了一组请求方式,来表示要对给定资源执行的操作:
-
- GET:GET 方法请求一个指定资源的表示形式,使用 GET 的请求应该只被用于获取数据。
-
- HEAD:HEAD 方法请求一个与 GET 请求的响应相同的响应,但没有响应体。
-
- POST:POST 方法用于将实体提交到指定的资源。
-
- PUT:PUT 方法用请求有效载荷(payload)替换目标资源的所有当前表示;
-
- DELETE:DELETE 方法删除指定的资源;
-
- PATCH:PATCH 方法用于对资源应部分修改;
-
- CONNECT:CONNECT 方法建立一个到目标资源标识的服务器的隧道,通常用在代理服务器,网页开发很少用到。
-
- TRACE:TRACE 方法沿着到目标资源的路径执行一个消息环回测试。
HTTP Request Header
-
在request对象的header中也包含很多有用的信息,客户端会默认传递过来一些信息:
-
content-type是这次请求携带的数据的类型:
-
- application/x-www-form-urlencoded:表示数据被编码成以 '&' 分隔的键 - 值对,同时以 '=' 分隔键和值
-
- application/json:表示是一个json类型;
-
- text/plain:表示是文本类型;
-
- application/xml:表示是xml类型;
-
- multipart/form-data:表示是上传文件;
-
content-length:文件的大小长度
-
keep-alive:
-
- http是基于TCP协议的,但是通常在进行一次请求和响应结束后会立刻中断;
-
- 在http1.0中,如果想要继续保持连接:
-
-
- 浏览器需要在请求头中添加 connection: keep-alive;
-
-
-
- 服务器需要在响应头中添加 connection:keey-alive;
-
-
-
- 当客户端再次放请求时,就会使用同一个连接,直接一方中断连接;
-
-
- 在http1.1中,所有连接默认是 connection: keep-alive的;
-
-
- 不同的Web服务器会有不同的保持 keep-alive的时间;
-
-
-
- Node中默认是5s中;
-
-
accept-encoding:告知服务器,客户端支持的文件压缩格式,比如js文件可以使用gzip编码,对应 .gz文件;
-
accept:告知服务器,客户端可接受文件的格式类型;
-
user-agent:客户端相关的信息;
ajax发送请求
-
ajax是异步的Javascript和xml
- 它可以使JSON,XML,HTML和text文本等格式发送和接收数据;
-
完成请求步骤
- 1、创建网络请求的AJAX对象(使用XMLHttpRequest)
- 2、监听XMLhttprequsest对象状态的变化,或者监听onload事件(请求完成时触发)
- 3、设置xhr的responseType=‘json’;
- 3、配置网络请求(通过open方法);
- 4、发送send网络请求;
XMLHttpRequest的state(状态)
-
事实上,我们在一次网路请求中看到状态发生了很多次变化,这是因为对于一次请求来说包括如下的状态:
- 0 UNSENT : 代理被创建,但尚未被调用 open()方法。
- 1 OPENED:open()方法已经被调用
- 2 HEADERS_RECEIVED :send()方法已经被调用,并且头部和状态已经可获得
- 3 LOADING:下载中;responseText属性已经包含部分数据
- 4 DONE:下载操作已完成
-
注意:这个状态并非的HTTP的相应状态,而是记录的XMLHttpRequest对象的状态变化。
- http响应状态通过status获取
-
XMLHttpRequest其他事件监听
- loadstart:请求开始。
- progress:一个响应数据包到达,此时整个response body都在respons中。
- abort:调用xhr.abort()取消了请求
- error:发生连接错误,例如,域错误。不会发生诸如404这类的http错误
- load:请求成功完成
- timeout:由于请求超时而取消了该请求(仅发生在设置了timeout的情况下)
- loadend:在load,error,timeout或abort之后触发。
响应数据和响应类型
-
发送请求后,我们需要获取对应的结果:response属性
- XMLHttpRequest response属性返回响应的正文内容;
- 返回的类型取决于responseType的属性设置;
-
通过responseType可以设置获取数据的类型
- 如果将responseType的值设置为空字符串,则会使用text作为默认值;
- 则把responseType=‘json’,既可以不用使用json.parse()转换了
-
和responseText、responseXML的区别:
- 早期通常服务器返回的数据是普通的文本和XML,所以我们通常会通过responseText、responseXML来获取响应结果;
- 之后将他们转化成javascript对象形式;
- 目前服务器基本返回的都是json数据,直接设置为json即可
HTTP响应的状态status
-
XMLHttpRequest的state是用来记录xhr对象本身的状态变化,并非针对于HTTP的网络请求状态。
-
如果我们希望获取HTTP响应的网络状态,可以通过status和statusText来获取:
get/post请求传递参数
-
在开发中,我们使用最多的是get和post请求,在发送请求的过程中,我们也可以传递给服务器数据
-
常见的传递给服务器数据的方式有如下几种:
- get请求query参数
- post请求x-www-form-urlencoded格式
- post请求formdata格式
- post请求json格式
认识fetch和fetchapi
-
Fatch可以看作是早期的XNLHttprequest的替代方案,他提供了一种更加现代的处理方案:
- 比如返回值是一个promise,提供了一种更加优雅的处理结果方式
- 不想xmlhttprequest一样,所有的操作都在一个对象上;
- fetch函数的使用:
- input:定义要获取的资源地址,可以是一个url字符串,也可以是一个request对象(实验性特性)类型;
- init:其他初始化参数
- method:请求使用的方法,如get、post;
- headers:请求头;
- body:请求的body信息
-
Fetch数据的响应(Response)
-
Fetch的数据响应主要分为两个阶段:阶段一:当服务器返回了响应(response)
-
- fetch 返回的 promise 就使用内建的 Response class 对象来对响应头进行解析;
-
- 在这个阶段,我们可以通过检查响应头,来检查 HTTP 状态以确定请求是否成功;
-
- 如果 fetch 无法建立一个 HTTP 请求,例如网络问题,亦或是请求的网址不存在,那么 promise 就会 reject;
-
- 异常的 HTTP 状态,例如 404 或 500,不会导致出现 error;
-
我们可以在 response 的属性中看到 HTTP 状态:
-
- status:HTTP 状态码,例如 200;
-
- ok:布尔值,如果 HTTP 状态码为 200-299,则为 true;
-
第二阶段,为了获取 response body,我们需要使用一个其他的方法调用。
-
- response.text() —— 读取 response,并以文本形式返回 response;
-
- response.json() —— 将 response 解析为 JSON;
-
基于Promise的使用方案:
-
基于async、await的使用方案:
-
Fetch POST请求
-
创建一个 POST 请求,或者其他方法的请求,我们需要使用 fetch 选项:
-
- method:HTTP 方法,例如 POST,
-
- body:request body,其中之一:
-
-
- 字符串(例如 JSON 编码的),
-
-
-
- FormData 对象,以 multipart/form-data 形式发送数据,
-