20201116+袁鑫
学习日志
知识总结
AJAX&JSON
AJAX
异步的 JavaScript 和 XML(ASynchronous JavaScript And XML),是指一种创建交互式网页应用的网 页开发技术。Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集)。通过在后台与服务器进行 少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页 的某部分进行更新。传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。
总结来说:ajax可以实现异步提交和局部刷新的技术
AJAX的应用场景
- 检查用户名是否已经被注册
很多站点的注册页面都具备自动检测用户名是否存在的友好提示,该功能整体页面并没有刷新,但仍然 可以异步与服务器端进行数据交换,查询用户的输入的用户名是否在数据库中已经存在。 - 省市二联下拉框联动
很多站点都存在输入用户地址的操作,在完成地址输入时,用户所在的省份是下拉框,当选择不同的省 份时会出现不同的市区的选择,这就是最常见的省市联动效果。 - 内容自动补全
不管是专注于搜索的百度,还是站点内商品搜索的京东,都有搜索功能,在搜索框输入查询关键字时, 整个页面没有刷新,但会根据关键字显示相关查询字条,这个过程是异步的。 - 地图
同步方式与异步方式的区别
同步方式发送请求
发送一个请求,需要等待响应返回,然后才能够发送下一个请求,如果该请求没有响应,不能发送下一 个请求,客户端会处于一直等待过程中。
异步方式发送请求
发送一个请求,不需要等待响应返回,随时可以再发送下一个请求,即不需要等待
同步和异步:客户端和服务器端通信的基础上
同步:客户端发送请求后,必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
异步:客户端发送请求后,不需要等待服务器端的响应。在服务器处理的过程中,客户端可以进行其他 的操作。
jQuery框架的ajax简介
jquery是一个优秀的js框架,自然对js原生的ajax进行了封装,封装后的ajax的操作方法更简洁,功能更 强大,与ajax操作相关的jquery方法多种,但开发中经常使用的是后面三种:
请求方式 | 语法 |
---|---|
GET请求 | $.get(url, [data], [callback], [type]) |
POST请求 | $.post(url, [data], [callback], [type]) |
AJAX请求 | $.ajax([settings]) |
GET请求 | $.get([settings]) |
POST请求 | $.post([settings]) |
GET请求方式
GET请求方式语法
jQuery.get(url, [data], [callback], [type])
参数 | 解释 |
---|---|
url | 请求服务端url地址 |
data | 发送给服务器端的请求参数,格式可以是key=value,也可以是js对象 |
callback | 当请求成功后的回调函数,可以在函数体中编写我们的逻辑代码 |
type | 预期的返回数据的类型,取值可以是 xml, html, script, json, text, _defaul等 |
POST请求方式
POST请求方式概述
通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求功能,如需复杂的ajax参数设置请使 用$.ajax。
POST请求方式语法
jQuery.post(url, [data], [callback], [type])
参数 | 解释 |
---|---|
url | 请求的服务器端url地址 |
data | 发送给服务器端的请求参数,格式可以是key=value,也可以是js对象 |
callback | 当请求成功后的回掉函数,可以在函数体中编写我们的逻辑代码 |
type | 预期的返回数据的类型,取值可以是 xml, html, script, json, text, _defaul等 |
AJAX请求方式【重点】
AJAX请求方式概述
通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。简单易用的高层实现见get和post方法。 $.ajax()方法可以更加详细的设置底层的参数。
AJAX请求方式语法
jQuery.ajax([settings])
其中,settings是一个js字面量形式的对象,格式是{name:value,name:value... ...},如下:(常用的属 性名加粗显示)
名称 | 值/描述 |
---|---|
async | 布尔值,表示请求是否异步处理。默认是 true。 |
beforeSend(xhr) | 发送请求前运行的函数。 |
cache | 布尔值,表示浏览器是否缓存被请求页面。默认是 true。 |
complete(xhr,status) | 请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)。 |
contentType | 发送数据到服务器时所使用的内容类型。默认是:"application/xwww-form-urlencoded"。 |
context | 为所有 AJAX 相关的回调函数规定 "this" 值。 |
data | 规定要发送到服务器的数据。 |
dataFilter(data,type) | 用于处理 XMLHttpRequest 原始响应数据的函数。 |
dataType | 预期的服务器响应的数据类型。 |
error(xhr,status,error) | 如果请求失败要运行的函数。 |
global | 布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 |
ifModified | 布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求 成功。默认是 false。 |
jsonp | 在一个 jsonp 中重写回调函数的字符串。 |
sonpCallback | 在一个 jsonp 中规定回调函数的名称。 |
password | 规定在 HTTP 访问认证请求中使用的密码。 |
processData | 布尔值,规定通过请求发送的数据是否转换为查询字符串。默认 是 true。 |
scriptCharset | 规定请求的字符集。 |
success(result,status,xhr) | 当请求成功时运行的函数 |
timeout | 设置本地的请求超时时间(以毫秒计)。 |
traditional | 布尔值,规定是否使用参数序列化的传统样式。 |
type | 规定请求的类型(GET 或 POST)。 |
url | 规定发送请求的 URL。默认是当前页面。 |
username | 规定在 HTTP 访问认证请求中使用的用户名。 |
xhr | 用于创建 XMLHttpRequest 对象的函数。 |
json数据格式
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于ECMAScript的 一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效 率。
json的语法格式
类型 | 语法 | 解释 |
---|---|---|
对象类型 | {name:value,name:value...} | 其中name是字符串类型,而value是任意类 型 |
数组/集合类 型 | [value,value,value...] | 其中value是任意类型 |
混合类型 | [{},{}... ...] 或 {name:[]... ...} | 合理包裹嵌套对象类型和数组类型 |
JSON是存储和交换文本信息的语法,类似 XML。
JSON 比 XML 更小、更快,更易解析。
常见的json转换工具
工具名称 | 介绍 |
---|---|
Jsonlib | Java 类库,需要导入的jar包较多 |
Gson | google提供的一个简单的json转换工具 |
Fastjson | alibaba技术团队提供的一个高性能的json转换工具 |
Jackson | 开源免费的json转换工具,springmvc转换默认使用jackson |
java对象转为json
- 创建java对象
- 创建解析器jackson对象,ObjectMapper om = new ObjectMapper();
- 调用writeValueAsString方法
json转为java对象
-
创建解析器对象,ObjectMapper om = new ObjectMapper();
-
调用readValue方法,T t = om.readValue(String json,Class type);
当实现异步交互式,返回的数据为json,需要设置Content-Type头MIME类型
content-type:application/json;charset=utf-8
或者设置ajax的dataType: "json"
Git 和SVN
Git:是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。
SVN:是一个开放源代码的版本控制系统,通过采用分支管理系统的高效管理,简而言之就是用于多个人共同开发同一个项目,实现共享资源,实现最终集中式的管理。
他们的优缺点比较
SVN
优点:
- 管理方便,逻辑明确,符合一般人思维习惯。
- 易于管理,集中式服务器更能保证安全性。
- 代码一致性非常高。
- 适合开发人数不多的项目开发。
缺点:
- 服务器压力太大,数据库容量暴增。
- 如果不能连接到服务器上,基本上不可以工作,看上面第二步,如果服务器不能连接上,就不能提交,还原,对比等等。
- 不适合开源开发(开发人数非常非常多,但是Google app engine就是用svn的)。但是一般集中式管理的有非常明确的权限管理机制(例如分支访问限制),可以实现分层管理,从而很好的解决开发人数众多的问题。
Git
优点:
- 适合分布式开发,强调个体。
- 公共服务器压力和数据量都不会太大。
- 速度快、灵活。
- 任意两个开发者之间可以很容易的解决冲突。
- 离线工作。
缺点:
- 学习周期相对而言比较长。
- 不符合常规思维。
- 代码保密性差,一旦开发者把整个库克隆下来就可以完全公开所有代码和版本信息。
Maven
Maven 是一个强大的项目管理和构建自动化工具,它通过抽象的项目对象模型(POM: Project Object Model)和构建生命周期模型(Project Lifecycle)来对项目及其构建过程进行管理(Dependency Management System),Maven 最大化的消除了构建的重复,提升了构建的效率与标准化。除此之 外,Maven 还有依赖管理、自动生成项目站点、代码静态检查等特性。现在已经有无数开源或商业项 目使用Maven进行构建,Maven 现在已经是 Java 社区事实标准的构建工具。
Maven的作用
maven对项目的第三方构件(jar包)进行统一管理。向工程中加入jar包不要手工从其它地方拷贝,通过 maven定义jar包的坐标,自动从maven仓库中去下载到工程中。 maven提供一套对项目生命周期管理的标准,开发人员、和测试人员统一使用maven进行项目构建。 项目生命周期管理:编译、测试、打包、部署、运行。 maven对工程分模块构建,提高开发效率。
心得
今天学习的东西还是比较少的,基本都是工具的使用,这些东西最开始高企阿里还是比较麻烦的,处处碰壁,虽然跟着老师的指导文档一点点敲也会遇到各种问题。
近期评论