上周回顾 AJAX
Controller层
最终目的 封装共性 突出特性
@Controller
@RequestMapping("/")
public class AjaxController {
//====================Ajax-03====================================
@RequestMapping("doAjax03UI")
public String doAjax03UI() {
return "ajax-03";//03页面在02页面的基础之上做了一个封装
}
//====================Ajax-02====================================
private List<String> names=new ArrayList<String>();//假设这是存储数据的表
@RequestMapping("doAjax02UI")
public String doAjax02UI() {
return "ajax-02";
}
/**通过此方法校验名字是否存在*/
@RequestMapping("doCheck")
@ResponseBody
public String doCheck(String name) {
if(names.contains(name))
return "名字"+name+"已经存在,请选择其它名字";
return "名字"+name+"不存在,可以注册";
}
/**将客户端请求数据写入到names对应的集合*/
@RequestMapping("doSave")
@ResponseBody
public String doSave(String name) {
System.out.println("name="+name);
names.add(name);
return "save ok";
}
//===================Ajax-01=======================================
@RequestMapping("doAjax01UI")
public String doAjax01UI() {
return "ajax-01";
}
//处理传统请求的服务端设计
@RequestMapping("doGet")
public String doGet(Model model) {
model.addAttribute("message", "Get request result");
return "ajax-01";
}
//处理ajax请求的服务端设计
@RequestMapping("doAjaxGet")
@ResponseBody //将方法返回值以字符串形式进行输出
public String doAjaxGet() throws Exception{
System.out.println("==doGet()==");
//Thread.sleep(3000);//模拟耗时操作
return "Ajax Get request result";
}
}
归纳的一个方便controller层
@Controller
@RequestMapping("/jquery/")
public class JqueryController {
@RequestMapping("doJQueryUI")
public String doJQueryUI() {
return "jquery-ajax-01";
}
@RequestMapping("doAjaxGet")
@ResponseBody
public String doAjaxGet(String msg) {
System.out.println("msg="+msg);
return "JQuery Ajax Get Request Result";
}
@RequestMapping("doAjaxPost")
@ResponseBody
public String doAjaxPost(String msg) {
System.out.println("msg="+msg);
return "JQuery Ajax Post Request Result";
}
}
2.html 客户端层面
Ajax-01(分析Ajax同步&异步与传统方式的同步)
刷新整个页面会使页面渲染很慢很慢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>The Ajax 01 Page <strong id="timeId"></strong></h1>
<div>
<!-- 传统方式的同步请求测试 -->
<fieldset> <!-- 分组设置 -->
<legend>传统方式的同步请求</legend> <!-- 设置分组名称 -->
<button onclick="doGet()">Get Request</button>
<span id="resultId">[[${message}]]</span>
</fieldset>
<!-- Ajax方式的异步请求测试 -->
<fieldset> <!-- 分组设置 -->
<legend>异步请求</legend>
<button onclick="doAjaxGet()">Get Request</button>
<span id="ajaxResultId">loading data ....</span>
</fieldset>
<script type="text/javascript">
//scirpt只要被加载就会执行
document.getElementById("timeId").innerHTML=new Date().toLocaleString()
function doGet(){
location.href="http://localhost/doGet";
}
//Ajax方式的请求
function doAjaxGet(){//错误调试:debugger,console.log(),排除法
//1.创建XHR对象
var xhr=new XMLHttpRequest();
//2.设置状态监听(将服务端响应的结果更新到ajaxResultId位置)
xhr.onreadystatechange=function(){
//console.log(xhr.readState);
if(xhr.readyState==4&&xhr.status==200){
console.log(xhr.responseText);
document.getElementById("ajaxResultId").innerHTML=xhr.responseText;
}
};
//3.建立连接
xhr.open("GET","http://localhost/doGet",true);//true表示异步(底层会启动线程与服务端通讯)
//4.发送请求
xhr.send();
}
</script>
</div>
</body>
</html>
2.检查用户名存在不存在,主讲post和get doCheck() doSave()很多业务是重复的 所以接下来考虑封装
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>The Ajax 02 Page</h1>
<fieldset>
<legend>Ajax 表单请求</legend>
<form>
<input type="text" name="name" id="nameId" onblur="doCheck()" onfocus="doClear()">
<input type="button" onclick="doSave()" value="Save">
</form>
<span id="result"></span>
</fieldset>
<script type="text/javascript">
function doClear(){
document.getElementById("result").innerHTML="";
}
function doSave(){
//1.创建XHR对象
var xhr=new XMLHttpRequest();
//2.设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
document.getElementById("result").innerHTML="<font color='red'>"+xhr.responseText+"</font>";
}
};
//3.打开链接
//var name=document.getElementById("nameId").value;
var name=document.forms[0].name.value;
xhr.open("POST","/doSave",true);
//post请求要设置请求头(规定)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.发送请求
xhr.send("name="+name);//Post请求send方法传值
}
function doCheck(){//在此函数中向服务端发起异步请求,检测name是否存在
//1.创建XHR对象
var xhr=new XMLHttpRequest();
//2.设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
document.getElementById("result").innerHTML="<font color='red'>"+xhr.responseText+"</font>";
}
};
//3.打开链接
//var name=document.getElementById("nameId").value;
var name=document.forms[0].name.value;
console.log("name",name);
xhr.open("GET","/doCheck?name="+name,true);
//4.发送请求
xhr.send(null);//Get请求send方法传值
}
</script>
</body>
</html>
js代码重复了 考虑封装
3.doAjaxGet doAjaxPost 封装函数 加讲了函数定义 函数调用 函数回调函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>The Ajax 03 Page</h1>
<fieldset>
<legend>Ajax 表单请求(对Ajax共性代码进行封装)</legend>
<form>
<input type="text" name="name" id="nameId" onblur="doCheck()" onfocus="doClear()">
<input type="button" onclick="doSave()" value="Save">
</form>
<span id="result"></span>
</fieldset>
<!-- 在编程中我们要学会封装共性,提取特性,以实现代码的可重用性 -->
<script type="text/javascript">
function doClear(){
document.getElementById("result").innerHTML="";
}
//保存业务的实现
function doSave(){
//1.定义请求url
var url="doSave";
//2.定义请求参数
var params="name="+document.forms[0].name.value;
//3.发送异步的post请求
doAjaxPost(url,params,function(result){
document.getElementById("result").innerHTML=result;
})
}
//检查名字是否存在的业务代码
function doCheck(){//在此函数中向服务端发起异步请求,检测name是否存在
//1.定义请求url
var url="doCheck";
//2.定义请求参数
var name=document.forms[0].name.value;
var params="name="+name;
//3.发送异步Get请求
doAjaxGet(url,params,function(result){
document.getElementById("result").innerHTML=result;
})
}
</script>
</body>
</html>
框架里 实现了对ajax的封装 讲了jquery里面的ajax函数 框架就是对传统应用步骤的封装
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>JQuery中ajax函数的相关应用</h1>
<div>
<button onclick="doGet()">$.get(...)</button>
<button onclick="doPost()">$.post(...)</button>
<button onclick="doAjax()">$.ajax(...)</button>
<button onclick="doLoad()">$("").load(...)</button>
</div>
<fieldset>
<legend>响应结果呈现区</legend>
<div id="result">loading data....</div>
</fieldset>
<script type="text/javascript" src="/jquery/jquery.min.js"></script>
<script type="text/javascript">
//向服务端发送Ajax Get 请求
function doGet(){
//1.定义请求的url
var url="doAjaxGet";
//2.定义请求的参数
var params="msg=hello jquery ajax get";
//3.发送异步Get请求
//这里的$符号为jQuery中的一个对象
//get(url[,params][,callback][,dataType])为jquery中的一个ajax函数
$.get(url,params,function(result){
//document.getElementById("result").innerHTML=result;
$("#result").html(result);
},"text");//在这个函数中你看到ajax的代码了吗?
}
//向服务端发送Ajax Post 请求
function doPost(){
//1.定义请求的url
var url="doAjaxPost";
//2.定义请求的参数
var params="msg=hello jquery ajax Post";
//3.发送异步POST请求
//这里的$符号为jQuery中的一个对象
//post(url[,params][,callback][,dataType])为jquery中的一个ajax函数
$.post(url,params,function(result){//post请求一般用于向服务端提交数据
$("#result").html(result);
});//在这个函数中你看到ajax的代码了吗?
}
//向服务端发送Ajax Post 请求
function doAjax(){
//1.定义请求的url
var url="doAjaxGet";
//2.定义请求的参数
var params="msg=hello jquery ajax request";
//3.发送异步Get请求
//这里的$符号为jQuery中的一个对象
$.ajax({
type:"GET",//表示get请求(默认为get),省略不写为Get
url:url,//":"左边的内容为语法定义,我们不能修改.":"右边为我们自己定义
data:params,//请求参数
async:true,//true表示异步
success:function(result){ //回调函数
$("#result").html(result);
}
});//在这个函数中你看到ajax的代码了吗?
}
function doLoad(){
//1.定义请求的url
var url="doAjaxGet";
//2.定义请求的参数
var params="msg=hello jquery ajax request";
//3.发送异步Get请求
//在指定位置异步加载url对象的资源,
//在当前应用中表示把url对象的资源呈现到#result位置.
//$("#result").load(url,params,function(){//回调函数,资源加载完成执行此函数
// console.log("load complete");
//});
$("#result").load(url);//假如不向服务端传值,不需要处理load完以后的结果,还可以这样写
}
//................
</script>
</body>
</html>
要引入ajax.js文件
错误解决
呈现的结果
新内容 810课 代码污染的点
Xddfathe r 9:30:04
为什么封装只写到ajax
Xddfathe r 9:30:27
jQuery那边只有对象调方法
Xddfathe r 9:33:39
有没有方式可以减少代码污染
Xddfathe r 9:33:55
可以按照jquery框架方式把函数封装
局部 内部的 不可访问
Xddfathe r 9:40:00
只使用一次的话 最好没必要定义函数
Xddfathe r 9:40:09
可以用自调用
Xddfathe r 9:40:32
避免污染
Xddfathe r 9:44:14
1.能不用全局尽量不用全局
点:讲 js的五种基本数据类型
Xddfathe r 10:19:13
JavaScript中有五种基本数据类型(也叫做简单数据类型)分别为:undefined、null、bolean、number、string;另外还含有一种复杂的数据类型:object.
Xddfathe r 10:19:18
基本类型数据
1.基本数据类型值是指简单的数据段,五种基本类型都是按值访问的(可以操作保存在变量中的实际值);
2.基本类型的值在内存中占据固定大小的空间,被保存在栈内存中。(从一个变量向另一个变量复制基本类型的值,会创建这个值的一个副本);
3.不能给基本类型的值添加属性。
输出形式
自己试着打
对象的克隆
类似定义很多次s4
依旧是封装共性 提取特性思想
做一个更简单的设计和实现
调用
实参传给实参
大总结 方法调用
继承
p2无法访问到的
Xddfathe r 11:58:17
.prototype 是父类 共享
Xddfathe r 11:58:20
避开了私有
下午
看到函数的内部结构
如上图 如下对应
同一对象 自己打一遍之后
按顺序
1.
2.
js的继承 很乱
js面向对象
新建.js文件测试
模型 把函数封装在一个对象
属于自调用 只用一次 不要定义全局
实现ajax框架 小试身手
雷哥 理解JavaScript中的函数
1.controller层
@Controller
@RequestMapping("/")
public class AjaxController {
//====================Ajax-04====================================
@RequestMapping("doAjax04UI")
public String doAjax04UI() {
return "ajax-04";//03页面在02页面的基础之上做了一个封装
}
}
2.html客户端层
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>The Ajax 04 Page</h1>
<fieldset>
<legend>Ajax 表单请求(Ajax框架-小试身手)</legend>
<form>
<input type="text" name="name" id="nameId" onblur="doCheck()" onfocus="doClear()">
<input type="button" onclick="doSave()" value="Save">
</form>
<span id="result"></span>
</fieldset>
<script type="text/javascript" src="/ajax/ajaxfk.js"></script>
<!-- 在编程中我们要学会封装共性,提取特性,以实现代码的可重用性 -->
<script type="text/javascript">
function doClear(){
document.getElementById("result").innerHTML="";
}
//保存业务的实现
function doSave(){
//1.定义请求url
var url="doSave";
//2.定义请求参数
var params="name="+document.forms[0].name.value;
//3.发送异步的post请求
Ajax.doAjaxPost(url,params,function(result){
document.getElementById("result").innerHTML=result;
})
}
//检查名字是否存在的业务代码
function doCheck(){//在此函数中向服务端发起异步请求,检测name是否存在
//1.定义请求url
var url="doCheck";
//2.定义请求参数
var name=document.forms[0].name.value;
var params="name="+name;
//3.发送异步Get请求
Ajax.doAjaxGet(url,params,function(result){
document.getElementById("result").innerHTML=result;
})
}
</script>
</body>
</html>
3.js框架 模板
(function(){
//定义构造函数
var ajax=function(){};
//在构造函数的原型对象上添加函数
ajax.prototype={
doAjaxGet:function(url,params,callback){
//1.创建XHR对象
var xhr=new XMLHttpRequest();
//2.设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
callback(xhr.responseText);//处理服务端响应的结果数据
}
};
//3.打开链接
xhr.open("GET",url+"?"+params,true);
//4.发送请求
xhr.send(null);//Get请求send方法传值
},
doAjaxPost:function(url,params,callback){
//1.创建XHR对象
var xhr=new XMLHttpRequest();
//2.设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
callback(xhr.responseText);
}
};
//3.打开链接
//var name=document.getElementById("nameId").value;
var name=document.forms[0].name.value;
xhr.open("POST",url,true);
//post请求要设置请求头(规定)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.发送请求
xhr.send(params);//Post请求send方法传值
}
}
//通过一个全局变量来指向它我们构建的对象.
window.Ajax=new ajax();
})()//函数自调用(基于此方式来防止js中的污染事件)
通过this方式去写
Ajax局部更新问题
跳回activity
修正根路径 controller层
注解 返回json串
服务端 数据 修正
表示了异步加载 局部更新
扩展
性能不好 传统的
错误示范 去点就可以找到
时间显示问题
Activity自己实践
1.controller层
/**查询所有活动信息
* 页面和数据一起返回,这种写法的问题:
* 1)当业务数据加载非常慢,页面也响应的速度也会慢.
* 2)现在在这种大前端架构下,各种端百花齐放(浏览器,手机端,手表端,....),假如有些端只要数据,不需要你的页面.
* 你也返回一个页面这时没有的
* */
// @RequestMapping("/activity/doFindActivitys")
// public String doFindActivitys(Model model) {
// List<Activity> list = activityService.findAcitivty();
// model.addAttribute("list", list);
// /*
// for (Activity item : list) {
// System.out.println(item);
// }
// */
// return "activity";
// }
@RequestMapping("/activity/doFindActivitys")
@ResponseBody
//当我们方法返回值为一个或多pojo对象时(也可是map)
//spring mvc还会检测方法上是否有@ResponseBody注解,
//假如有这个注解,spring mvc还会将返回的对象转换为json格式字符串.
public List<Activity> doFindActivitys(){
return activityService.findAcitivty();
}
@RequestMapping("/activity/doActivityUI")
public String doActivityUI() {
return "activity";
}
2.html 客户端层
注释掉获取的信息 加入td
3.尝试运行 看客户端呈现页面
加了jsonView之后的页面
继续写html代码 客户端层面
搬到下面过来了
利用json知识
4.service层
之前没写完全html 客户端层面的时候
模拟的耗时操作
5.pojo层
获取json数据格式 换成好辨别的数据格式
6.再次查看执行效果
把模拟加载延迟打开 (servicelmpl注释取消)
页面显示
一开始
效果实现
自我留下的作业
用原先的html代码 实现Activity日期下拉小列表
还要就是了解自调用和json jquery代码