JavaScrip
-
声明变量
var temp; temp =1;是一个弱类型语言，没有类型
-
声明对象
var obj = { // 这里用，来表示属性 lastName : "zhangsan", age : 18 }; alert(obj.lastName) obj.email = "[email protected]"; //如果这里没有事先写这个属性，那么这样直接添加就可以 -
声明方法
function hello(){ } //调用 hello() var hello = function(){ }; hello(); -
事件：用户和浏览器的交互行为
window.onload = function(){
文档加载完成：（页面里面所有的内容都是显示成功）
}
$(function()){
//文档加载完成（dom准备就绪）
}
-
常用事件：
- 如何给一个元素绑定上事件
<a href = "hello" id = "aEle"> 你好 </a> var aEle = document.getElementById("aEle"); aEke.onclick = function(){ alert("你好"); //取消默认行为: 页面就不跳转了 因为是<a href> 标签，是一个链接会跳转 return false; } -
Jquery
jQuery(js 库) ----- js
-
重点：
- 选择器
- 文档操作（对dom的增删改查)
- 属性操作
#id :$("#btn01") 找到一个id是指定值的标签 element :$("a") 找到所有的a标签 .class :$(".mini") 找到所有class为mini的元素 * :$("*") 找到所有的元素 选择器 selector1,selector2,selectorN : $("#btn01","#btn02",".big","form","#a01 *") 表示找到id为btn01 和btn02的元素； 以及class为big的元 素，以及所有form表单，以及id为a01 下的所有所属 层级 ancestor descendant : 找后代 parent > child : 找子元素 $("a > #btn01"):找到a标签下id为btn01的子元素 prev + next : 找下一个兄弟 $("#btn01 + .mini"):找到id为btn01的下一个 同级元素，而且这个元素的class是mini prev ~ siblings : 找所有的同辈兄弟 $("#deleBtn01 ~a"):找到id为delteBtn01 的所有兄弟元素，但必须是a标签
JSP
- 原理
- 向服务器发送请求 http://localhost:8080/4.PocStore/index.jsp
- JspServlet 找到index.jsp这个文件，第一次请求，将其翻译成index_jsp.java，编译成index_jsp.class ; 以后每次直接就去找到这个class即可
- 利用反射调用class文件中 jspService的方法 ；
- 将jsp文件中的数据写出到浏览器，用户就可以看到了
- 4个域对象
- pageContext request session application
- 共享数据的范围：有小到大 pageContext request session application
- pageContext : 当前页面共享数据在当前页面能取出来
- request : 同一次请求的共享数据，同一请求期间可以共享（转发，重定向是两次不同的请求） 一旦response了，响应就完成了，当次请求就结束了
- session : 同一次会话期间数据共享（浏览器打开开始会话，浏览器关闭结束会话）
- application ：同一个web中共享数据，只要是服务器不关闭都可以使用
Cookie
浏览器端保存少量数据的一种技术
- 特点
- 保存少量
- 都是纯文本
- 保存当前网站的cookie,每次访问这个网站都会携带这个cookie，
- 假如说我访问hello.html中携带了cookie,那么我又访问index.html页面，同样还是会携带cookie
- 默认不支持中文
- cookie有效时间：
- 默认：会话期间有效（只要是浏览器不关）
- 修改cookie 只能同名覆盖
Session
服务器端保存当前会话大量数据的一种技术
可以在同一个会话期间共享
session 的实质就是一个map ， 100个会话就有100个map，每次创建map的时候，这个map有唯一一个标志（JESSSIONID ； 会话id）
利用浏览器每次访问会带上她所有的cookie
服务器只需要创建一块能保存数据的map，给这个map一个唯一标志（JESSIONID）：创建好以后命令浏览器保存这个map的标志，以后浏览器访问就会带上这个map标志，服务器就按照标志找到这个map,取出这个map中的数据
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8WXaP76b-1579600580666)(C:\Users\你大爷\AppData\Roaming\Typora\typora-user-images\image-20200121132722509.png)]
令牌机制
- f5将之前的请求再次发出去，表单重复提交
引出
- 每次提交请求的时候验证提交的是否正确
令牌机制
虎符：
- 访问页面的时候，生成一个令牌
- 第一次访问页面生成一个令牌，只要不刷新页面，f5重新发送上一次请求，令牌不会变化，servlet第一次收到令牌进行比对，比对成功进行更改或删除
- 下一次直接去刷新发送上次的请求，由于带来的令牌还是上次的，而这个令牌已经失效了
- 应用场景
- 防止表单重复提交
- 验证码
Json
- JSON(javaScript Object Notation)：(js对象表示法) ：是一种轻量级（和xml相比很轻量）的数据交换格式
{key:value,key:value};
value: 可以有很多种
1）基本类型
2）数组 []表示
{lastname:"李四" , books: [value1,value2]}
3) 对象 {}来表示
var student = {lastname:"张三" ，age : 18, car: {pp : "宝马"，price : 1000}}
<script type="text/javascript">
var student = {
lastname: "张三",
age: 18,
car: {
pp: "宝马", price: 1000
}
};
alert(student.car.pp);
</script>
json要求可js对象是一样的，只不过key必须要是字符串
json应该是利于传输的字符串，因为http 只接受文本格式，所以
-
json应该是js对象的字符串表示法
//将js对象转换成字符串（json） var c = JSON.stringify(student1); alert(c); //将json（必须是满足js对象格式的）转换成一个js对象 var c1 = JSON.parse(c); alert(c1.lastname);
AJAX
(Asynchronous Js And Xml) 异步js和xml
- 是一种页面不刷新就能得到服务器来的数据
原来的交互：
- 发送请求
- 服务器收到请求，调用对应的servlet来处理，servlet处理完会相应信息生成
- 浏览器收到了服务器响应的数据，把之前的页面清楚，展示新的数据（效果就是刷新）
那现在的交互（AJAX）
- 利用xmlHttpResquest对象帮我们发送请求
- 服务器收到请求，调用对应的servlet来处理，servlet处理完会相应信息生成
- xmlHttpRequest对象（js对象）收数据（浏览器就感受不到这个数据了：xmlHttpRequest对象）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gnFnyZdS-1579600580683)(C:\Users\你大爷\AppData\Roaming\Typora\typora-user-images\image-20200121150538991.png)]
原生AJAX很麻烦，所以使用jquery包装后的
jQuery - Ajax
为什么要用Ajax,因为正常的逻辑你不是要跳转么，那么可能我只需要改动的是其中的一小部分，但是我如果用以前的方法，我就需要把所有的本来不需要改动的还需要重新提交一遍，太浪费，所以我需要使用Ajax
