Ajax
Ajax 全称为:“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML), 使用 Ajax,我们可以无刷新状态更新页面,并且实现异步提交,提升了 用户体验。
1. Ajax其实质是利用浏览器提供的一个特殊的对象(XMLHttpRequest) 异步地向服务器发送请求。
2. 服务器返回部分数据,浏览器让你去利用这些数据对页面做部分的更新, 整个过程,页面无刷新,不打断用户的操作。
XMLHttpRequest
XMLHttpRequest对象:发送请求到服务器并获得返回结果
所有现代浏览器 都内建了 XMLHttpRequest 对象,通过一行简单的 JavaScript 代码,我们就可以创建 XMLHttpRequest 对象。
new XMLHttpRequest();
JavaScript对象XMLHttpRequest是整个Ajax技术的核心,它提供了异步 发送请求的能力。
常用方法
open(method,URL,async) 建立与服务器的连接
method参数指定请求的HTTP方法,典型的值是GET 或POST
URL参数指定请求的地址
async参数指定是否使用异步请求,其值为true或 false
send(content) 发送请求
content参数指定请求的参数
setRequestHeader(header,value) 设置请求的头信息
常用属性
onreadystatechange:事件,指定回调函数
readystate: XMLHttpRequest的状态信息
responseText:获得响应的文本内容
axios中的get方式和post方式
post方式
submit(){
this.$http.post("admin/student", jsonToString(this.form)).then((resp)=>{
if(resp.data.code==200){
this.dialogFormVisible = false;//关闭窗口
this.$message({
message: resp.data.msg,
type: 'success'
});//弹出提示成功窗口
this.$router.go();//刷新页面
}else if(resp.data.code==201){
}
})
}
get方式
mounted() {
this.$http.get("admin/student?mark=major").then((resp) => {
if (resp.data.code == 200) {
this.majorList = resp.data.data;
}
})
}
JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交 换格式
1. 数据在键值对中
2. 数据由逗号分隔
3. 大括号保存对象
4. 方括号保存数组
语法: JSON 键值对是用来保存 JS 对象的一种方式,和 JS 对象的写法也大同小异,键/值对 组合中的键名写在前面并用双引号 "" 包裹,使用冒号 : 分隔,然后紧接着值:
{"firstName": "John"}
{“name”:”value”,”sex”:”男”}
比较有趣的一点是,早期Java吧数据写入xml中,再传到前端,然后js解析数据。过程十分复杂,现在已经不再使用了。
异步
上面在讲解ajax中提到了很多个异步,那么异步是什么意思呢?
先举例说明一下何为同步,正常情况下,我们在登录界面,每一个步骤的请求,都不会影响其他请求的发送,如下图。
在验证邮箱账号能否注册时,别的按键不影响使用。
而同步则是如下图。
点击保存后,后端所传输过来的值,直接将html页面覆盖掉了,这就是同步。
由此栗子我们便可以知道,前后端同步请求,后端响应的内容,会把整个内容覆盖掉。打断了客户端的其他操作。
关系如下图。
而异步,字如其意就是不同步的意思。
前端发送请求:
使用js中提供了一个XMLHttpRequest对象,代理网页向后端发送了一个请求(异步的),
服务器所响应的内容也是由此对象接收的,最终在js中将接收的数据更新到网页的某个标签上。这样在前后端交互的过程中,不影响网页的其他操作,网页就不会出现刷新操作。
关系如下图。
跨域问题
首先什么是跨域?
跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。但是一般情况下不能这么做,它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。跨域的严格一点的定义是:只要 协议,域名,端口有任何一个的不同,就被当作是跨域。
所谓同源是指,域名,协议,端口均相同,只要有一个不同,就是跨域。
下表将举例说明何种触发跨域。
URL | 说明 | 是否允许通信 |
http://www.a.com:80/a.js http://www.a.com:80/b.js | 同一域名下 | 允许 |
http://www.a.com/lab/a.js http://www.a.com/script/b.js | 同一域名下不同文件夹 | 允许 |
http://www.a.com:8000/a.js http://www.a.com/b.js | 同一域名,不同端口 | 不允许 |
http://www.a.com/a.js https://www.a.com:443/b.js | 同一域名,不同协议 | 不允许 |
http://www.a.com/a.js http://script.a.com/b.js | 主域相同,子域不同 | 不允许 |
http://www.a.com/a.js http://a.com/b.js | 同一域名,不同二级域名(同上) | 不允许(cookie这种情况下也不允许访问) |
不同域名 | 不允许 |
为什么浏览器要限制跨域访问呢?
原因就是安全问题:如果一个网页可以随意地访问另外一个网站的资源,那么就有可能在客户完全不知情的情况下出现安全问题。比如下面的操作就有安全问题:
1.用户访问www.mybank.com ,登陆并进行网银操作,这时cookie啥的都生成并存放在浏览器
2.用户突然想起件事,并迷迷糊糊地访问了一个邪恶的网站 www.xiee.com
这时该网站就可以在它的页面中,拿到银行的cookie,比如用户名,登陆token等,然后发起对www.mybank.com 的操作。
3.如果这时浏览器不予限制,并且银行也没有做响应的安全处理的话,那么用户的信息有可能就这么泄露了。
为什么要跨域?
既然有安全问题,那为什么又要跨域呢? 有时公司内部有多个不同的子域,比如一个是location.company.com ,而应用是放在app.company.com , 这时想从 app.company.com去访问 location.company.com 的资源就属于跨域。
怎么解决跨域问题
可以通过前端解决,也可以通过后端解决,这里我们主要讲解后端解决的方法。
跨域资源共享(CORS)
W3C 的 Web 工作组推荐了一种新的机制,即跨域资源共享(Cross-origin Resource Sharing),简称CORS。其实这个机制就是实现了跨站访问控制,使得安全地进行跨站数据传输成为可能。
服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许ajax进行跨域的访问。
只需要在后台中加上响应头来允许域请求!在被请求的Response header中加入设置,就可以实现跨域访问了!
创建过滤器实现后端设置允许跨域访问:
@WebFilter(urlPatterns = "/*")
public class CorsFilter implements Filter {
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
throws IOException, ServletException {
HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
HttpServletRequest httpRequest = (HttpServletRequest) servletRequest;
//允许携带Cookie时不能设置为* 否则前端报错
httpResponse.setHeader("Access-Control-Allow-Origin", httpRequest.getHeader("origin"));//允许所有请求跨域
httpResponse.setHeader("Access-Control-Allow-Methods", "*");//允许跨域的请求方法GET, POST, HEAD 等
httpResponse.setHeader("Access-Control-Allow-Headers", "*");//允许跨域的请求头
httpResponse.setHeader("Access-Control-Allow-Credentials", "true");//是否携带cookie
filterChain.doFilter(servletRequest, servletResponse);
}
}
XML
什么是xml
XML 指可扩展标记语言( Extensible Markup Language )
XML 是一种标记语言,很类似 HTML
XML 的设计宗旨是传输 , 存储数据,而非显示数据
XML 标签没有被预定义。您需要自行定义标签。
XML 被设计为具有自我描述性。
xml与html的主要差异
XML 不是 HTML 的替代。
XML 和 HTML 为不同的目的而设计:
XML 被设计为存储数据,其焦点是数据的内容。
HTML 被设计用来显示数据,其焦点是数据的外观。
xml的优势 在于它能对各种编程语言编写的数据进行管理,使得在任何平台下都能通过解析器来读取 XML 数据。
xml的语法
一个xml文件分为如下几部分内容:
1.文档声明
2.元素 标签
3.属性
4.注释
文档声明
在编写 XML 文档时,需要先使用文档声明,声明 XML 文档的类型。
最简单的声明语法:
<?xml version="1.0" ?>
用 encoding 属性说明文档的字符编码:
<?xml version="1.0" encoding="GB2312" ?>
元素
元素是XML文档内容的基本单元。语法上,一个元素包括一个起始标记,一个结束标记以及标记之间的数据内容。
例如:<出版社>电子工业出版社</出版社>
元素中还可以嵌套别的元素。在XML文档中,仅有一个根元素,可以有多个子元素,允许出现空元素。
XML 命名规则
XML 元素必须遵循以下命名规则:
名称可以含字母、数字以及其他的字符
名称不能以数字或者标点符号开始
名称不能以字符 “ xml” (或者 XML 、 Xml )开始
名称不能包含空格
可使用任何名称,没有保留的字词。
XML 的语法规则
所有 XML 元素都须有关闭标签
XML 标签对大小写敏感
3.XML 必须正确地嵌套
XML 文档必须有根元素
XML 的属性值须加引号
实体引用
在 XML 中,有 5 个预定义的实体引用:
& lt ; < 小于
& gt ;> 大于
&& 和号
& apos ; ‘ 单引号
""引号
属性
属性是用来修饰某个元素的,如:
<root>
<a attribute="aa">this is test</a>
需要注意的是,
1.属性的值必须用引号廓起来,如attribute="aa"
2.元素的属性以名和值成对出现;
3.用来修饰同一个元素的属性的属性名不能相同。
4.属性值不能包含“&” “ ‘’ ” “<”等字符。
注释
XML 中的注释
<!-- -->
在 XML 中,空格会被保留
XML约束概述
什么是XML约束
在 XML 技术里,可以编写一个文档来约束一个 XML 文档的书写规范,这称之为 XML 约束
常用的约束技术
DTD
约束:语法相对简单,功能也相对简单。学习成本也低。
Schema
约束:语法相对复杂,功能也相对强大。
学习成本
相对高