搜索热点


Chapter4-HTML中的同步和异步

何轩伟 2023-11-16 141 11/16
  • 课后拓展任务(参考代码在群内,仅供参考):

验证register.html中数据的准确性(具体步骤的实现):

4个框 需要4个boolean

通过设置为true不通过则设置为false

当单击提交按钮时 触发submit事件 需要校验4个事件是否都为true,如都为true则发送,否则需要阻止submit事件(默认行为)。

  • html 页面的同步与异步(ajax)

同步加载(刷新):每次刷新的是整个页面的数据

异步加载(刷新):每次刷新的是整个页面的部分数据

举例:淘宝网的小缩略图,当鼠标悬停在小图中,会在旁边跳出一个框框展现物品的大图。这样做的好处在于:局部数据的刷新不仅优化页面的性能,也优化数据请求的资源。

异步请求:

页面发送请求到服务器——>服务器响应到客户端——>响应到达客户端,可以通过特定的函数使局部动态变化。

Chapter4-HTML中的同步和异步

异步发送请求,服务器端收到请求,向客户端发送(不是一起发送)

1.响应状态码(如果正确发送200(200~299))

2.发送响应头(之后发送分隔线)


3.响应正文。

 

  • Fetch函数和Promise
Fetch 被称之为下一代 Ajax 技术,内部采用 Promise 方式来处理数据
可以直接.then即可
优点:
Chapter4-HTML中的同步和异步
在用法上,fetch()接受一个 URL 字符串作为参数,默认向该网址发出 GET 请求,返回一个 Promise 对象。它的基本用法如下。
fetch(url)

.then(...)

.catch(...)

全局的 fetch() 方法用于发起获取资源的请求。它返回一个 promise(期约)

promise有三个状态:

待定(pending): 初始状态,既不是成功,也不是失败。

已解决(fulfilled): 意味着操作成功完成。

已拒绝(rejected): 意味着操作失败。

Promimse的构造函数接受一个函数,这个函数的两个参数分别称作resolve方法和reject方法。当任务成功时,调用resolve()方法,并传回一个Response对象。失败时,调用reject()方法。调用resolve和reject时,传入的值,将作为输入参数,传递到then方法的resolve和reject中。
在Promise对象上可以调用then()方法,它也接受两个方法,一个是resolve,一个是reject。then()方法返回的还是一个Promise对象,因此支持链式调用。值得注意的是:then方法中上一个resolve方法的返回值,将成为下一个then方法中resolve的输入参数。由此构成了数据的流动。Response 对象根据服务器返回的不同类型的数据,提供了不同的读取方法。

Chapter4-HTML中的同步和异步

其中最常用的就是 res.json()

这方面知识比较复杂,课后有时间可以借助相关参考资料。

推荐书籍:

《JavaScript高级程序设计》

《JavaScript权威指南》

  • json

JSON是JavaScript Object Notation的简称,中文含义为“JavaScript 对象表示法”,它是一种数据交换的文本格式,而不是一种编程语言。

JSON 是一种轻量级的数据交换格式,它基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。

现在多用json来代替xml

Chapter4-HTML中的同步和异步

JSON键/值对由键和值组成,键必须是字符串,值可以是字符串(string)、数值(number) 、对象(object)、数组(array)、true、false、 null。

在定义JSON键/值时,先是键名(注意键名是要加引号的),后面写一个冒号,然后是值。如:

"username": "bob";

这就等价于这条 JavaScript 语句:

username = "bob";

参考链接:https://baijiahao.baidu.com/s?id=1721122100644576765

 

IDEA中关于JSON的插件:net.sf.json(依赖于Maven库)大家有时间可以自行下载

 

- THE END -
最后修改:2023年11月16日
0

非特殊说明,本博所有文章均为博主原创。