在最近的两篇文章中,我们从概念和流程上梳理了: 一个终端设备如何把一个固件,安全无误的从服务器上,下载到本地。这篇文章就继续往下深入,以一个实际的 ESP32 项目,来完整的梳理一下 OTA 升级的全过程。主要包括下面 3 部分内容:AWS 平台上,部署一个 OTA 升级任务时,需要完成哪些步骤;ESP32 模组中,关于 Flash 分区和 OTA 升级控制过程和代码说明;如何通过 ESP32,给与之相连的 MCU 进行 OTA 升级;PS: 在下面的内容中,终端设备指的就是 ESP32 模组。ESP32 Flash 分区其实 ESP32 的官方文档的过程描述,已经是非常的详细了。不仅把每一个...... Last article READ

全面解析Ajax实现步骤和原理

传统开发的缺点,是对于浏览器的页面,全部都是全局刷新的体验。如果我们只是想取得或是更新页面中的部分信息那么就必须要应用到局部刷新的技术。

局部刷新也是有效提升用户体验的一种非常重要的方式。

Ajax技术是基于js语言的扩展,能够通过将请求发送给后台,并从后台取得相关数据,然后将数据在页面做局部刷新的重要技术。

本教程会通过对ajax的传统使用方式,结合json操作的方式,结合跨域等高级技术的方式,对ajax做一个全面的讲解。

什么是Ajax?

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和XML)。

AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分页面内容的新方法

AJAX 不是新的编程语言,而是使用现有技术混合使用的一种新方法。ajax 中使用的技术有JavaScript, html , dom , xml ,css 等。主要是JavaScript , XML.

JavaScript: 使用脚本对象XMLHttpRequest 发送请求, 接收响应数据XML: 发送和接收的数据格式,现在使用json

AJAX 不单需要前端的技术,同时需要后端(服务器)的配合。服务器需要提供数据,数据是AJAX 请求的响应结果。

全局刷新和局部刷新

B/S 结构项目中, 浏览器(Browse)负责把用户的请求和参数通过网络发送给服务器(Server),服务端使用 Servlet(多种服务端技术的一种)接收请求,并将处理结果返回给浏览器。

浏览器在html,jsp 上呈现数据,混合使用css, js 帮助美化页面,或响应事件。

全局刷新

登录请求处理:

index.jsp 发起登录请求--------LoginServlet result.jsp

发起请求request 阶段:

浏览器现在内存中是index 页面的内容和数据 :

服务器端应答结果阶段:

sevlet 返回后把数据全部覆盖掉原来index 页面内容, result.jsp 覆盖了全部的浏览器内存数据。 整个浏览器数据全部被刷新。重新在浏览器窗口显示数据,样式,标签等

全局刷新原理:

1) 必须由浏览器亲自向服务端发送请求协议包。

2) 这个行为导致服务端直接将【响应包】发送到浏览器内存中

3) 这个行为导致浏览器内存中原有内容被覆盖掉

4) 这个行为导致浏览器在展示数据时候,只有响应数据可以展示

局部刷新

浏览器在展示数据时,此时在窗口既可以看到本次的响应数据, 同时又可以看到浏览器内存中原有数据

局部刷新原理:

1) 不能由浏览器发送请求给服务端

2) 浏览器委托浏览器内存中一个脚本对象代替浏览器发送请求.

3) 这个行为导致导致服务端直接将【响应包】发送脚本对象内存中

4) 这个行为导致脚本对象内容被覆盖掉,但是此时浏览器内存中绝大部分内容没有收到任何影响

5) 这个行为导致浏览器在展示数据时候,同时展示原有数据和响应数据

AJAX 实现局部刷新的一种技术。

异步请求对象:

在局部刷新,需要创建一个对象,代替浏览器发起请求的行为,这个对象存在内存中。

代替浏览器发起请求并接收响应数据。这个对象叫做异步请求对象。

全局刷新是同步行为, 局部刷新是异步行为[浏览器数据没有全部更新] 这个异步对象用于在后台与服务器交换数据。XMLHttpRequest 就是我们说的异步对象。

XMLHttpRequest 对象能够:

在不重新加载页面的情况下更新网页

在页面已加载后向服务器请求数据

在页面已加载后从服务器接收数据

所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。通过一行简单的 JavaScript 代码,我们就可以创建 XMLHttpRequest 对象

创建 XMLHttpRequest 对象的语法(xhr): var xmlhttp=new XMLHttpRequest();

AJAX 中的核心对象就是XMLHttpRequest

AJAX 异步实现步骤

XMLHttpRequest 对象介绍

(1) 创建对象方式

var xmlHttp = new XMLHttpRequest();

(2) onreadstatechange 事件

当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当readyState 改变时,就会触发 onreadystatechange 事件。此事件可以指定一个处理函数function。

通过判断XMLHttpReqeust 对象的状态,获取服务端返回的数据。

语法:

xmlHttp.onreadystatechange= function() {

if( xmlHttp.readyState == 4 && xmlHttp.status == 200){

处理服务器返回数据

下面是 XMLHttpRequest 对象的三个重要的属性:

属性说明:

onreadystatechange 属性:一个 js 函数名 或 直接定义函数,每当readyState 属性改变时,就会调用该函数

readyState 属性:

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

? 0: 请求未初始化,创建异步请求对象 var xmlHttp = new XMLHttpRequest()

? 1: 初始化异步请求对象, xmlHttp.open(请求方式,请求地址,true)

? 2: 异步对象发送请求, xmlHttp.send()

? 3: 异步对象接收应答数据 从服务端返回数据。XMLHttpRequest 内部处理。

? 4: 异步请求对象已经将数据解析完毕。 此时才可以读取数据。

华为正式发布了鸿蒙系统,不过它的生态尚未足够完善,其他国产手机企业仅有魅族表示了支持,如此情况下柏铭科技认为鸿蒙最大的机会并非手机市场,而是已有超过10亿用户的物联网,这可能才是鸿蒙的最大机会。华为虽然强调它的HMS服务已拥有超过10万APP,然而这与安卓百万计算的APP相比依然是相对匮乏许多的,这次发布会在公布合作伙伴的时候微信并未位列其中,这对于它在国内手机市场的发展尤为不利,微信已是消费者的刚需,生态不完善吸引手机用户难度非常大。目前仅有魅族表示支持鸿蒙系统,其他国产手机品牌均沉默或否认采用鸿蒙系统,仅靠华为手机和魅族支持鸿蒙系统并不现实,一季度华为手机在国内市场的销量只有1490万,魅......Next article READ