一、异步请求局部刷新
1、架构
主流方式：
2、技术栈
1）JavaScript 形成交互
2）jQuery 封装JavaScript，代码更加简洁高效
3）ajax 异步请求
4）json 数据传输
5）Web中间件(tomcat) 处理请求和响应
6）mysql数据库 存取数据
3、执行过程
用户页面中触发ajax请求，访问后端服务器，Web中间件拦截用户请求，转发后端程序进行数据处理，一般还需访问数据库，然后逐层返回。数据库返回数据处理服务，数据处理服务返回Web中间件，Web中间件返回ajax调用，将数据封装到返回的js对象中，目前主流返回数据为json字符串。在回调callback的方法中解析json中的数据，最终回显到页面上。通常我们使用jquery封装过的ajax，写法更加简洁灵活。
二、jQuery简介
1、什么是jQuery
jQuery是一门轻量的、免费开源的JS函数库，主要作用是用于简化JS代码
轻量的：代码或项目对该技术的依赖程度，依赖程度越低，这个技术越轻，反之，依赖程度越高，这个技术越重。推荐使用轻量级的技术框架
jQuery的核心思想：“写的更少，但做的更多”
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。
jQuery库包含以下功能：
1）HTML 元素快速选取(给予css选择器,方便快速查询DOM文档中的元素)
2）HTML 元素操作
3）CSS 操作
4）HTML 事件函数
5）JavaScript 特效和动画
6）HTML DOM 遍历和修改
7）AJAX
2、jQuery的语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法是：$(selector).action()
$("p").hide() --隐藏所有段落
$(".test").hide() --隐藏所有 class="test" 的所有元素
$("#test").hide() --隐藏所有 id="test" 的元素
入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试jq语法</title>
<!-- 1、引入JQuery文件-->
<script src="jquery-1.8.3.min.js"></script>
<!-- 2、在网页中嵌入JS代码 -->
<script>
//点击p标签，修改文字
function fun(){
//Dom修改文字
var a = document.getElementsByTagName("p"); //按照标签名获取元素
a[0].innerHTML="我修改了"; //修改第一个元素的文字
//jq获取元素--语法：$(选择器).事件
//$("p").hide(); //隐藏元素
$("p").text("我被jq语言修改了");
}
</script>
</head>
<body>
<p onclick="fun();">我是p2</p>
</body>
</html>
3、jQuery的优势
1）简化了js的写法，用$替代了document.getXxx()
2）可以像CSS选择器一样非常方便的获取元素
3）可以通过修改css样式控制页面的效果
var ele = document.getElementById("username"); //js
var ele = $("#username"); // jQuery
var ele = document.getElementsByTagName("p"); //js
var ele = $("p"); //jQuery
var ele = document.getElementsByName("username"); //js
var ele = $('input[name="username"]'); // jQuery
var ele = document.getElementsByClassName("info"); //js
var ele = $(".info"); // jQuery
$("div").css("background", "red");
$("div").css({
"background" : "blue",
"border" : "2px solid red",
"font-size" : "30px"
});
4、jQuery的使用
jQuery其实就是一个JS文件,如需使用 jQuery,需要下载，然后使用 HTML 的script标签引用它,应该位于页面的head 部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq的使用</title>
<!-- 1、引入JQuery文件-->
<script src="jquery-1.8.3.min.js"></script>
</head>
<body>
<p onclick="fun();">我是p2</p>
</body>
</html>
三、文档就绪事件
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败。
1、测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试js的文档就绪</title>
<!--解决方法2：在h1里加个触发函数
<script>
function fu(){
//Domx修改h1的内容,
/*
var a = document.getElementsByTagName("h1");
a[0].innerHTML="我是被dom修改的h1"; //修改第一个的元素值
两步合成一步
*/
/*上两步合成一步*/
document.getElementsByTagName("h1")[0].innerHTML="我是被dom修改的h1";
//问题：想用的h1还没被加载，用时报错
//解决方法1：写在h1加载之后
//解决方法2：在h1里加个触发函数
//解决方法3：添加文档就绪函数
}
</script>
-->
<!--解决方法3：写在h1加载后+使用文档就绪函数 -->
<!--1) 导入jq文件-->
<script src="jquery-1.8.3.min.js"></script>
<script >
/*
//写法1：
$(document).ready(function(){
//document.getElementsByTagName("h1")[0].innerHTML="我是被dom修改的h1"; //js写法
$("h1").text("我是被jq修改的h1"); //jq语法
});
*/
//写法2：
$(function(){
$("h1").text("我是被jq简写的修改的h1");
}); //jq语法
</script>
</head>
<body>
<h1>我是h1</h1>
<!--解决方法1：写在h1加载之后
<script>
document.getElementsByTagName("h1")[0].innerHTML="我是被dom修改的h1";
</script>
-->
<!-- 解决方法2：在h1里加个触发函数
<h1 onclick="fu();">我是h1</h1>
-->
</body>
</html>
2、总结
什么时候该使用文档就绪事件函数？
如果在获取元素时，获取元素的代码执行的时机（时间）比元素本身加载的时间还要早，如果元素还没有加载到就获取，必然是获取不到的！
将获取元素的代码放在文档就绪事件函数中，等浏览器加载完整个网页后，文档就绪事件函数才会执行，此时所有的元素都被加载过了，再获取任何元素都能获取到！
四、jQuery选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的CSS选择器，除此之外，它还有一些自定义的选择器。
jQuery 中选择器语法：$()
1、基本选择器
1.1）元素选择器
$("div") -- 选中所有的div元素
$("span") -- 选中所有的span元素
1.2）id选择器
$("#d1") -- 选中id为d1的元素
$("p#d1") -- 选取所有 id="d1" 的p元素
1.3）class 选择器
$(".m1") -- 选中所有class值为m1的元素
$(".m2") -- 选中所有class值为m2的元素
1.4）属性选择器
$("[href]") -- 选取所有带有href属性的元素
$("[href='#']") -- 选取所有带有href值等于 "#" 的元素
2、元素选择器练习
需求：点击按钮，隐藏段落内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
<!-- 引入jQuery文件 -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 嵌入js代码 -->
<script>
$(document).ready(function(){ //使用jQuery的文档就绪函数,整个DOM都加载完了才执行
$("button").click(function(){ //选择属性是button的标签，单击事件
$("p").hide(); //选择属性是p的标签，隐藏事件
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>
3、id选择器练习
需求：点击按钮，隐藏指定id的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
<!-- 引入jQuery文件 -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 嵌入js代码 -->
<script>
$(document).ready(function(){ //使用jQuery的文档就绪函数,整个DOM都加载
$("button").click(function(){ //选择属性是button的标签，单击事件
$("#test").hide(); //选择id是test的，隐藏事件
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>
</html>
4、class选择器练习
需求：点击按钮，隐藏指定class的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
<!-- 引入jQuery文件 -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 嵌入js代码 -->
<script>
$(document).ready(function(){ //使用jQuery的文档就绪函数,整个DOM都加载
$("button").click(function(){ //选择属性是button的标签，单击事件
$(".test").hide(); //选择class是test的，隐藏事件
});
});
</script>
</head>
<body>
<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>
</html>
5、高级选择器—层级选择器
$("div span") -- 选中所有div元素下的所有span元素
$("#one div") -- 选中id为one的元素下的所有div元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
<!-- 引入jQuery文件 -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 嵌入js代码 -->
<script>
$(function(){
$("button").click(function(){
// 层级选择器,选中div下的span,隐藏
$("div span").hide();
})
$("button").click(function(){
//层级选择器,选中id=one下的div,隐藏
$("#one div").hide();
})
});
</script>
</head>
<body>
<button>点我</button>
<span id="one">
<div>我是div1</div>
<div>我是div2</div>
</span>
<div>
<a href="#">链接</a>
<span>我是span1</span>
<span>我是span2</span>
</div>
</body>
</html>
6、高级选择器—基本过滤选择器
1、选中第一个div元素
$("div:first")
$("div:eq(0)")
$("div").eq(0)
2、选中最后一个div元素
$("div:last")
$("div:eq(-1)")
$("div").eq(-1)
//点按钮,隐藏按钮自己
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
//点按钮,隐藏第一个div
$(function(){
$("button").click(function(){
// 选中第一个div
$("div:first").hide();
})
});
7、其他选择器
7.1）过滤选择器
$("li:first") //第一个li
$("li:last") //最后一个li
$("li:even") //挑选下标为偶数的li
$("li:odd") //挑选下标为奇数的li
$("li:eq(4)") //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)") //下标大于 2 的li
$("li:lt(2)") //下标小于 2 的li
7.2）内容过滤选择器
$("div:contains('Runob')") // 包含 Runob文本的元素
$("td:empty") //不包含子元素或者文本的空元素
7.3）可见性过滤选择器
$("li:hidden") //匹配所有不可见元素，或type为hidden的元素
$("li:visible") //匹配所有可见元素
7.4）属性过滤选择器
$("div[id]") //所有含有 id 属性的 div 元素
$("div[id='123']") // id属性值为123的div 元素
$("div[id!='123']") // id属性值不等于123的div 元素
7.5）状态过滤选择器
$("input:enabled") // 匹配可用的 input
$("input:disabled") // 匹配不可用的 input
$("input:checked") // 匹配选中的 input
$("option:selected") // 匹配选中的 option
7.6）表单选择器
$(":input") //匹配所有 input, textarea, select 和 button 元素
$(":text") //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password") //所有密码框
$(":radio") //所有单选按钮
$(":checkbox") //所有复选框
$(":submit") //所有提交按钮
$(":reset") //所有重置按钮
$(":button") //所有button按钮
$(":file") //所有文件域
五、jQuery事件
1、什么是事件
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
常见的DOM事件有很多：
2、事件的语法
页面中指定一个点击事件：
$("p").click();
$("p").click(function(){ // 事件触发后执行的代码!! });
3、常用事件
click() -- 单击事件
$("p").click( function(){ $(this).hide(); }); //选择标签是P的，单击，隐藏自己
dblclick() -- 双击事件
$("p").dblclick(function(){ $(this).hide(); }); //选择标签是P的，双击，隐藏自己
mouseenter() -- 鼠标指针穿过元素
$("#p1").mouseenter(function(){ alert('鼠标移到了 id="p1" 的元素上!'); });
mouseleave() -- 鼠标指针离开元素
$("#p1").mouseleave(function(){ alert("再见，您的鼠标离开了该段落。"); });
hover() -- 光标悬停事件
$("#p1").hover(
function(){ alert("你进入了 p1!"); }, //当鼠标移动到元素上时触发
function(){ alert("拜拜! 现在你离开了 p1!"); //当鼠标移出这个元素时触发
});
可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
$("#hide").click(function(){ $("p").hide(); });
$("#show").click(function(){ $("p").show(); });
4、事件练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
// 鼠标指针穿过元素会触发
$("button").mouseenter(function(){
alert("您经过了button");
})
// 鼠标指针离开元素会触发
$("div").mouseover(function(){
alert("您离开了div..");
})
})
</script>
</head>
<body>
<button ondblclick="alert(1);">点我</button>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>
5、.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试jq的练习</title>
<!-- 1、引入jq文件 -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 2、使用jq语法做练习，语法：$(选择器).时间 -->
<script>
//jq文档就绪函数：保证元素都被加载过客，既可以放心使用，不然会报错
$(function(){
//练习1：单击id=d1的元素，隐藏id=p1的
$("#d1").click(function(){ //根据指定id，进行单击事件，function这里是啥意思？
$("#p1").hide();
});
});
</script>
<!-- 练习2：双击class="dd"的元素，给div加背景色 -->
<script>
$(function(){ //jq文档就绪函数
$(".dd").dblclick(function(){ //根据指定class，双击事件
$("div").css("background-color","yellow");
})
});
</script>
<!-- 练习3：鼠标进入id="d1"的div，隐藏有href的属性元素 -->
<script>
$(function(){
//$("p#d1").mouseenter(function(){ //id="d1"的p
//$("div#d1").mouseenter(function(){ //id="d1"的div
$("div,#d1").mouseenter(function(){ //id="d1",标签是div的
$("[href]").hide();
});
});
</script>
</head>
<body>
<div id="d1">我是div1，id是d1，换行</div>
<div class="dd">我是div2，clas是dd，换行</div>
<div>我是div3，换行</div>
<div class="dd">我是div4，class是dd，换行</div>
<p id="p1">我是p1，id是p1，上下空行哦</p>
<p id="d1">我是p2，id是d1，上下空行哦</p>
<a class="dd">我是a1，class是dd，超链接</a>
<a href="#" id="d1" >我是a2，href是#，id是d1,超链接</a>
<a href="#">我是a3，href是#，超链接</a>
</body>
</html>
六、json
1、概念
ajax往往要完整应用还会配合一个技术：JSON，那什么是JSON呢？
JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON(JavaScript Object Notation，JS 对象简谱) 起名不咋地，非常拗口，我们就记住它是一种轻量级的数据交换格式即可。它基于 ECMAScript (js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。是xml的终结者，成为主流开发方式（ajax异步请求，json返回）。
2、作用
JSON 是存储和交换文本信息的语法。当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。
3、语法
3.1、JSON数据
格式：
1)" 'k':'v' "
2)'"k":"v"'
var c1 =' "firstName" : "John" '; //定义JSON属性
console.log(c1);
var a = " 'name' : '张三' "; //定义JSON属性
console.log(a);
注意：单引号，双引号不能串用
3.2、JSON数组
a = "[{'name':'张三','age':'28'},{'name':'李四','age':'29'}]";
console.log(a);
console.log(a.length); //求长度,51
3.3、JSON对象
a="{'name':'李四','age':'50'}"; //定义JSON属性
console.log(a); //{'name':'李四','age':'50'}
console.log(a.length); //求长度,24
console.log(a.concat(123)); //拼串,{'name':'李四','age':'50'}123
4、转换工具
使用JS里的内置对象JSON.用来把以 JSON 格式写的字符串和原生JavaScript 对象互转。
给服务器发送数据: 将JS对象转成JSON字符串 JSON.stringify(Js对象)
接受服务器的数据: JSON字符串转成JS对象 JSON.parse("json字符串
//接受服务器的数据:JSON字符串转成JS对象 JSON.parse("json字符串")
var jsa = JSON.parse(a);
//注意：parse解析的内容一定要被单引号包裹，里面的值要被双引号包裹
console.log(jsa);
console.log(jsa[0].name); //张三，获取下标为0的name值
console.log(jsa[1].age); //20，获取下标为0的age值
//给服务器发送数据:将S对象转成JSON字符串 JSON.stringify(Js对象)
//json串可以对字符串拼接、长度、截取、替换....
var str = JSON.stringify(jsa);
console.log(str);
//拼接、长度、截取
console.log(str.concat(123)); //拼接字符串
console.log(str.length); //长度
console.log(str.substring(3)); //从3开始向后截取
console.log(str.substring(3,5)); //从3开始，到5结束截取，含头不含尾截取
5、json.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 测试JSON的语法</title>
<!-- 在网页中嵌入js代码 -->
<script>
<!-- 定义JSON的语法 -->
var c1 ='"firstName" : "John"'; //定义JSON属性
console.log(c1);
var a = " 'name' : '张三' "; //定义JSON属性
var b = ' "age":"20" '; //定义JSON属性
console.log(a);
console.log(b);
a="{'name':'李四','age':'50'}"; //定义JSON属性
console.log(a); //{'name':'李四','age':'50'}
console.log(a.length); //求长度,24
console.log(a.concat(123)); //拼串,{'name':'李四','age':'50'}123
<!-- 定义JSON数组 -->
//a = "[{'name':'张三','age':'28'},{'name':'李四','age':'29'}]";
a = '[{ "name":"张三", "age" : "18"},{ "name": "李四", "age": "20"}]';
console.log(a);
console.log(a.length); //求长度,51
<!-- 定义JSON的对象 -->
//json串<-> js对象----JSON
//js对象可以解析对象的含种属性的值
//接受服务器的数据:JSON字符串转成JS对象 JSON.parse("json字符串")
//给服务器发送数据:将S对象转成JSON字符串 JSON.stringify(Js对象)
//接受服务器的数据:JSON字符串转成JS对象 JSON.parse("json字符串")
var jsa = JSON.parse(a);
//注意：parse解析的内容一定要被单引号包裹，里面的值要被双引号包裹
console.log(jsa);
console.log(jsa[0].name); //张三，获取下标为0的name值
console.log(jsa[1].age); //20，获取下标为0的age值
//给服务器发送数据:将S对象转成JSON字符串 JSON.stringify(Js对象)
//json串可以对字符串拼接、长度、截取、替换....
var str = JSON.stringify(jsa);
console.log(str);
//拼接、长度、截取
console.log(str.concat(123)); //拼接字符串
console.log(str.length); //长度
console.log(str.substring(3)); //从3开始向后截取
console.log(str.substring(3,5)); //从3开始，到5结束截取，含头不含尾截取
</script>
</head>
<body>
</body>
</html>
七、ajax
1、概念
Ajax 即Asynchronous Javascript And XML( 异步的 )
Ajax并不是一种新的编程语言，而是多种技术的综合应用
Ajax是 客户端 的技术，它可以实现 局部刷新 网页
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
总结：是异步的技术，用来局部刷新网页的
2、原理
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
3、格式
七个参数：
$.ajax({
type: , //要使用的请求方式，get/post
url: , //要使用的请求路径 ,交给具体的哪个程序取处理
contentType: , //要传递的数据类
data: , //要拼接的数据，请求时要携带的参数
dataType: , //数据类型，服务器返回的数据类型
success: function(data){ //成功时的方案，请求成功后调用
},
error: function(data){ //失败时的方案，请求失败后调用
}
})
4、ajax.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试ajax语法</title>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(function(){ //文档就绪事件
$.ajax({ //发起Ajax请求数据
type: "POST", //POST隐藏请求自带的数据,get显示请求自带的数据
url: "http://p.3.cn/prices/mgets",
contentType: "application/json;charset=utf-8",
data: { //拼接的参数
"skuIds": "J_100003717483"
},
dataType: "jsonp",
success: function(data) { //返回的结果
console.log(data); //查看js对象
console.log();
//data就已经是js对象了，直接解析属性的值
//[{"p":"-1.00","op":"2499.00","cbf":"0","id":"J_100003717483","m":"10000.00"}]
$('#p1').text("返回数据：" + JSON.stringify(data)); //将js对象转化为JSON字符串
$('#p2').text("商品编号：" + data[0].id); //设置返回所选元素的文本内容
$('#p3').text("商品价格： " + data[0].op);
},
error: function(data) {
alert("提交失败" + JSON.stringify(data));
}
});
});
</script>
</head>
<body>
<p id="p1">这是p1</p>
<p id="p2">这是p2</p>
<p id="p3">这是p3</p>
</body>
</html>
八、扩展：
json和js对象的区别
json字符串: { "id":"100","name":"tony","salary":"30000" }
js对象：{ "id":100,"name":"tony","salary":30000 }
可以看出js对象中value值如果是整数，小数，无需加双引号
含义不同，json是一种数据格式，js表示类的实例
传输：json用于跨平台、跨网络传输，速度快；js不能传输
展现：json键值对方式，值是字符串不能是对象方法函数；js值不一定加双引号，值可以是对象、函数、字符串等
转换：JSON.parse(jsonStr) JSON已经作为浏览器内置对象，eval(json)；JSON.stringify(obj)
3152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
