JS、AJAX、jQuery学习笔记

最新推荐文章于 2025-02-25 09:51:17 发布

Cscccccon

最新推荐文章于 2025-02-25 09:51:17 发布

阅读量176

点赞数

本文链接：https://blog.youkuaiyun.com/Cscprx/article/details/104064427

版权

本文主要介绍了JavaScript的基础知识，包括变量、对象和事件，然后深入讲解了JSP的工作原理和四个域对象。接着讨论了Cookie和Session的用途及特性。文章重点讲述了防止表单重复提交的令牌机制，并对JSON数据交换格式进行了说明。最后，详细阐述了AJAX的基本概念，包括XMLHttpRequest对象的使用，以及jQuery如何简化AJAX操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScrip

声明变量
```
var temp;
temp =1;
```
是一个弱类型语言，没有类型

声明对象

var obj = {
// 这里用，来表示属性
	lastName : "zhangsan",
	age : 18
};
alert(obj.lastName)
obj.email = "aaaa@qq.com"; //如果这里没有事先写这个属性，那么这样直接添加就可以

声明方法

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);