共计 3488 个字符，预计需要花费 9 分钟才能阅读完成。
cgb2010- 京淘我的项目 Day16
1. 对于.html 文件拦挡的阐明
1.1 问题形容
阐明 1.: 图中的后缀代表着什么?
.html: 动态页面 / 动静页面 动态页面.
2. 对于动态页面的阐明:
当用户拜访:https://i-item.jd.com/1000176… 依据 itemId 查问相干的商品的信息. 之后通过 JS 在指定的地位中展示商品数据.
3. 对于 url 中取值的阐明:
因为商品的 ID 号为于 URL 中 而后端程序须要通过 url 中的 Id 查问数据信息. 所以这里的取值形式必然是 restFul 的格调…
4.SpringMVC 应该如何拦挡申请门路???
url1:localhost:8091/items/addUser
url1:localhost:8091/items/updateItem
url1:localhost:8091/items/100100.html
@RequestMapping(“/items/{itemId}.html”)
阐明: 如果须要实现该性能, 则应该 拦挡.html 结尾的申请.
1.2 对于.html 拦挡的阐明
默认的条件下 SpringMVC 只拦挡前缀型申请. 如果遇到动态资源的申请. 则个别默认的条件下. 去查问 webapp 中的文件.
问题: 如何让程序被 SpringMVC 拦挡呢?
1.3 开启后缀类型匹配
阐明: 通过配置文件, 要求 SpringMVC 拦挡后缀型申请. 以.html 为例
1.4 为什么要以.html 结尾
阐明: 因为当初的电商网站, 都须要搜索引擎进行引流. 认为了让搜索引擎更加容易的记录网站的内容. 个别页面信息都是以.html 结尾的.
论断: 个别的搜索引擎只记录.html 的动态页面信息. 这样做的目标能够无效的减少搜索引擎的曝光率.
1.5 搜索引擎工作原理
倒排索引: 依据关键字, 检索文章的地位.
2 跨域相干阐明
2.1 同域测试
2.1.1 JSON 数据批改
2.1.2 页面 JS 剖析
2.1.3 测试后果
2.1.4 后果阐明
URL 申请地址: http://manage.jt.com:80/test.html
Ajax 申请地址: http://manage.jt.com:80/test.json
剖析后果: 1. 申请协定雷同
2. 申请域名雷同
3. 申请端口号雷同
2.2 跨域测试
2.2.1 jt-web 服务器页面阐明
2.2.2 问题阐明
通过上述的申请, 是无奈获取数据的.
起因:
URL 地址: http://www.jt.com:80/test.html
Ajax 地址: http://manage.jt.com:80/test.json
问题: 协定雷同
域名不同
端口号雷同
2.3 同源策略
同源策略:
当用户拜访 页面 时并且页面发动 Ajax 申请 时. 要求 协定:// 域名: 端口号 必然雷同.
同域拜访
如果雷同则满足同源策略. 网络能够失常的通信.
跨域拜访
当协定:// 域名: 端口有一条不满足, 则该申请为跨域申请. 如果为跨域申请 则浏览器不予解析返回值.
2.4 同源策略扩大
考题:
http://manage.jt.com:80/a.js
http://127.0.0.1:8091/b.js 跨域
2.5 对于同源策略总结
执行者: 只有浏览器参加执行, 才会有同源的问题…
策略约定: 协定:// 域名: 端口 三者缺一不可.
跨域问题发起者: Ajax 申请. 如果没有 ajax 参加 不能称之为跨域.
结果: 如果跨域了, 则程序仍然能够失常的执行. 然而客户端拿不到后果的. 出于安全性思考. 浏览器不予解析返回值.
2.6 JSONP
2.6.1 JSONP 介绍
JSONP(JSON with Padding)是 JSON 的一种“应用模式”，可用于解决支流浏览器的跨域数据拜访的问题。因为同源策略，一般来说位于 server1.example.com 的网页无奈与不是 server1.example.com 的服务器沟通，而 HTML 的
注意事项: JSONP 如果须要应用个别用来获取资源 GET 类型. 而不是提交数据.(POST 类型)
起因: javaScript 中的 src 属性 只能反对 GET 申请类型.
2.6.2 JSONP 原理阐明
1). 基于 javaScript 中的 src 属性实现近程数据拜访.
<script type="text/javascript" src="http://manage.jt.com/test.json"></script>
2). 自定义回调函数
3). 将返回值进行非凡的格局封装
语法: callback(JSON 数据)
2.6.3 对于 JSONP 优化
问题:
1). 惯例的近程申请, 还是采纳 ajax 模式居多. 是否将 jsonp 办法与 Ajax 联合呢?
2). 每次发动 JSONP 申请时, 都须要自定义回调函数 比拟繁琐.
3). 如果前后端须要实现调用, 则须要对立回调函数名称. 最好的形式能够将回调函数当做参数进行传递. callback(JSON)
`<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSONP 测试 </title>
<script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){alert("测试拜访开始!!!!!")
$.ajax({
url:"http://manage.jt.com/web/testJSONP",
type:"get", //jsonp 只能反对 get 申请
dataType:"jsonp", //dataType 示意返回值类型
//jsonp: "callback", // 指定参数名称
jsonpCallback: "hello", // 指定回调函数名称
success:function (data){ //data 通过 jQuery 封装返回就是 json 串
console.log("回调函数执行胜利!!!!!")
}
});
})
</script>
</head>
<body>
<h1>JSON 跨域申请测试 </h1>
</body>
</html>2.6.4 对于 JSONP 后端业务调用
`package com.jt.web.controller;
import com.jt.pojo.ItemDesc;
import com.jt.util.ObjectMapperUtil;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.Date;
@RestController
public class JSONPController {// 返回值要求: callback(json 串)
@RequestMapping("/web/testJSONP")
public String jsonp(String callback){ItemDesc itemDesc = new ItemDesc();
itemDesc.setItemId(1000L).setItemDesc("JSONP 调用胜利!!!")
.setCreated(new Date()).setUpdated(new Date());
String json = ObjectMapperUtil.toJSON(itemDesc);
return callback + "(" + json + ")";
}
}2.6.4 对于 JSONP 后端业务调用(二)
2.7 CORS
2.7.1 CORS 介绍(跨域资源共享)
CORS 须要浏览器和服务器同时反对 。目前，所有浏览器都反对该性能，IE 浏览器不能低于 IE10。
整个 CORS 通信过程，都是浏览器主动实现，不须要用户参加。对于开发者来说，CORS 通信与同源的 AJAX 通信没有差异，代码齐全一样。浏览器一旦发现 AJAX 申请跨源，就会主动增加一些附加的 响应头 信息. 如果后端服务器容许资源共享则会在响应头中标识是否容许拜访.
因而，实现 CORS 通信的 要害是服务器
2.7.2 CORS 工作原理
2.7.3 CORS 入门案例
2.7.4 对于响应头的阐明
阐明: 如果服务器端容许跨域, 则会在响应头中, 增加服务器信息.
3. 京淘单点登录业务 jt-sso
3.1 实现登录 / 注册页面跳转
3.1.1 编辑 UserController
3.1.2 页面 JSONP 标识
3.1.3 页面 JS 标识
快捷键: eclipse 的快捷键: ctrl + h
3.1.4 业务接口文档
