20201116+袁鑫

学习日志

知识总结

AJAX&JSON

AJAX

异步的 JavaScript 和 XML(ASynchronous JavaScript And XML),是指一种创建交互式网页应用的网 页开发技术。Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集)。通过在后台与服务器进行 少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页 的某部分进行更新。传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

总结来说:ajax可以实现异步提交和局部刷新的技术

AJAX的应用场景
  1. 检查用户名是否已经被注册
    很多站点的注册页面都具备自动检测用户名是否存在的友好提示,该功能整体页面并没有刷新,但仍然 可以异步与服务器端进行数据交换,查询用户的输入的用户名是否在数据库中已经存在。
  2. 省市二联下拉框联动
    很多站点都存在输入用户地址的操作,在完成地址输入时,用户所在的省份是下拉框,当选择不同的省 份时会出现不同的市区的选择,这就是最常见的省市联动效果。
  3. 内容自动补全
    不管是专注于搜索的百度,还是站点内商品搜索的京东,都有搜索功能,在搜索框输入查询关键字时, 整个页面没有刷新,但会根据关键字显示相关查询字条,这个过程是异步的。
  4. 地图

同步方式与异步方式的区别

同步方式发送请求

发送一个请求,需要等待响应返回,然后才能够发送下一个请求,如果该请求没有响应,不能发送下一 个请求,客户端会处于一直等待过程中。

异步方式发送请求

发送一个请求,不需要等待响应返回,随时可以再发送下一个请求,即不需要等待

同步和异步:客户端和服务器端通信的基础上

同步:客户端发送请求后,必须等待服务器端的响应。在等待的期间客户端不能做其他操作。

异步:客户端发送请求后,不需要等待服务器端的响应。在服务器处理的过程中,客户端可以进行其他 的操作。

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
  1. 创建java对象
  2. 创建解析器jackson对象,ObjectMapper om = new ObjectMapper();
  3. 调用writeValueAsString方法
json转为java对象
  1. 创建解析器对象,ObjectMapper om = new ObjectMapper();

  2. 调用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

优点:

  1. 管理方便,逻辑明确,符合一般人思维习惯。
  2. 易于管理,集中式服务器更能保证安全性。
  3. 代码一致性非常高。
  4. 适合开发人数不多的项目开发。

缺点:

  1. 服务器压力太大,数据库容量暴增。
  2. 如果不能连接到服务器上,基本上不可以工作,看上面第二步,如果服务器不能连接上,就不能提交,还原,对比等等。
  3. 不适合开源开发(开发人数非常非常多,但是Google app engine就是用svn的)。但是一般集中式管理的有非常明确的权限管理机制(例如分支访问限制),可以实现分层管理,从而很好的解决开发人数众多的问题。

Git

优点:

  1. 适合分布式开发,强调个体。
  2. 公共服务器压力和数据量都不会太大。
  3. 速度快、灵活。
  4. 任意两个开发者之间可以很容易的解决冲突。
  5. 离线工作。

缺点:

  1. 学习周期相对而言比较长。
  2. 不符合常规思维。
  3. 代码保密性差,一旦开发者把整个库克隆下来就可以完全公开所有代码和版本信息。

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对工程分模块构建,提高开发效率。

心得

今天学习的东西还是比较少的,基本都是工具的使用,这些东西最开始高企阿里还是比较麻烦的,处处碰壁,虽然跟着老师的指导文档一点点敲也会遇到各种问题。

标签

评论


© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1